eCommerce email templates documentation

Compiled files

The quickest way to get started is with templates from the dist folder.

Templates inside this folder are ready to use, so you can simply copy/paste the HTML code into your ESP. Of course, you may edit the text and image paths for any of these templates, in your favorite code editor.

Maizzle project

If you'd like to use Maizzle and Tailwind CSS to further customize the emails, you'll need to follow some extra steps.

1. First, make sure you have Node.js installed - this will also install NPM, which offers commands that we'll need, like npm install.

   Once you have Node.js and NPM installed, open a Terminal and run this command:

   npm install -g @maizzle/cli

   This installs the Maizzle CLI tool, which lets you run commands like maizzle serve for local development, or maizzle build shopify for building production-ready Shopify emails.

2. Next, make sure that you're inside the project directory.

   For example, if you bought the Full Package, the project directory is transactional-full-package:

   # cd into the project directory

   cd transactional-full-package

   You'll know you're in the right folder if you run the ls command next, and see the package.json file name listed in the output, among others.

3. Inside this directory, run the following command to install Maizzle's dependencies:

   npm install

Once it finishes, you're ready to use Maizzle to customize and build the emails.

Build commands

For local development, with live browser preview:

Production

The following commands will build production-ready emails, as defined in their corresponding config.[environment].js file (read more about config environments in Maizzle).

Tailwind CSS

The Maizzle project comes with a custom tailwind.config.js that defines utility classes based on the design system. This file also configures Tailwind for better email client support - read more about Maizzle's Tailwind CSS config.

Shopify Notifications

The Shopify Package and Full Package include 30 notification templates for Shopify. Shopify allows customizing your notification emails in Settings → Notifications. The files we provide are named exactly after the notifications you see in your Notification settings in Shopify - for example:

- shopify/
    |-- abandoned-checkout.html
    |-- confirmation-email.html
    |-- customer-account-invite.html
    |-- ...

Upload to Shopify

In Shopify, you can click a Notification's name to edit its source code. For example, click to edit "Order confirmation". You'll be presented with a form that allows editing the:

• Email subject
• Email body (HTML)

1. Now, back to our product, open dist/shopify/order-confirmation.html in your favorite code editor.
2. Select all and copy the code to clipboard.
3. Go back to your Shopify admin, and paste it in the "Email body (HTML)" textarea, replacing the existing code.
4. Hit "Save" at the bottom of the screen, and you're done.
5. You can now Preview the email (opens a modal/pop up), or send yourself a test email (which compiles Liquid {{ }} tags and replaces them with dummy data).

Customizing Shopify Notifications

With the Shopify notifications, you can add your brand logo/color. You can also easily edit the default text.

Logo

The logo width should be defined here, otherwise email clients will show your logo at full width, which may look unexpected.

For example, we used a placeholder logo @2x resolution, so we set the width in Shopify to half the real image width.

• Real image width: 238px
• Width set in Shopify: 119

Note: don't add px in Shopify.

Accent Color

Shopify also allows defining a brand/accent color, and you'll need to set it in order for the templates to work as expected.

Editing Shopify Text

All Shopify Notifications include text like greetings, body copy or button labels right at the top of the code, so you can easily customize them.

These texts are encapsulated in {% capture %} tags, which is basically a way of defining variables in the Liquid templating language that Shopify uses.

Escaping Liquid Syntax

Since Liquid uses the same {{ }} syntax as Maizzle, if you're using the Maizzle project you need to make sure that you always eascape these curly braces if they are meant for Liquid variables.

You can do that:

• Laravel Blade-style, by adding @ in front: @{{ }}
• with a <raw> in front: (docs)

Note: {% %} doesn't need escaping, since it doesn't conflict with Maizzle.