Customize recommendations in templates
The Abandon Cart and New Account email templates allow you to include product recommendations with the emails you send.
You can configure the product recommendations information sent to your shoppers as follows:
- For the Abandon Cart email, you can provide product recommendations, set the number of recommendations, and set the strategy and restrictions for the recommendations.
- For the New Account email, you can provide product recommendations and set the number of products recommended.
See Display product recommendations for more information about these settings.
To customize product recommendations in an email template:
- Download the email template as described in Download and edit email templates.
- Edit the code sample provided below and add the block to the
html_body.ftlfile. It is recommended you add the code after the Call to Action block. - Upload the updated template as described in Download and edit email templates.
<!-- Show recommendations if present -->
<#if data.recommendations??>
<!-- Start of separator -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0"
id="backgroundTable" st-sortable="separator">
<tbody>
<tr>
<td>
<table width="600" align="center" cellspacing="0" cellpadding="0"
border="0" class="devicewidth">
<tbody>
<tr>
<td align="center" height="30" style="font-size:1px;
line-height:1px;"> </td>
</tr>
<tr>
<td width="550" align="center" height="1" bgcolor="#d1d1d1"
style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td align="center" height="30" style="font-size:1px;
line-height:1px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of separator -->
<!-- Start of Product Recommendations -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0"
id="backgroundTable">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center"
class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table width="600" cellpadding="0" cellspacing="0" border="0"
align="center" class="devicewidth">
<tr>
<tr>
<td><b>Some other products you may like ...</b></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<!-- col 1 -->
<table width="100%" align="left" border="0" cellpadding="0"
cellspacing="0" class="devicewidth">
<tbody>
<tr>
<td>
<!-- start of text content table -->
<table width="100%" align="center" border="0"
cellpadding="0" cellspacing="0"
class="devicewidthinner">
<tbody>
<!-- title2 -->
<tr>
<td width="30%" style="font-family: Helvetica, arial,
sans-serif; font-size: 18px; color: #FFFFFF;
text-align:left; line-height: 24px;
background: #1c73a3; padding:5px 10px 5px 10px;"
st-title="3col-title1">Product Name</td>
<td width="50%" style="font-family: Helvetica, arial,
sans-serif; font-size: 18px; color: #ffffff;
text-align:center; line-height: 24px;
background: #1c73a3; padding:5px 10px 5px 10px;
" st-title="3col-title1"> </td>
<td width="20%" style="font-family: Helvetica, arial,
sans-serif; font-size: 18px; color: #ffffff;
text-align:right; line-height: 24px;
background: #1c73a3; padding:5px 10px 5px 10px;
" st-title="3col-title1">Price</td>
</tr>
<!-- end of title2 -->
<!-- Spacing -->
<tr>
<td width="30%" height="15" style="font-size:1px;
line-height:1px; mso-line-height-rule: exactly;
"> </td>
<td width="50%" style="font-size:1px; line-height:1px;
mso-line-height-rule: exactly;"> </td>
<td width="20%" style="font-size:1px; line-height:1px;
mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<!-- content2 -->
<#list data.recommendations as product>
<tr>
<td width="30%" style="font-family: Helvetica, arial,
sans-serif; font-size: 14px; color: #687078;
text-align:left; line-height: 24px;
padding:5px 10px 5px 10px;
" st-content="3col-content1">
<div class="imgpop">
<img src="${product.imageLocation}" width="83"
height="111" alt="${product.title!}">
</div>
</td>
<td width="40%" style="font-family: Helvetica, arial,
sans-serif; font-size: 14px; color: #687078;
text-align:left; line-height: 24px;
padding:5px 10px 5px 10px;
" st-content="3col-content1">
<a href="${product.location}">
${product.title!}</a>
<td width="20%" style="font-family: Helvetica, arial,
sans-serif; font-size: 14px; color: #687078;
text-align:right; line-height: 24px;
padding:5px 10px 5px 10px;
" st-content="3col-content1">
<#if product.priceRange?? &&
product.priceRange="true">
<span>${product.priceMin!}
- ${product.priceMax!}</span>
<#elseif product.onSale?? && product.onSale="true">
<span style="text-decoration:
line-through">${product.listPrice!}</span>
<span style="color: red">
${product.salePrice!}</span>
<#else>
${product.listPrice!}
</#if>
</td>
</tr>
</#list>
<!-- end of content2 -->
</tbody>
</table>
<!-- end of text content table -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<!-- spacing -->
<!-- end of spacing -->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</#if>
<!-- end of Product Recommendations-->