Welcome email


Ready-to-use, easily-customizable Transactional, E-commerce, and Shopify-integrated email templates.
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.
If you'd like to use Maizzle and Tailwind CSS to further customize the emails, you'll need to follow some extra steps.
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.
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 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.
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.
For local development, with live browser preview:
maizzle serve
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
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.
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
|-- ...
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:
dist/shopify/order-confirmation.html
in your favorite code editor.{{ }}
tags and replaces them with dummy data).With the Shopify notifications, you can add your brand logo/color. You can also easily edit the default text.
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.
238px
119
Note: don't add px
in Shopify.
Shopify also allows defining a brand/accent color, and you'll need to set it in order for the templates to work as expected.
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.
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:
@
in front: @{{ }}
<raw>
in front: (docs)Note: {% %}
doesn't need escaping, since it doesn't conflict with Maizzle.
12 transactional emails
30 Shopify and plain html notification email templates
Convey meaning through color. Get access to all colors in the Material Design spec from the start.
We use system fonts with a fall back to sans-serif like Arial.
Arial Bold
Arial Regular
Modular scale using perfect fourth base 16px × 1.333
#4F5A68
Primary text used for Headers and Body copy with high emphasis
#8492A6
Secondary text used for Body copy
#FFFFFF
Primary text used for Headers and Body copy on dark backgrounds
Opacity 60%
Secondary text used for Body copy on dark backgrounds
#0052E2
Interactive color and Primary Brand color, used for CTA and Links
#1391CF
Support color used for Information and giving hints
#13CE66
Support color used as indicator for Success and confirmation status.
#FF9418
Support color used for Warning
#CE131E
Support color used for Errors and Danger Actions
Breakpoint: sm: {'max': '640px'}
560px – 8 columns with 16px gutter
320px – 4 columns with 16px gutter
Multiple of 8px, except 4px, 12px
We use a call-to-action as an inline-block button and full-width block for mobile screens.
Default 4px, sm 2px or full
Convey meaning through each badge color, such as warning or success states.
All emails are designed for and tested on numerous email clients and devices. Here's the rundown on what type of compatibility to expect.
Contact us at hello@craftingemails.com and we’ll get back to you straight away.