Full Preview

Discover 12 transactional emails and 20 Shopify notification emails ready to be shipped with your digital products.

Transactional emails

12 transactional emails

Welcome email

welcome email
welcome email

Confirm email

confirm email email
confirm email email

Password rest email

reset email
reset email

Trial ends email

trial-ends email
trial-ends email

Client feedback email

feedback email
feedback email

Invitation email

invitation email
invitation email

Order receipt email

receipt email
receipt email

Promotion / Newsletter email

promo email
promo email

Pricing email

pricing email
pricing email

Product release email

release email
release email

Coupon email

coupon email
coupon email

Policy changes email

policy email
policy email

Shopify notification emails

20 Shopify notification email templates

Customer Account Invite

Customer Account Invite email
Customer Account Invite email

Customer Account Welcome

Customer Account Welcome
Customer Account Welcome

Customer Account Password Reset

Customer Account Password Reset
Customer Account Password Reset

Customer Contact

Customer Contact
Customer Contact

Order Confirmation

Order Confirmation
Order Confirmation

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

Shipment out for delivery

Shipment out for delivery
Shipment out for delivery

Shipment delivered

Shipment delivered
Shipment delivered

Return label instructions

Return label instructions
Return label instructions

New order

New order
New order

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 Air
  • iPhone X
  • iPhone 6+ Gmail
  • iPhone 7 Outlook
  • Pixel Gmail
  • Samsung Mail

Desktop email client


  • Apple Mail 11
  • Outlook 2003
  • Outlook 2007
  • Outlook 2013
  • Outlook 2013 (120 dpi)
  • Outlook 2016
  • Outlook 2016 (120 dpi)
  • Outlook 2019
  • Outlook 2019 (120 dpi)
  • Thunderbird

Web email client


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

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 web-safe fonts like Arial as our primary font to maintain consistency across devices, with a serif font as fallback.

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

Easy to use framework

We build with Maizzle a framework for HTML email development. It's powered by Tailwind CSS and an email-tailored, custom Node.js build system that enables various transformations necessary for HTML emails.

Into the directory install dependencies

npm install

Install maizzle

npm install -g @maizzle/cli

Development

maizzle serve

Production

maizzle build shopify maizzle build transactional

Configuration

Use the tailwind.config file to define your custom CSS styles.

Got a question we didn’t answer?

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