How to Publish Your Shopify Blog Feed In Your Klaviyo Email Template


We continue to enhance and optimize our Shopify Plus fashion client’s email marketing efforts using Klaviyo. Klaviyo has a solid integration with Shopify that enables a ton of e-commerce related communications that are pre-built and ready to go.

Surprisingly, inserting your Shopify Blog Posts into an email is NOT one of them, though! Making things even more difficult… the documentation for building this email isn’t thorough and doesn’t even document their newest editor. So, Highbridge had to do some digging and figure out how to do it ourselves… and it wasn’t easy.

Here’s the development necessary to make this happen:

  1. Blog Feed – The atom feed provided by Shopify doesn’t provide any customization nor does it include images, so we have to build a custom XML feed.
  2. Klaviyo Data Feed – The XML feed that we built needs to be integrated as a data feed in Klaviyo.
  3. Klaviyo Email Template – We then need to parse the feed into an email template where the images and content are properly formated.

Build a Custom Blog Feed In Shopify

I was able to find an article with example code to build out a custom feed in Shopify for Mailchimp, and made quite a few edits to clean it up. Here are the steps to build a custom RSS feed in Shopify for your blog.

  1. Navigate to your Online Store and select the theme you wish to place the feed in.
  2. In the Actions menu, select Edit Code.
  3. In the Files menu, navigate to Templates and click Add a new template.
  4. In the Add a new template window, select Create a new template for blog.
  1. Select Template type of liquid.
  2. For the File name, we entered klaviyo.
  3. In the code editor, place the following code:
{%- layout none -%}
{%- capture feedSettings -%}
  {% assign imageSize="grande" %}
  {% assign articleLimit = 5 %}
  {% assign showTags = false %}
  {% assign truncateContent = true %}
  {% assign truncateAmount = 30 %}
  {% assign forceHtml = false %}
  {% assign removeCdataTags = true %}
{%- endcapture -%}
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" 
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:media="http://search.yahoo.com/mrss/"
  >
  <channel>
    <title>{{ blog.title }}</title>
    <link>{{ canonical_url }}</link>
    <description>{{ page_description | strip_newlines }}</description>
    <lastBuildDate>{{ blog.articles.first.created_at | date: "%FT%TZ" }}</lastBuildDate>
    {%- for article in blog.articles limit:articleLimit %}
    <item>
      <title>{{ article.title }}</title>
      <link>{{ shop.url }}{{ article.url }}</link>
      <pubDate>{{ article.created_at | date: "%FT%TZ" }}</pubDate>
      <author>{{ article.author | default:shop.name }}</author>
      {%- if showTags and article.tags != blank -%}<category>{{ article.tags | join:',' }}</category>{%- endif -%}
      {%- if article.excerpt != blank %}
      <description>{{ article.excerpt | strip_html | strip }}</description>
      {%- else %}
      <description>{{ article.content | strip_html | truncatewords: truncateAmount | strip }}</description>
      {%- endif -%}
      {%- if article.image %}
      <media:content type="image/*" url="https:{{ article.image | img_url: imageSize }}" />
      {%- endif -%}
    </item>
    {%- endfor -%}
  </channel>
</rss>
  1. Update the custom variables as necessary. One note on this is that we’ve set the image size to the max width of our emails, 600px wide. Here’s a table of Shopify’s image sizes:
Shopify Image Name Dimensions
pico 16px x 16px
icon 32px x 32px
thumb 50px x 50px
small 100px x 100px
compact 160px x 160px
medium 240px x 240px
large 480px x 480px
grande 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
master Largest image available
  1. Your feed is now available at your blog’s address with the querystring appended to view it. In our client’s case, the feed URL is:
https://closet52.com/blogs/fashion?view=klaviyo
  1. Your feed is now ready to use! If you’d like, you can navigate to it in a browser window to ensure there are no errors. We’re going to ensure it parses properly in our next step:

Add Your Blog Feed Into Klaviyo

In order to utilize your new blog feed in Klaviyo, you have to add it as a Data Feed.

  1. Navigate to Data Feeds
  2. Select Add Web Feed
  3. Enter a Feed Name (no spaces are allowed)
  4. Enter the Feed URL that you just created.
  5. Enter the Request Method as GET
  6. Enter the Content Type as XML
Klaviyo Add Shopify XML Blog Feed
  1. Click Update Data Feed.
  2. Click Preview to ensure the feed is populating correctly.
Preview Shopify Blog Feed in Klaviyo

Add Your Blog Feed To Your Klaviyo Email Template

Now we want to build our blog into our email template in Klaviyo. In my opinion, and the reason why we needed a custom feed, I like a split content area where the image is on the left, the title and excerpt is beneath. Klaviyo also has the option to collapse this into a single column on a mobile device.

  1. Drag a Split Block into your email template.
  2. Set your left column to an Image and your right column to a Text block.
Klaviyo Split Block for Shopify Blog Post Articles
  1. For the image, select Dynamic Image and set the value to:
{{ item|lookup:'media:content'|lookup:'@url' }}
  1. Set the Alt Text to:
{{item.title}}
  1. Set the Link Address so that if the email subscriber clicks on the image, it will bring them to your article.
{{item.link}}
  1. Select the right column to set the column content.
Klaviyo Blog Post Title and Description
  1. Add your content, be sure to add a link to your title and insert your post excerpt.
<div>
<h3 style="line-height: 60%;"><a style="font-size: 14px;" href="https://feed.martech.zone/link/8998/15207412/{{ item.link }}">{{item.title}}</a></h3>
<p><span style="font-size: 12px;">{{item.description}}</span></p>
</div>
  1. Select the Split Settings tab.
  2. Set to a 40% / 60% layout to provide more room for text.
  3. Enable Stack on Mobile and set Right to Left.
Klaviyo Split Block for Shopify Blog Post Articles stacked on Mobile
  1. Select the Display Options tab.
Klaviyo Split Block for Shopify Blog Post Articles Display Options
  1. Select Content Repeat and put the feed that you created in Klaviyo as the source in the Repeat For field:
feeds.Closet52_Blog.rss.channel.item
  1. Set the Item alias as item.
  2. Click Preview and test and you can now see your blog posts. Be sure to test it in both desktop and mobile mode.
Klaviyo Split Block Preview and test.

And, of course, if you need assistance in Shopify optimization and Klaviyo implementations, don’t hesitate to reach out to Highbridge.

Disclosure: I’m a partner in Highbridge and I’m using my affiliate links for Shopify and Klaviyo in this article.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here