Skip to main content
Solved

Add Webfeed To Email Template


Forum|alt.badge.img+1

I have a a custom webfeed setup - it’s previewing correctly in Klaviyo. Unfortunatly I’m having issues adding that feed data to my email template? I’ve tried following the instructions in the help center and given to other commenters here, but I think the help docs have changed as it doesn’t seem to have information on the best tags to use? Or I’m being blind.

Here’s the JSON being pulled in (as shown in the preview) - there will only ever be one item in the feed so to get the title I shouldn’t need to repeat it?

{
  "link": "https://url.here",
  "image": "https://imageurl.here",
  "title": "Title Here",
  "content": "Content Here",
  "subject": "Subject Here",
  "products": [
    {
      "productLink": "https://producturl.here",
      "productImage": "https://productimageurl.here",
      "productTitle": "Product Title 1"
    },
    {
      "productLink": "https://producturl.here",
      "productImage": "https://productimageurl.here",
      "productTitle": "Product Title 2"
    }
  ]
}

Also, once I get the information pulling through, can it only be used in the text field or can you add the tags into places such as the image field?

Any help appreciated!

Best answer by maker101

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

View original
Did this topic or the replies in the thread help you find an answer to your question?

2 replies

Brian Turcotte
Forum|alt.badge.img+37

Hi @maker101!

I’m going to check on this internally and I’ll update the thread ASAP!

Best,

Brian


Forum|alt.badge.img+1
  • Author
  • Contributor I
  • 2 replies
  • Answer
  • January 29, 2024

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