Remarkety now includes a new drag-and-drop email editor which makes creating beautiful, responsive emails extremely easy. We've included a library of templates to get you started, but you may want to create a new Master Template for your specific brand.
- What are Master Templates?
- The anatomy of a Master Template
- Master Template checklist
- Block types
- Uploading a template
- Including order/cart information
- Product recommendations
- Best practices
What Are Master Templates?
So what's the different between a Master Template and a plain old template? Well, you're probably using Remarkety to create a large number of automated campaigns (and if you aren't, you should!). Ideally, they should all have the same look-and-feel, although they have different content. This is very similar to building a website template - each of the web pages includes different content and might have different element types (for example - sidebar, slider, etc), but all the pages inherit from a single "website theme". The Master Template is much like the website theme. The Master Template should include at least one variation of each type of content (or "block") that will potentially be used in an email or newsletter. Then, for each campaign, the user will be able to "mix and match" different elements from the Master Template, change the text and possibly replace images, and be sure that all her emails have a consistent look-and-feel. The rest of this article will refer to Master Templates as template, to keep it short.
The Anatomy of a Template
A template consists of:
- HTML, with either inline or embedded CSS
- Images
The HTML should include <head> and <body> elements. The CSS should be embedded within the <head> element, or - better yet - inlined in the HTML. The various content blocks are simply <table> elements nested directly under the body tag. The blocks are labeled by adding an attribute: st-sortable="<block name>":
....
<body>
<table st-sortable="preheader" width="100%" cellpadding="0" cellspacing="0" border="0" st-bgcolor="edit">
<tbody><tr><td>....</td></tr></tbody>
</table>
<table st-sortable="banner" width="100%" cellpadding="0" cellspacing="0" border="0" st-bgcolor="edit">
<tbody><tr><td>....</td></tr></tbody>
</table>
</body>
...Uploading the Template
To upload, you'll need to be on the "Content" tab of any Remarkety campaign. Click on "Change Template", and then the "Import" tab.
If the template is a single HTML file, it can be uploaded as-is. If it also contains images, it should be packaged within a ZIP file containing the single HTML file and the images. The image references in the HTML should be relative, so if the images are in a subfolder (such as /img), the images src attribute should be - for example -"img/<image.jpg>". For example, if this is the directory structure:
template.html images / img1.jpg images / img2.jpg
Then the images inside the template.html file will look like:
<img src="images/img1.jpg" title="image"/>
When uploading the template file, Remarkety will take care of hosting the template images on our CDN and resolving the references.
Master Template Checklist
When creating a Master Template, ensure that you observe the following guidelines:
- The template includes only st-sortable types from the Block Types specified below
- The following blocks are highly recommended - if you use them, you will be able to use Remarkety's advanced content personalization features.
- pre-header
- header
- banner
- text
- footer
- product-recommendations
- order-info
- coupon
- The full list of optional blocks can be found in the attached document (in bold are the must-have blocks)
- The <img> containing the store's logo should include an empty "st-logo" attribute:
<img src="logo.png" height="100" width="100" st-logo=""/>
- For compliance, the template must include an unsubscribe link and the store's business address. The text below may vary, of course, but be sure to keep the href:
<a href="{$unsubscribeUrl}" target="_blank">Click here</a> to unsubscribe - Emails can include product images that are taken directly from the website. These images may vary in size but we want to make sure the template still looks good, especially when images are shown next to each other - we would like them to be the same size. When creating an email template you would normally put the image inside a table cell - following is a trick to give the image a size of 167px, without setting a width and height which would "stretch" the image if it's not in those exact dimensions. The example links and URL's are variables populated in a product recommendations block:
<tr>
<td width="167" height="167" align="center" class="devicewidth">
<div>
<a href="{$r[0].productPageUrl}">
<img src="{$r[0].thumbnailUrl}"
style="max-width:167px; max-height:167px; display:block; border:none; outline:none; text-decoration:none;"
alt="Product image" border="0">
</a>
</div>
</td>
</tr>
Block Types
When setting the block names (ie the value of the st-sortable tag), please use one of the following:
- "preheader"
- "header"
- "footer"
- "text"
- "button"
- "image-left+text"
- "image-right+text"
- "image"
- "image+button"
- "image+text"
- "image+title"
- "image+title+button"
- "images-2-columns"
- "images-3-columns"
- "images+text-2-columns"
- "images+text-3-columns"
- "menu"
- "separator"
- "social-media"
- "text-2-columns"
- "text-3-columns"
- "text+button-2-columns"
- "text+button-3-columns"
- "text+button"
- "title"
- "title+button"
- "title+image"
- "title+text"
- "title+text+button"
Order / Cart Information
In many campaigns, you will want to include information about the products in the abandoned cart or in the previous order. When creating the template, we don't know how many items will be in the order/cart or what those items will be, so we need to use some custom code which will fill in the blanks for us.
The HTML will need to include code to loop over the order items, which are found inside the $order.items variable.
The following is an example of how the order information can be included in a block:
<table width="100%" bgcolor="#ffffff" st-bgcolor="edit" st-sortable="order-info" cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tr>
<td valign="top" align="center" style="border-collapse: collapse;mso-line-height-rule: exactly;">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth">
<tr>
<td valign="top" style="border-collapse: collapse;mso-line-height-rule: exactly;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" st-bgcolor="edit" class="devicewidth">
<tr>
<td valign="top" style="border-collapse: collapse;mso-line-height-rule: exactly;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse;mso-table-lspace: 0px;mso-table-rspace: 0px;">
<tr>
<td height="35" width="100%" style="font-size: 1px;line-height: 1px;border-collapse: collapse;mso-line-height-rule: exactly;">
</td>
</tr>
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 24px; color: #333333; line-height: 30px;"
st-title="order-info-title">
Order items
</td>
</tr>
<tr>
<td height="18" width="100%" style="font-size: 1px;line-height: 1px;border-collapse: collapse;mso-line-height-rule: exactly;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td st-title="title-name" style="font-family: Helvetica, arial, sans-serif; font-size: 16px; color: #333333; line-height: 24px;">Name</td>
<td class="removeMobile" st-title="title-sku" style="font-family: Helvetica, arial, sans-serif; font-size: 16px; color: #333333; line-height: 24px;">SKU</td>
<td align="center" st-title="title-quantity" style="font-family: Helvetica, arial, sans-serif; font-size: 16px; color: #333333; line-height: 24px;">Qty</td>
<td align="right" st-title="title-price" style="font-family: Helvetica, arial, sans-serif; font-size: 16px; color: #333333; line-height: 24px;">Price</td>
</tr>
<tr>
<td></td>
<td colspan="4" height="10" width="100%" style="font-size: 1px;line-height: 1px;border-collapse: collapse;mso-line-height-rule: exactly;">
<hr style="border: none;height: 1px;color: #A5A5B2;background-color: #A5A5B2;">
</td>
</tr>
<!-- {foreach from=$order.items item=lineitem}-->
<tr>
<td valign="top" align="center">
<a href="{$lineitem.product.productPageUrl}" target="_blank" style="text-decoration:none;">
<img class="prod_img" src="{$lineitem.product.thumbnailUrl}" width="100" alt="Product image" style="padding-right:10px;max-width:130px; display: block;border: 0 !important;outline: none !important;" border="0">
</a>
</td>
<td valign="top" align="left" style="max-width:110px; font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #666666; line-height: 22px;"
st-title="{$lineitem.product.title}">
<a href="{$lineitem.product.productPageUrl}" target="_blank" style="text-decoration:none;">
{$lineitem.product.title}
</a>
</td>
<td class="removeMobile" valign="top" align="left" style="max-width:110px; font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #666666; line-height: 22px;"
st-title="sku">
{$lineitem.product.sku}
</td>
<td valign="top" align="center" style="max-width:110px; font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #666666; line-height: 22px;"
st-title="quantity">
{$lineitem.quantity}
</td>
<td valign="top" align="right" style="max-width:110px; font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #666666; line-height: 22px;"
st-title="price">
{$lineitem.price}
</td>
</tr>
<tr>
<td></td>
<td colspan="4" height="10" width="100%" style="font-size: 1px;line-height: 1px;border-collapse: collapse;mso-line-height-rule: exactly;">
<hr style="border:none;border-top:1px dotted #A5A5B2;color:#A5A5B2;background-color:#fff;height:1px;">
</td>
</tr>
<!-- {/foreach} -->
</table>
</td>
</tr>
<tr>
<td height="15" width="100%" style="font-size: 1px;line-height: 1px;border-collapse: collapse;mso-line-height-rule: exactly;"></td>
</tr>
<tr>
<td>
<table class="" width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td valign="top" align="center">
<table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;mso-table-lspace: 0px;mso-table-rspace: 0px;" align="right" class="em_wrapper">
<tr>
<td valign="top" align="right" style="font-family: Helvetica, arial, sans-serif; font-size: 16px; color: #666666; line-height: 22px;" st-content="textbox-totals-content">
<div>
Shipping: {$order.shipping}<br>
Discount: {$order.discount}<br>
Total amount of order: {$order.total}
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" width="100%" style="font-size: 1px;line-height: 1px;border-collapse: collapse;mso-line-height-rule: exactly;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Product Recommendations
Another block which is often used is product-recommendations. This block is used to showcase personalized product recommendations from the website.
When rendering the email, Remarkety will populate a variable called $r[], which will contain all the information you need in order to include the recommendations. In the template, $r[0] will reference the first recommendation, $r[1] the second, and so on.
Here is a code example for creating a custom product recommendations content block:
<table width="100%" bgcolor="#ffffff" st-bgcolor="edit" st-sortable="product-recommendations" cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tr>
<td>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth">
<tr>
<td width="100%">
<table width="600" border="0" cellspacing="0" st-bgcolor="edit" bgcolor="#FFFFFF" cellpadding="0" align="center" class="devicewidth">
<tbody>
<tr>
<td valign="top" style="border-collapse: collapse;mso-line-height-rule: exactly;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse;mso-table-lspace: 0px;mso-table-rspace: 0px;">
<tr>
<td height="30" class="em_height" width="100%" style="border-collapse: collapse;mso-line-height-rule: exactly;">
</td>
</tr>
<tr>
<td st-title="recommendations-title" style="font-family: Helvetica, arial, sans-serif; font-size: 30px; color: #333333; text-align:center; line-height: 30px;">
Recommended for you
</td>
</tr>
<tr>
<td height="25" width="100%" style=""></td>
</tr>
<tr>
<td>
<table width="186" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<tr>
<td width="167" height="167" align="center" class="devicewidth">
<div>
<a href="{$r[0].productPageUrl}"><img width="167" src="{$r[0].thumbnailUrl}"
alt="Product image" border="0"
style="max-width:167px; max-height:167px; display:block; border:none; outline:none; text-decoration:none;"></a>
</div>
</td>
</tr>
<tr>
<td>
<table width="186" align="center" border="0" cellpadding="0"
cellspacing="0" class="devicewidthinner">
<tbody>
<tr>
<td width="100%" height="15"
style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #666666; text-align:center; line-height: 24px;"
st-title="r0.title">
{$r[0].title}
</td>
</tr>
<tr>
<td width="100%" height="15"
style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #889098; text-align:center; line-height: 24px;"
st-title="r0.price">
{$r[0].price}
</td>
</tr>
<tr>
<td width="100%" height="15"
style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #0a8cd8; text-align:center; line-height: 20px;"
st-title="r0.url">
<a href="{$r[0].productPageUrl}" style="text-decoration:none; color: #0a8cd8; ">
See product
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table width="20" align="left" border="0" cellpadding="0" cellspacing="0" class="removeMobile">
<tbody>
<tr>
<td width="100%" height="15"
style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
</tbody>
</table>
<table width="186" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<tr>
<td width="167" height="167" align="center" class="devicewidth">
<div>
<a href="{$r[1].productPageUrl}"><img width="167" src="{$r[1].thumbnailUrl}"
alt="Product image" border="0"
style="max-width:167px;max-height:167px;display:block; border:none; outline:none; text-decoration:none;"></a>
</div>
</td>
</tr>
<tr>
<td>
<table width="186" align="center" border="0" cellpadding="0"
cellspacing="0" class="devicewidthinner">
<tbody>
<tr>
<td width="100%" height="15"
style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #666666; text-align:center; line-height: 24px;"
st-title="r1.title">
{$r[1].title}
</td>
</tr>
<tr>
<td width="100%" height="15"
style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #889098; text-align:center; line-height: 24px;"
st-title="r1.price">
{$r[1].price}
</td>
</tr>
<tr>
<td width="100%" height="15"
style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #0a8cd8; text-align:center; line-height: 20px;"
st-title="r1.url">
<a href="{$r[1].productPageUrl}" style="text-decoration:none; color: #0a8cd8; ">
See product
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table width="1" align="left" border="0" cellpadding="0" cellspacing="0" class="removeMobile">
<tbody>
<tr>
<td width="100%" height="15"
style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
</tbody>
</table>
<table width="186" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<tr>
<td width="167" height="167" align="center" class="devicewidth">
<div>
<a href="{$r[2].productPageUrl}"><img width="167" src="{$r[2].thumbnailUrl}"
alt="Product image" border="0"
style="max-width:167px;max-height:167px;display:block; border:none; outline:none; text-decoration:none;"></a>
</div>
</td>
</tr>
<tr>
<td>
<table width="186" align="center" border="0" cellpadding="0"
cellspacing="0" class="devicewidthinner">
<tbody>
<tr>
<td width="100%" height="15"
style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #666666; text-align:center; line-height: 24px;"
st-title="r2.title">
{$r[2].title}
</td>
</tr>
<tr>
<td width="100%" height="15"
style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #889098; text-align:center; line-height: 24px;"
st-title="r2.price">
{$r[2].price}
</td>
</tr>
<tr>
<td width="100%" height="15"
style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #0a8cce; text-align:center; line-height: 20px;"
st-title="r2.url">
<a href="{$r[2].productPageUrl}" style="text-decoration:none; color: #0a8cce; ">
See product
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="20" class="em_height" width="100%" style="border-collapse: collapse;mso-line-height-rule: exactly;"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Designing your template
When designing your template take into account your brand's styleguide - colors, images, style. You can decide on the shape and colors of your buttons, image sizes and locations, borders, backgrounds, menu layout and so much more.
Attached to this article you can find a few examples of template design which will help you understand the layout each block could have.
Best practices
- Avoid using <p> at all. Use <br /> instead for new lines. if needed, wrap text blocks with <div> for styling.
- All blocks should have the same top and bottom padding/margin.
If more spacing is require between the blocks, use a blank separator block. - All master templates should have the same possible blocks, in order to avoid missing blocks in various campaign types.
Questions? Contact us at support@remarkey.com
Comments
0 comments