Shopify Integration
Our email templates include a Shopify version, which you can use for custom designed email notifications for your store. Included are templates for all 17 Shopify notifications.
Note: currently, only our Kant Email Template includes Shopify notification templates.
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.
Inside the /shopify folder, you'll find HTML files for all Shopify notification emails. Read more about them below ↓
Next, you will be presented with a list of all types of notification emails Shopify sends.
You will then see a form where you can set the Email Subject and, what we're after here, the Email body (HTML).
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.
There are several types of customisations you'll want to do. Let's go through each one.
Shopify has a few settings for your notification emails. You can:
Our templates support all of these settings:
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:
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.
Editing the HTML source code is currently needed for some parts of the template, such as call to action button labels. Simply do a search (Ctrl/Cmd + F) for the text string you're looking to change, and the text editor will jump to it and highlight it.
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.
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.
@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.
@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.<style>
tag, you'll see something like:
@media only screen and (min-width: 1px) {
@font-face {
...
}
@font-face {
...
}
...
}
@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.@font-face
, you will see this:
.serif {font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;}
.sans-serif {font-family: 'Open Sans', Arial, sans-serif !important;}
Our template uses a .serif
and .sans-serif
class to define two different fonts.
Change the font's name inside the quotes in font-family: ''
, by using the same name that is defined in the @font-face
block.
Do not change the serif/sans-serif class name, as this is used throughout the template.
Do not to change the src: local('Montserrat Regular'), local('Montserrat-Regular'),
part, as it will result in the font not working.
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.
Our templates use all the tags and contain all the information that the default Shopify templates offer. In some cases, even more. There are many Liquid tags being used, so it's not practical to list them here. Instead, please have a look at the screenshots on the product's landing page.
Related: see the Liquid language reference.
Shopify templates can be found in the /shopify folder. There are 17 HTML files in total, each named exactly after the corresponding notification template in Shopify. The following tables list the templates in the same order listed in your Shopify Notifications Settings.
These notifications are automatically sent out to the customer.
Orders | |
---|---|
order_confirmation.html | Sent automatically to the customer after they place their order. |
order_cancelled.html | Sent automatically to the customer if their order is canceled (if you select this option). |
order_refund.html | Sent automatically to the customer if their order is refunded (if you select this option). |
draft_order_invoice.html | Sent to the customer when a draft order invoice is created. You can edit this email invoice before you send it. |
buy_online_for_Shopify_POS.html | Sent to the customer when their order will be completed without the help of store staff. You can email a draft order to the customer using Shopify POS for iPad. |
abandoned_checkout | Sent to the customer if they leave checkout before they buy the items in their cart. Configure options in checkout settings. |
Shipping | |
fulfillment_request.html | Sent automatically to a third-party fulfillment service provider when order items are fulfilled. |
shipping_confirmation.html | Sent automatically to the customer when their order is fulfilled (if you select this option). |
shipping_update.html | Sent automatically to the customer if their fulfilled order’s tracking number is updated (if you select this option). |
shipment_out_for_delivery.html | Sent automatically to the customer after the status of their fulfillment changes to out for delivery. |
shipment_delivered.html | Sent automatically to the customer after the status of their fulfillment changes to delivered. |
Customer | |
customer_account_invite.html | Sent to the customer with account activation instructions. You can edit this email before you send it. |
customer_account_welcome.html | Sent automatically to the customer when they complete their account activation. |
customer_account_password_reset.html | Sent automatically to the customer when they ask to reset their accounts password. |
contact_customer.html | Sent to the customer when you contact them from the orders or customers page. You can edit this email before you send it. |
These notifications are sent to order notification subscribers (i.e. shop owner) whenever a new order comes in.
Template | Description |
---|---|
new_order.html | Sent to order notification subscribers when a customer places an order. |
new_order_mobile.html | Sent to mobile notification subscribers when a customer places an order. |