Examples


The following examples show how you can add abandoned browse, abandoned cart, and product recommendations for automation to your email templates as well as the minimum viable template for broadcast.


It is not advised to copy and paste these values directly into your existing template, but rather to uses these as guides in adapting your existing templates.


Abandoned Browse

{% set max_products=6 %}
{% set cols=3 %}
{% set products = visit.products %}
{% for x in range(max_products) %}
  {% if loop.index0 is divisibleby(cols) %}
      <table class="row collapse" style="display: table; padding: 0; position: relative; width: 100%"><tbody><tr>
  {% endif %}
  {% if products[0] %}
      <th class="small-12 large-4 columns first last" style="font-weight: normal; margin: 0 auto; padding-bottom: 16px; padding-left: 10px; padding-right: 10px; text-align: center; width: 208px"><table style="width: 100%"><tr><th style="font-weight: normal; text-align: center">
          <center style="min-width: 152px; width: 100%">
              <a href="{{products[x].url}}" target="_blank" align="center" class="float-center" style="color: #333333; text-decoration: none">
                  <img class="small-float-center float-center" src="{{products[x].image_url}}&size=300x300&mode=pad" width="150" height="150" style="border: none; clear: both; display: block; float: none; margin: 0 auto; max-height: 150px; max-width: 150px; outline: none; text-align: center; text-decoration: none; width: auto">
              </a>
              <table align="center" class="spacer float-center" style="float: none; margin: 0 auto; text-align: center; width: 100%"><tbody><tr><td height="10px" style="font-size:10px;line-height:10px">&#xA0;</td></tr></tbody></table> 
              <p class="text-center float-center" style="-moz-hyphens: none; -webkit-hyphens: none; hyphens: none; margin: 0 0 10px; min-height: 3em; text-align: center; width: 90%" align="center">
                  <a href="{{products[x].url}}" target="_blank" style="color: #333333; text-decoration: none">{{products[x].title}}</a>
              </p>
              <p class="text-center float-center" style="-moz-hyphens: none; -webkit-hyphens: none; hyphens: none; margin: 0 0 10px; text-align: center; width: 100%" align="center">{{products[x].price}}</p>
          </center>
      </th></tr></table></th>
  {% endif %}
  {% if loop.index is divisibleby(cols) %}
      </tr></tbody></table>
  {% endif %}
{% endfor %}


Abandoned Cart

{% set max_products=6 %}
{% set cols=3 %}
{% set products = basket.products %}
{% for x in range(max_products) %}
  {% if loop.index0 is divisibleby(cols) %}
      <table class="row collapse" style="display: table; padding: 0; position: relative; width: 100%"><tbody><tr>
  {% endif %}
  {% if products[x] %}
      <th class="small-12 large-4 columns first last" style="font-weight: normal; margin: 0 auto; padding-bottom: 16px; padding-left: 10px; padding-right: 10px; text-align: center; width: 208px"><table style="width: 100%"><tr><th style="font-weight: normal; text-align: center">
          <center style="min-width: 152px; width: 100%">
              <a href="{{products[x].url}}" target="_blank" align="center" class="float-center" style="color: #333333; text-decoration: none">
                  <img class="small-float-center float-center" src="{{products[x].image_url}}&size=300x300&mode=pad" width="150" height="150" style="border: none; clear: both; display: block; float: none; margin: 0 auto; max-height: 150px; max-width: 150px; outline: none; text-align: center; text-decoration: none; width: auto">
              </a>
              <table align="center" class="spacer float-center" style="float: none; margin: 0 auto; text-align: center; width: 100%"><tbody><tr><td height="10px" style="font-size:10px;line-height:10px">&#xA0;</td></tr></tbody></table> 
              <p class="text-center float-center" style="-moz-hyphens: none; -webkit-hyphens: none; hyphens: none; margin: 0 0 10px; min-height: 3em; text-align: center; width: 90%" align="center">
                  <a href="{{products[x].url}}" target="_blank" style="color: #333333; text-decoration: none">{{products[x].title}}</a>
              </p>
              <p class="text-center float-center" style="-moz-hyphens: none; -webkit-hyphens: none; hyphens: none; margin: 0 0 10px; text-align: center; width: 100%" align="center">{{products[x].price}}</p>
          </center>
      </th></tr></table></th>
  {% endif %}
  {% if loop.index is divisibleby(cols) %}
      </tr></tbody></table>
  {% endif %}
{% endfor %}


Product Recommendations for Automation

{% set max_products=6 %}
{% set cols=3 %}
{% set products = recommended_products %}
{% for x in range(max_products) %}
  {% if loop.index0 is divisibleby(cols) %}
      <table class="row collapse" style="display: table; padding: 0; position: relative; width: 100%"><tbody><tr>
  {% endif %}
  {% if products[x] %}
      <th class="small-12 large-4 columns first last" style="font-weight: normal; margin: 0 auto; padding-bottom: 16px; padding-left: 10px; padding-right: 10px; text-align: center; width: 208px"><table style="width: 100%"><tr><th style="font-weight: normal; text-align: center">
          <center style="min-width: 152px; width: 100%">
              <a href="{{products[x].url}}" target="_blank" align="center" class="float-center" style="color: #333333; text-decoration: none">
                  <img class="small-float-center float-center" src="{{products[x].image_url}}&size=300x300&mode=pad" width="150" height="150" style="border: none; clear: both; display: block; float: none; margin: 0 auto; max-height: 150px; max-width: 150px; outline: none; text-align: center; text-decoration: none; width: auto">
              </a>
              <table align="center" class="spacer float-center" style="float: none; margin: 0 auto; text-align: center; width: 100%"><tbody><tr><td height="10px" style="font-size:10px;line-height:10px">&#xA0;</td></tr></tbody></table> 
              <p class="text-center float-center" style="-moz-hyphens: none; -webkit-hyphens: none; hyphens: none; margin: 0 0 10px; min-height: 3em; text-align: center; width: 90%" align="center">
                  <a href="{{products[x].url}}" target="_blank" style="color: #333333; text-decoration: none">{{products[x].title}}</a>
              </p>
              <p class="text-center float-center" style="-moz-hyphens: none; -webkit-hyphens: none; hyphens: none; margin: 0 0 10px; text-align: center; width: 100%" align="center">{{products[x].price}}</p>
          </center>
      </th></tr></table></th>
  {% endif %}
  {% if loop.index is divisibleby(cols) %}
      </tr></tbody></table>
  {% endif %}
{% endfor %}


Minimum Viable Template for Broadcast

<!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">
    <head>
        <meta charset="utf-8"> <!-- utf-8 works for most cases -->
        <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
        <meta data-fr-http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
        <title>{{ email.subject }}</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
    </head>
    <body>
        <div id="header">
            <img src="http://www.example.com/logo.jpg" om:editable om:id="1" />
            <span om:editable om:id="2">Strapline</span>
        </div>

        <div om:blocks></div>

        <div om:block="block type 1">
            <h1 om:editable  om:id="3">Hello there</h1>
            <p om:editable="html" om:id="4">Some editable <i>HTML</i> content</p>
        </div>

        <div om:block="Product block">
            {% if products %}
                <h3>Lovely products</h3>
                <ul>
                {% for product in products%}
                    <a href="{{ product.url }}"><img src="{{ product.image_url }}" /></a><br />
                    <a href="{{ product.url }}">{{ product.title }}</a>
                    {{ product.price }}
                {% endfor %}
                </ul>
            {% else %}
                <h3>Sorry no products</h3>
            {% endif %}
        </div>
    </body>
</html>