eCommerce email templates documentation

Ready-to-use, easily-customizable Transactional, E-commerce, and Shopify-integrated email templates.

There are two ways to get started:

  1. Use the compiled files
  2. Use the Maizzle project

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:

maizzle serve

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).

maizzle build shopify maizzle build transactional maizzle build ecommerce

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.

Transactional emails

12 transactional emails

Welcome email

Welcome email
Welcome email

Confirm email

Confirm email
Confirm email

Password reset email

Password reset email
Password reset email

Trial ends email

Trial ends email
Trial ends email

Client feedback email

Client feedback email
Client feedback email

Invitation email

Invitation email
Invitation email

Order receipt email

Order receipt email
Order receipt email

Promotion / Newsletter email

Promotion / Newsletter email
Promotion / Newsletter email

Pricing email

Pricing email
Pricing email

Product release email

Product release email
Product release email

Coupon email

Coupon email
Coupon email

Policy changes email

Policy changes email
Policy changes email

Shopify notification emails

30 Shopify notification email templates

Order confirmation

Order confirmation
Order confirmation

Order edited

Order edited
Order edited

Order edited invoice

Order edited invoice
Order edited invoice

Order canceled

Order canceled
Order canceled

Order refund

Order refund
Order refund

Draft order invoice

Draft order invoice
Draft order invoice

Email cart from POS

Email cart from POS
Email cart from POS

Abandoned checkout

Abandoned checkout
Abandoned checkout

POS Exchange Receipt

POS Exchange Receipt
POS Exchange Receipt

Gift card created

Gift card created
Gift card created

Payment error

Payment error
Payment error

Fulfillment request

Fulfillment request
Fulfillment request

Shipping confirmation

Shipping confirmation
Shipping confirmation

Shipping update

Shipping update
Shipping update

Out for delivery

Out for delivery
Out for delivery

Delivered

Delivered
Delivered

Return label instructions

Return label instructions
Return label instructions

Out for local delivery

Out for local delivery
Out for local delivery

Local delivered

Local delivered
Local delivered

Missed delivery

Missed delivery
Missed delivery

Ready for pickup

Ready for pickup
Ready for pickup

Picked up

Picked up
Picked up

Customer account invite

Customer account invite
Customer account invite

Customer account welcome

Customer account welcome
Customer account welcome

Customer account password reset

Customer account password reset
Customer account password reset

Contact customer

Contact customer
Contact customer

Confirmation email

Confirmation email
Confirmation email

UI Colors

Convey meaning through color. Get access to all colors in the Material Design spec from the start.

UI

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Gray

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Brand

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Blue

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Green

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Orange

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Red

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Typography

We use system fonts with a fall back to sans-serif like Arial.

Font Family

Aa

Arial Bold

Aa

Arial Regular

Font Sizing

Modular scale using perfect fourth base 16px × 1.333

Text size 3xl – 50px
Text size 2xl - 38px
Text size xl - 28px
Text size lg - 21px
Text size base - 16px
Text size sm - 12px
Text size xs - 9px

Leading

12
 
16
 
22
 
28
 
42
 
56
 

Text Colors

Dark

#4F5A68

Primary text used for Headers and Body copy with high emphasis

Dark 02

#8492A6

Secondary text used for Body copy

Bright

#FFFFFF

Primary text used for Headers and Body copy on dark backgrounds

Bright 02

Opacity 60%

Secondary text used for Body copy on dark backgrounds

Interactive Text Colors

Brand

#0052E2

Interactive color and Primary Brand color, used for CTA and Links

Support Text Colors

Blue

#1391CF

Support color used for Information and giving hints

Green

#13CE66

Support color used as indicator for Success and confirmation status.

Orange

#FF9418

Support color used for Warning

Red

#CE131E

Support color used for Errors and Danger Actions

Grid system

Breakpoint: sm: {'max': '640px'}

Desktop grid

560px – 8 columns with 16px gutter

 
 
 
 
 
 
 
 

Mobile grid

320px – 4 columns with 16px gutter

 
 
 
 

Spacing

Vertical rhythm

Multiple of 8px, except 4px, 12px

4
 
8
 
12
 
16
 
24
 
32
 
40
 
48
 
56
 

Buttons

We use a call-to-action as an inline-block button and full-width block for mobile screens.

Rounded corners

Border radius

Default 4px, sm 2px or full

 
 
 

Badges

Convey meaning through each badge color, such as warning or success states.

Label Label Label Label Label

Email compatibility

All emails are designed for and tested on numerous email clients and devices. Here's the rundown on what type of compatibility to expect.

Mobile Devices


  • iPad
  • iPhone
  • Outlook iOS
  • Gmail iOS
  • Gmail Android
  • Samsung Mail

Desktop clients


  • Apple Mail
  • Outlook 2013
  • Outlook 2016
  • Outlook 2019
  • Thunderbird
All Outlooks are tested in 120 DPI, too.

Webmail


  • Gmail
  • Office 365
  • Outlook.com
  • Yahoo!
  • AOL

Got a question we didn’t answer?

Contact us at hello@craftingemails.com and we’ll get back to you straight away.