Getting started: email templates

Through Snipcart, you'll send different types of emails to customers: invoices, abandoned carts retrieval, shipping notifications, order status change, and refunds.

Thanks to a complete email editor in your dashboard, you can fully customize the email templates used for each of these.

Note: email customization within Snipcart will require basic programming knowledge.

How Snipcart email templates work

To set up our email editor, we used a port of the popular, easy-to-use Handlebars.js templating engine. We suggest you start by looking at their documentation to understand the basics.

On top of this, we added some custom helpers that will come in handy when formatting variables such as money amount, dates, and more. Please note that inline partials are not supported yet but should be in the future.

How to customize an email template

To customize a template, log into your Snipcart dashboard. Open the Account menu and navigate to the email templates section.

For now, only the invoice is customizable. We'll add other templates very soon.

Locate the template you want to customize and hit the Edit button.

snipcart-email-templates-edit

A template editor will appear:

email-editor

In the left panel, you'll be able to write your template using Handlebars' templating engine. If you hit CTRL+S, CMD+S or click on the refresh preview button (next to Save & Exit), the live preview in the right panel will update automatically. Once you're happy with the result, you can hit the Save & Exit button.

At any time, you can also hit the Restore default button. This will load the default template. If you click it by mistake, you can always click on the Discard button. This will ignore changes and close the editor.

You can add a new language by hitting the tab with a + sign. You will be prompted to enter an ISO 639-1 code. This is a two-letter code representing a language. For instance, English is en.

If you need to remove a version of a template, you can open it using the tabs and move your mouse over the version, you'll then be able to delete it.

email-editor-delete

How to define the email subject

When customizing your template, you can also define the subject of the email sent to your customers. You can add some metadata to the template using some YAML-like syntax. To enable it, you'll need to add a block wrapped by --- in the top of your template. Here is an example:

---
Subject: This is my subject {{ variable }}
---

This is the beginning of the template content.

You can use Handlebars variables and functions if needed. For instance, if you want to have a subject that changes depending on a specific condition, you could do something like this:

---
{{ #if condition }}
  Subject: My subject
{{ else }}
  Subject: My other subject
{{ /if }}
---