It took a while, but managed to figure out the answer myself. For any one else looking for help on this subject I thought I’d share my solution here:
My webfeed looks like this in the webfeed preview:
{
"articles": [
{
"link": "EMAIL LINK TO SHOP BLOG POST",
"image": "EMAIL MAIN IMAGE LINK",
"title": "EMAIL TEXT TITLE",
"content": "EMAIL TEXT CONTENT",
"products": [
{
"productLink": "PRODUCT LINK 1",
"productImage": "PRODUCT IMAGE LINK 1",
"productTitle": "PRODUCT NAME 1"
},
{
"productLink": "PRODUCT LINK 2",
"productImage": "PRODUCT IMAGE LINK 2",
"productTitle": "PRODUCT NAME 1"
}
]
}
]
}
Content Repeat Setting (For article link, image, title and content - notice capitisation does NOT reflect that in the preview): feeds.nameoffeed.Articles
Then to output…
title: Use {{ item.Title }}
link: Use {{ item.Link }}
image: Use {{ item.Image }}
content: Use {{ item.Content }}
To add a custom block of products use the same content repeat settings as above, and then add the following code to a text block. This will give you a 3 x 3 (9 products total) table of products with titles and links. I have this set to desktop view only.
<table style="display: inline-block; margin-left: auto; margin-right: auto;">
<tbody>
<tr>{% for product in item.Products|slice:":3" %}
<td style="padding: 10px; text-align: center;"><a href="{{ product.productLink }}" style="text-decoration: none; color: black;"><img style="max-width: 150px; height: auto;" src="{{ product.productImage }}">
<p style="margin: 5px 0;">{{ product.productTitle }}</p>
</a></td>
{% endfor %}</tr>
<tr>{% for product in item.Products|slice:"3:6" %}
<td style="padding: 10px; text-align: center;"><a href="{{ product.productLink }}" style="text-decoration: none; color: black;"><img style="max-width: 150px; height: auto;" src="{{ product.productImage }}">
<p style="margin: 5px 0;">{{ product.productTitle }}</p>
</a></td>
{% endfor %}</tr>
<tr>{% for product in item.Products|slice:"6:9" %}
<td style="padding: 10px; text-align: center;"><a href="{{ product.productLink }}" style="text-decoration: none; color: black;"><img style="max-width: 150px; height: auto;" src="{{ product.productImage }}">
<p style="margin: 5px 0;">{{ product.productTitle }}</p>
</a></td>
{% endfor %}</tr>
</tbody>
</table>
To add the same for a mobile view, with all products stacked 1 x 9 use the following code:
<table class="mobile-responsive-table" style="width: 100%;">
<tbody>{% for product in item.Products %}
<tr>
<td style="padding: 10px; text-align: center;"><a href="{{ product.productLink }}" style="text-decoration: none; color: black;"><img style="max-width: 250px; height: auto;" src="{{ product.productImage }}">
<p style="margin: 5px 0;">{{ product.productTitle }}</p>
</a></td>
</tr>
{% endfor %}</tbody>
</table>
I hope this helps others - the very random capitalisation was tripping me up so you may have to try a few different variations (uppercase, lowercase or camelcase).
