craftingemails
Download

Craftingemails full preview and documentation v1.0 - by Sherif Saleh

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

Transactional emails

12 transactional emails

Welcome email

Confirm email

Password reset email

Trial ends email

Client feedback email

Invitation email

Order receipt email

Promotion / Newsletter email

Pricing email

Product release email

Coupon email

Policy changes email

Shopify notification emails

22 Shopify notification email templates

Order confirmation

Order canceled

Order refund

Draft order invoice

Email cart from POS

Abandoned checkout

POS Exchange Receipt

Gift card created

Payment error

Fulfillment request

Shipping confirmation

Shipping update

Return label instructions

Shipment out for delivery

Shipment delivered

Customer accountinvite

Customer account welcome

Customer account password reset

Contact customer

#Templates

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. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!