Add Webfeed To Email Template

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).