Layouts

Overview

Recommendations in email require setting up the layout. Use the following information as an example.

Layout and Placement Requirements

The layout for recommendations in email has a few setup requirements:

When you create the placement, set the minimum Items to 1.

Enable the EchoProducts strategy, either for the email page type or by a strategy rule.

Sample Layout

This layout displays basic recommendations in an email message, and is a good starting point for your own design.

The header shows the strategy message:

Copy

<html>
<body style="margin: 0;">
<div style="background:#EAEAEA; font-family: Verdana,Arial !important; font-size:16px; font-weight: bold; margin:0; padding:0; width: 250px; text-align: center;">
$STRATEGY_MESSAGE$
</div>
</body>
</html>

This code displays details (an image and price) for each item:

Copy

<div style="font-family: Verdana, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0; width: 202px;">
  <table style="width: 100%;">
    <tr>
      <td valign="top" style="text-align: center;">
        <img src="$IMAGE$" style="width: 100px;" />
      </td>
    </tr>
    <tr>
      <td valign="top" style="text-align: center;">
        <p style="font-family: Verdana, Arial, sans-serif; font-weight: normal; line-height: 10px; margin: 1em 0; font-size: 10px; color: #9A0302;">$PRICE$</p>
      </td>
    </tr>
  </table>
</div>

Note: JavaScript is not supported in email or image generator.

The image renderer has a limited amount of time to generate the layout before the image is captured for the email recommendations. If you need to use JavaScript for handling logic such as how the prices should be displayed if a product is on sale, we encourage you to add that logic inline with the HTML to inject the desired values using document.write(). For example:

Copy

<div class="price">
<script type="text/javascript">
if (saveAmount !== "0.00") {
document.write('<p class="save_amount">Save £' + saveAmount + '</p><p class="was_price">Was £' + price + '</p><p class="now_price">£' + salePrice + '</p>');
} else {
document.write('<p class="full_price">£' + price + '</p>');
}
</script>
</div>

This is especially necessary if you are loading external fonts or images.