Using Klaviyo’s Free Email Template Creator with Shopify

Updated: October 28, 2013

If you’re a Shopify store owner, Klaviyo’s free email template creator can help you quickly and easily make beautiful order confirmations, shipping notices, etc. Next step – adding them into Shopify.  We’ll show you how below.

Once you’ve created and saved an email in Klaviyo, click Export HTML on the main templates page, then copy the text.

Next, login to Shopify and go to Settings and then Notifications.  From there select the email you want to replace.

When that opens, you’ll click on the “HTML” tab:

Then, paste in the HTML from Klaviyo. At this point, you should have a working and beautiful template!

Now, in rare cases, you may run into issues with either an error in Shopify with how they read the template. There are a few bits of code that are out of our control, but the trouble shooting guide below should help you out.

Troubleshooting any Template Issues

Shopify has special bits of code that are used to plug in the specific order and shipping information to your emails.

While it isn’t super common, after you build your email and paste it into Shopify, it’s possible that some of these tags will have been re-arranged and you’ll see an error in Shopify.  That said, with the below it should be a quick fix.  Unfortunately, this isn’t something we can automatically detect and fix.

Overview of what you’ll do

To fix this, you’ll need to make minor changes to the html in either Klaviyo or directly in Shopify.  In short, you’re going to move or add the missing Shopify tag.

You can’t break anything – so it’s ok to try it one place, see if it works in the preview, then try it somewhere else.

If you ever want to start over, you can create a new template in Klaviyo and start from a Shopify Order Confirmation and you’ll have a fresh working template.

Liquid unknown tag ‘endfor’

This for line is used to cycle through each of the items in an order. Sometimes in moving it around the for gets lost, the end disappears or they get out of order.

As an example, here’s what this would generally look like:

{% for line in line_items %}

…. and then the information on the items, that generally looks like this:

{{ line.quantity }}x {{ line.title }} for {{ line.price|money }} each<br />

And then the closing {% endfor %} after all of it:

{% endfor %}

The problem is usually that the last bit (the {% endfor %} is out of order or missing.  For each {% for … %} you’ll need one corresponding {% endfor %}

Liquid Unknown Tag “endif”

For every endif tag in Shopify, you need to make sure there’s a corresponding {% endif %}. For example, if there’s a {% if requires_shipping %}, then you need an {% endif %} after the shipping information.

Like the endfor issue, this is usually fixed by either adding or moving the {% endif %} or adding an additional if statement (for example: {% if requires_shipping %} ).

As an example, if you split your shipping information up, you’ll likely need to re-add an additional shipping “if”. For example in this case:

{% if requires_shipping %} </span></p>
<p style=”margin: 0; padding-bottom: 1em”>Shipping address:<br />
{{ shipping_address.name }}<br />
{{ shipping_address.street }}<br />
{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}<br />
{{ shipping_address.country }}</p>
{% endif %}

<p style=”margin: 0; padding-bottom: 1em”>Billing address<br />
{{ billing_address.name }}<br />
{{ billing_address.street }}<br />
{{ billing_address.city }}, {{ billing_address.province }} {{ billing_address.zip }}<br />
{{ billing_address.country }}</p>
{% for line in line_items %}

<p style=”margin: 0; padding-bottom: 1em”>{{ line.quantity }}x {{ line.title }} for {{ line.price|money }} each</p>
{% endfor %}{% if discounts %}

<p style=”margin: 0; padding-bottom: 1em”>Discount (code: {{ discounts.first.code }}): {{ discounts_savings|money_with_currency }}</p>
{% endif %}

<p style=”margin: 0; padding-bottom: 1em”>Subtotal: {{ subtotal_price|money_with_currency }}</p>
<p style=”margin: 0; padding-bottom: 1em”><span style=”line-height: 1.6em;”>{{ tax_line.title }}: {{ tax_line.price|money_with_currency }}</span></p>
 {% if requires_shipping %}<p style=”margin: 0; padding-bottom: 1em”><span style=”line-height: 1.6em;”>Shipping: {{ shipping_price|money_with_currency }}</span></p>
{% endif %}

…the bold text was added to solve the problem.

The Shopify preview doesn’t look like the Klaviyo preview

Sometimes, you’ll notice that the in-app Shopify preview doesn’t look like the Klaviyo preview. This is most commonly seen with the social button bar – where the buttons go from horizontal to vertical.

This issue is usually just due to how Shopify’s preview function works. If you email yourself the preview rather than look at it in Shopify, you’ll see what it really looks like.  You can also use a service like Litmus to check it out on different

Still having issues? 

If you’re still having issues, we have a “rent an engineer” program. For the endif and endfor errors, we’ll have one of our engineers dive in and fix up your template for a one-time $25 fee.

For bigger issues and/or custom needs, we’ve negotiated discounted rates with email designers and engineers and can give you more information.

Drop us an email at hello@klaviyo.com and we’ll get someone on it.

————-

Like Klaviyo’s free email template creator? Klaviyo also offers a full email marketing solution that lets you improve all of your emails, including:

• Easily setup abandoned cart emails
• Automatically follow-up with customers who haven’t bought recently
• Send beautiful welcome emails to new customers

Learn more in our Shopify app listing.

.yuzo_related_post img{width:260px !important; height:250px !important;}
.yuzo_related_post .relatedthumb{line-height:16px;background: !important;color:!important;}
.yuzo_related_post .relatedthumb:hover{background:#ffffff !important; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear;;color:!important;}
.yuzo_related_post .relatedthumb a{color:#323b43!important;}
.yuzo_related_post .relatedthumb a:hover{ color:}!important;}
.yuzo_related_post .relatedthumb:hover a{ color:!important;}
.yuzo_related_post .yuzo_text {color:!important;}
.yuzo_related_post .relatedthumb:hover .yuzo_text {color:!important;}
.yuzo_related_post .relatedthumb{ margin: 0px 0px 0px 0px; padding: 5px 5px 5px 5px; }

jQuery(document).ready(function( $ ){
//jQuery(‘.yuzo_related_post’).equalizer({ overflow : ‘relatedthumb’ });
jQuery(‘.yuzo_related_post .yuzo_wraps’).equalizer({ columns : ‘> div’ });
})