In this article, we are going to explain how to send emails/campaigns by importing blog articles from your Shopify store using Smart RSS Feed and Klaviyo. The email will contain latest articles from your store, automatically sourced using RSS Feed. The email can be directly sent or automated or scheduled or triggered as per your requirement.
At the end of this document, you will find a demonstration video of these steps. You may skip to that, if you want.
Requirements:
- A Klaviyo account (Free plan available)
- Smart RSS Feed (60 days free trial available)
For this article we shall assume that you have installed Smart RSS Feed app on your Shopify store. We also assume that you have previously sent static emails using Klaviyo. Now, we are going to demonstrate how to automatically import contents from the RSS Feed into the email.
Steps
- In Shopify Admin, visit Apps > Smart RSS Feed. A new page shall open with App’s Settings.
- Go to Feed URL Generator. Under the Blog Feed, select the name of the blog and in the Target select Klaviyo.
- Click Generate and copy the feed URL generated.
- Log into your Klaviyo account. Navigate to Data Feeds and click Add Web Feed.
- Under Feed Name, provide a unique name. It will be required later. For convenience, we provide myblogrssfeed
- Under Feed URL, enter the RSS Feed URL displayed in Step #3 above.
- Under Request Method, select GET and under Content Type, select XML.
- Click Add Data Feed button. The Feed shall be validated. Once done, click Preview. If no error is displayed, it means the feed has been crawled by Klaviyo successfully.
- Go to Campaigns and click Create Campaign. Select type as Email and click Create Campaign again.
- Choose the Recipient List and click Continue to Content.
- Enter Subject line, Sender Name, Sender Email as per your choice.
- Under the option How would you like to design your email?, click Drag and Drop. You will be shown a list of available templates. Select any one of them.
- A preview of email template shall be displayed with Drag and Drop Editor. From the left, select Text and drag it on the template on right of screen. A text block shall be displayed with the default text, This is a text block. Click here to edit it. If you click on it, a text editor shall be displayed on the left.
- In the text editor on left, click on the hamburger menu at the top and select On. Under Repeat For, enter the blog name (from step #5) as follows feeds.myblogrssfeed.rss.channel.item. In case you had provided any other feed name in step #5, use that instead.
If you want to display only 3 latest blog posts in the email, use slice variable as follows:
feeds.myblogrssfeed.rss.channel.item|slice:':3'
15. Under Item Alias, enter item and click Save. This is the reference to the above RSS feed and ensures that the feed can be accessed in template just like any other variables.
16. Click on the Source button on the editor. An HTML source code editor will be displayed. Copy and paste the below HTML code in the text editor and click Save.
<p><a href="{{ item.url }}">{{ item.title }}</a></p>
<p><img src="{{ item|lookup:'media:content'|lookup:'@url' }}" /></p>
<p>{{ item.description|slice:':255' }} <a href="{{ item.url }}">Read More</a></p>17. In the left side of screen , click Preview button and then click Preview Now. You should be able to see the preview of the email. You can make necessary adjustments to the HTML template by closing the email preview and double clicking on the text blog in template.
NOTE:
- The contents sourced from RSS Feed shall be visible only in the Preview. It won’t be displayed in the template.
- In the above code, you can change the number after slice to change the number of characters of the description displayed in the email.
Additional Customizations
Suppose you want to display the 1st article differently from the remaining articles in the email. To do this,
- From Step 14, click the hamburger menu at the top and turn repeat Off. Click Save.
- Copy the below code and replace it in the source editor. Click Save and then preview.
<div class="firststyle">{% for item in feeds.myblogrssfeed.rss.channel.item|slice:':1' %}
<p><a href="{{ item.url }}">{{ item.title }}</a></p>
<p><img src="{{ item|lookup:'media:content'|lookup:'@url' }}" /></p>
<p>{{ item.description|slice:':255' }} <a href="{{ item.url }}">Read More</a></p>
{% endfor %}</div>
<div class="secondstyle">{% for item in feeds.myblogrssfeed.rss.channel.item|slice:'1:3' %}
<p><a href="{{ item.url }}">{{ item.title }}</a></p>
<p><img src="{{ item|lookup:'media:content'|lookup:'@url' }}" /></p>
<p>{{ item.description|slice:':255' }} <a href="{{ item.url }}">Read More</a></p>
{% endfor %}
</div>
The important thing here is understanding the slice property.
- slice:’:3′ will select 1st, 2nd and 3rd items
- slice:’:1′ will select 1st item only.
- slice:’1:3′ will select 2nd and 3rd items
The slice uses the syntax of similarly named variable from Python/Django. You can read more options here.