How to customize your Shopify email templates

Shopify

In this article we will learn how to use custom HTML email templates with Shopify.

When you set up a Shopify store they automatically send a handful of emails out of the box for orders, shipping, customer support and notifications. The default email templates that Shopify provide look pretty good. Although there are a number of reasons you’re going to want to customize these.

  1. To match your brand
  2. To be consistent with other emails you’re sending from other ESPs
  3. To improve the design and UX of the default templates
  4. To customize the content that is displayed in the emails
  5. To take advantage of marketing or conversion opportunities in these transactional emails

How to use custom HTML email templates for Shopify emailing

You’ve just got yourself some new HTML email templates. You’re going to use templates that have inlined CSS so you know they work across all major email clients. They contain some images like your logo or social media icons.

1. Choose an email template to edit

Shopify notifications
Shopify notification templates

2. Upload the files that you need

Shopify provides a files feature where you can upload images. This is your CDN and where all your files will be hosted.

Shopify files CDN
Upload files

3. Customize your template and insert the Shopify liquid variables into your template

This is going to be the bulk of the task. Referencing the original Shopify template you’re going to copy/paste the various liquid variables and logic over to your new email template.

Email code editor

Here are some code samples.


{% for line in line_items %}
<tr>
  <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; border-bottom: 1px solid #eee; margin: 0; padding: 5px;" valign="top">{{ line.product.title }}</td>
  <td class="receipt-figure" style="font-family: sans-serif; font-size: 14px; vertical-align: top; border-bottom: 1px solid #eee; margin: 0; padding: 5px; text-align: right;" valign="top" align="right">{{ line.line_price | money }}</td>
</tr>
{% endfor %}


{% for line in tax_lines %}
<tr class="receipt-subtle" style="color: #aaa;">
  <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; border-bottom: 1px solid #eee; margin: 0; padding: 5px;" valign="top">{{ line.title }}</td>
  <td class="receipt-figure" style="font-family: sans-serif; font-size: 14px; vertical-align: top; border-bottom: 1px solid #eee; margin: 0; padding: 5px; text-align: right;" valign="top" align="right">{{ line.price | money }}</td>
</tr>
{% endfor %}

Some liquid variables you might want to use.

4. Copy across your email template into Shopify

At this point copy/paste your email template code over to Shopify.

Like I mentioned before, you can edit the HTML in the Shopify form, although I have found it much easier to manage this outside of Shopify using my own editor.

Copy/paste code

5. Test your Shopify emails

Shopify provides two testing methods. Preview in the browser and email yourself. Try both until it looks good.

Test and preview email template
Test and preview email template

Further reading

Other email service template tutorials

Receive more email design content like this to your inbox

No spam. Just related email content.