Using Klaviyo’s Free Email Template Creator with Shopify

email template creator

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.

Selecting the free email template

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

Selecting Emails in Shopify

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

HTML Email Templates in Shopify

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.

 

6 components of a reusable email footer

 

 

Why you shouldn’t be scared of negative reviews (and how to mana…

 

 

How to Use HTML Images in Your Email Templates

 

.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’ });
})

Back to Blog Home

5 comments

  • Can you tell me where I need to add the “endif” in this? I’m going cross eyed trying to find it!!!

    table.kmButtonBarContent {width:100% !important;}

    @media only screen and (max-width: 480px) {

    body, table, td, p, a, li, blockquote {

    -webkit-text-size-adjust: none !important;

    }

    body{

    width: 100% !important;

    min-width: 100% !important;

    }

    td[id=bodyCell] {

    padding: 10px !important;

    }

    table[class=kmTextContentContainer] {

    width: 100% !important;

    }

    table[class=kmBoxedTextContentContainer] {

    width: 100% !important;

    }

    td[class=kmImageContent] {

    padding-left: 0 !important;

    padding-right: 0 !important;

    }

    img[class=kmImage] {

    width:100% !important;

    }

    table[class=kmSplitContentLeftContentContainer],

    table[class=kmSplitContentRightContentContainer],

    table[class=kmColumnContainer] {

    width:100% !important;

    }

    table[class=kmSplitContentLeftContentContainer] td[class=kmTextContent],

    table[class=kmSplitContentRightContentContainer] td[class=kmTextContent],

    table[class=”kmColumnContainer”] td[class=kmTextContent] {

    padding-top:9px !important;

    }

    td[class=”rowContainer kmFloatLeft”],

    td[class=”rowContainer kmFloatLeft firstColumn”],

    td[class=”rowContainer kmFloatLeft lastColumn”] {

    float:left;

    clear: both;

    width: 100% !important;

    }

    table[id=templateContainer],

    table[class=templateRow],

    table[id=templateHeader],

    table[id=templateBody],

    table[id=templateFooter] {

    max-width:600px !important;

    width:100% !important;

    }

    h1 {

    font-size:24px !important;

    line-height:100% !important;

    }

    h2 {

    font-size:20px !important;

    line-height:100% !important;

    }

    h3 {

    font-size:18px !important;

    line-height:100% !important;

    }

    h4 {

    font-size:16px !important;

    line-height:100% !important;

    }

    td[class=rowContainer] td[class=kmTextContent] {

    font-size:18px !important;

    line-height:100% !important;

    padding-right:18px !important;

    padding-left:18px !important;

    }

    td[class=headerContainer] td[class=kmTextContent] {

    font-size:18px !important;

    line-height:100% !important;

    padding-right:18px !important;

    padding-left:18px !important;

    }

    td[class=bodyContainer] td[class=kmTextContent] {

    font-size:18px !important;

    line-height:100% !important;

    padding-right:18px !important;

    padding-left:18px !important;

    }

    td[class=footerContent] {

    font-size:18px !important;

    line-height:100% !important;

    }

    td[class=footerContent] a {

    display:block !important;

    }

    }

    We are so happy that you have chosen one of our wonderful Kiddimoto products, we can’t wait for you to recieve you new purchase soon.

    The team just wanted to confirm your recent order.

    Date {{ date | date: “%m/%d/%Y” }}

    {% if requires_shipping %}

    Shipping address:

    {{ shipping_address.name }}

    {{ shipping_address.street }}

    {{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}

    {{ shipping_address.country }}

    {% endif %}

    Billing address

    {{ billing_address.name }}

    {{ billing_address.street }}

    {{ billing_address.city }}, {{ billing_address.province }} {{ billing_address.zip }}

    {{ billing_address.country }}

    {% for line in line_items %}

    {% endif %}

    Subtotal: {{ subtotal_price|money_with_currency }}

    {% for tax_line in tax_lines %}

    {{ tax_line.title }}: {{ tax_line.price|money_with_currency }}

    {% endfor %}{% if requires_shipping %}

    Shipping: {{ shipping_price|money_with_currency }}

    {% endif %}

    Total: {{ total_price|money_with_currency }}

    If you ever need any help with after sales customer service please don’t hesitate to contact us on either

    03 99 88 16 16

    info@kiddimoto.com.au

  • Really Bad experience on using it for Shopify!

  • Hi, I tried a few times and it doesn’t work. I even tried changing just one thing, very minimal and it still did not work, received an “if” error message.. I spent an hour working on the new templates to discover they didn’t work.. Now I can’t see to get back to my default templates. Help please.

  • Hey everyone,

    When I try to paste my exported template code from Klaviyo into Shopify I’m getting a “Liquid Unknown tag ‘unsubscribe'” error message. Any thoughts on how to fix this?

    much appreciated,

    Jeremy

  • Can you tell me how to display subscribers total in my shopify site using API key…
    Share me some codings for error messages which was create manually by developer.. Thanks in advance…

Comments are closed.