Shopify Integration Guide

Our email templates include a Shopify version, which you can use for custom designed email notifications for your Shopify store.

Shopify Integration 1

Liramail Email includes a Shopify integration, which you can use for custom-designed email notifications for your Shopify store.
We have included templates for all Shopify notification emails.

Required software:
Because Shopify only allows editing notification templates by pasting in your email’s HTML code, you will need a text editor first. We recommend Sublime Text or Atom.

 

1 Folder Structure

Unzip the downloaded file to the local disk on your computer. The Shopify-integrated files can be found in the Shopify-Templates/ folder.

  • Shopify-Templates/
    • Customer/ – all Customer Emails.
    • Delivery/ – all Delivery Emails.
    • Order/ – all Order Emails.
    • Shipping/ – all Shipping Emails.
    • Staff-Order-Notification/ – all Admin Emails.

Understand full folder structure and files

 

2Uploading to Shopify

Inside the Shopify-Templates/ folder, you’ll find HTML files for all Shopify notification emails. Read more about them below ↓

  1. In your Shopify admin, click Settings on the bottom left.
  2. On the next page, select “Notifications” ( Next, you will be presented with a list of all types of notification emails Shopify sends. )
  3. To edit a Notification, click its name in the list on the right-hand side ( You will then see a form where you can set the Email Subject and, what we’re after here, the Email body HTML. )
  4. Now open the corresponding HTML file from our template in the text editor of your choice.
  5. Select all code with Ctrl + A (Windows) or Cmd + A (Mac). Copy it to clipboard with Ctrl + C / Cmd + C
  6. Go back to your Shopify admin, and paste the code you just copied, in the Email body (HTML) area.
  7. Finally, click Save on the bottom right.

The new template will now be used for emails of that type that Shopify sends for your store. If you want, you can test the template with real data from your store, by clicking “Send test email” or “Preview” at the top of this template editing page.

 

3Editing Template

The template has many customisation options through MailChimp’s interface, organised by section

Global notification styling:
Shopify has a few settings for your notification emails. You can:

  • set an email logo image – define the width of this image
  • set an email accent colour – Our templates support all of these settings:

Text Editing
This involves only customising the wording in the notification templates. Maybe you don’t like our default text, or maybe you need it translated for your business.

At the very top of the code for almost all emails, you will see some Liquid tags wrapping some text. Liquid is Shopify’s templating language, and it is used to integrate custom websites and, well, email templates with their platform. While text editing is straightforward, the Liquid tags require a basic understanding of this language (or at least some basic experience with programming, as it uses universal concepts).

We have tried providing some defaults in this location, so that you can see them immediately and change them there without scrolling down and hunting for text in the HTML. However, this isn’t possible with all components, so you will need to edit wording inside the HTML, too. Which brings us to:

HTML / Liquid editing
Since Shopify doesn’t provide a visual editor for editing your notification templates, you will need to edit the source code of our templates, in order to do advanced customisations.

We recommend using a text editor capable of syntax highlighting for doing this (both Sublime and Atom have it), as it will be easier for you to find what you’re looking for. Shopify doesn’t provide such editing capabilities.

If you want to change what product information is being pulled into the template from your store, you must have experience with Shopify’s Liquid language.

 

4Google Fonts editing

While our default font pairing looks good, you might want to use different Google Fonts for your brand.

Unfortunately, because Shopify requires a complex workaround to enable web fonts in notification emails, changing them is not as easy as it is with the template’s other versions. You’ll need to go through a few steps.

  • In Google Fonts, search for the font that you’d like to use
  • Select it, and a small black bar will appear at the bottom of the screen. Click the bar to open it:
  • Copy the web font URL ( as highlighted above), open a new tab in your browser, paste the URL in and hit Enter. You’ll most likely see a list of many @font-face declarations, each looking something like this:
  • Now, if you take a closer look, you’ll notice that this block is very similar to what we have in the template. Each @font-face block imports a specific font version, and its name is defined in that font-family: '' code.
  • Copy the @font-face block you need – there will most likely be many of them, for different character encodings. Only choose one encoding – the one that you need – as the more you use, the more it impacts the email load time.
  • Open up the notification template you want to change the fonts for, in your preferred text editor
  • Immediately inside the < style > tag, you’ll see something like:

@media only screen and (min-width: 1px) {
@font-face {
...
}

@font-face {

}


}

  • Replace the @font-face block that corresponds in font-weight with the one you just copied, by deleting it and pasting from clipboard. Do this for all weights of the same font that you need.
  • Finally, after the last @font-face, you will see this:

.font-primary { font-family: 'Poppins', DejaVu Sans, Verdana, sans-serif; }
.font-secondary { font-family: 'Lora', Palatino, Book Antiqua, Georgia, serif; }

Change the first font name in font-family: ”, by using the same name that is defined in the @font-face block.
Do not change the webfont class name, as this is used throughout the template.
That’s it! All that’s needed now is to replace the template in you Shopify Notifications settings as explained above ↑.
Make sure to test the email in the Shopify admin, in order to make sure your changes have been correctly applied.