Contributors:
Email Templates
Email Templates provide a top-level wrapper for one or more of your system email’s contents, allowing for consistent branding and styling across emails sent via the CMS (such as Workflows, Autoresponders, reminders, follow-ups, abandon cart emails, etc.).
Found under ‘Email Notifications’ > ‘Email Templates’, you can create any number of templates. You could duplicate the “System Template” as a starting point, using the ‘Duplicate’ action, or start from scratch with your own code.
Once you’ve created your email template/s you’ll be able to apply them to the system emails throughout the admin when configuring those email settings and body content.
Typically, an email template would set up the HTML document, with <head> section, styles and a framework for the email body, such as a branded header - with company logo - and a footer section - with company sign-off/signature.
Example Code for a basic HTML Email Template
In the below code, we set up the HTML document, assign some meta tags, embedded styles and a table structure for the header, footer and body container.
In the body container we have the required Liquid tag {{this.emailContent}} which is were the email body content will be dynamically inserted, based on the type of email being sent (ie: Workflow Notification, Follow-up Email, Autoresponder, etc.)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
a {
outline: none;
color: #0091ea;
text-decoration: underline;
}
a:hover {
text-decoration: none !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
a[href^="tel"]:hover {
text-decoration: none !important;
}
a img {
border: none;
}
b,
strong {
font-weight: 700;
}
p {
margin: 0;
}
th {
padding: 0;
}
table td {
mso-line-height-rule: exactly;
}
@media only screen and (max-width:375px) and (min-width:374px) {
.gmail-fix {
min-width: 374px !important;
}
}
@media only screen and (max-width:414px) and (min-width:413px) {
.gmail-fix {
min-width: 413px !important;
}
}
@media only screen and (max-width:500px) {
.w-100p {
width: 100% !important;
}
.plr-7 {
padding-left: 7px !important;
padding-right: 7px !important;
}
.plr-15 {
padding-left: 15px !important;
padding-right: 15px !important;
}
.ptb-15 {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.ptb-20 {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pb-25 {
padding-bottom: 25px !important;
}
}
</style>
</head>
<body style="background:#f1f1f1; margin:0; padding:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
<table class="gmail-fix" width="100%" style="background:#f1f1f1; min-width:320px;" cellspacing="0" cellpadding="0">
<tr>
<td class="plr-7 ptb-15" style="padding:56px 0;">
<table class="w-100p" width="600" align="center" style="max-width:600px; margin:0 auto;" cellpadding="0"
cellspacing="0">
<tr>
<td class="plr-15 ptb-20" style="background:#fff; padding:45px 30px 50px; text-align:center;">
<img src="https://www.yourwebsite.com/images/email-logo.png" alt="Company Name">
</td>
</tr>
<tr>
<td class="plr-15 ptb-20" style="background:#fff; padding:45px 30px 50px;">
{{this.emailContent}}
</td>
</tr>
<tr>
<td class="pb-0" style="padding:21px 0; font:12px/18px Tahoma, Arial, sans-serif; color:#999;">
Copyright © {{ "now" | date: "%Y" }} All rights reserved.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>