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>
Related Articles
- Email Marketing
Email Campaigns - Email Marketing
Mailing Lists
Mailing List management is where you’re able to set up and connect an email marketing list and view/manage your subscribers. - Email Marketing
API Provider
Configuring an email marketing API Provider allows for the connection of a supported email marketing service (currently Mailchimp).
External Resources
There are currently no external resources available.
Please let us know if you have any other contributions or know of any helpful resources you'd like to see added here.
Questions?
We are always happy to help with any questions you may have.
Visit the Treepl Forum for community support and to search previously asked questions or send us a message at support@treepl.co and we will consult you as soon as possible.