Welcome email
Craftingemails full preview and documentation v1.2 - 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
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 account invite
Customer account welcome
Customer account password reset
Customer Contact
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.
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 installInstall maizzle
npm install -g @maizzle/cliDevelopment
maizzle serveProduction
maizzle build shopify maizzle build transactionalConfiguration
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.