This guide is for users who create their own HTML templates to use in Ometria and is written for email developers with knowledge of HTML.
The examples on this page show how you can add the following standard automation blocks to your email templates:
We don't recommend that you copy and paste these values directly into your existing template; these are intended as guides for adapting to your existing templates.
Note: Each block code is built to show product image + title + price. If any of these elements are not needed, delete them from the code.
Abandoned basket
<table om:block="abandoned basket - product image + title + price" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" class="mobile-sidepadding" style="margin: 0; padding: 0;">
<table align="center" border="0" cellspacing="0" cellpadding="0" class="wf" role="presentation" style="margin: 0 auto;" width="100%">
<tr>
<td align="center">
{% set max_products=3 %}
{% set cols=3 %}
{% set products = basket.products %}
{% for x in range(max_products) %}
{% if loop.index0 % cols == 0 %}
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wf product" role="presentation" style="margin: 0 auto;">
<tr style="text-align: center">
{% endif %}
{% if products[x] %}
<th align="center" class="wf wr pbot10" style="margin: 0; padding: 0; max-width: 200px; vertical-align: top;" width="33%">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<th align="center" style="margin: 0; padding: 0;">
<a href="{{products[x].url}}" target="_blank"><img alt="" border="0" class="wf" heigh="auto" src="{{products[x].image_url}}&size=384x384&mode=pad" style="display:block; margin:0 auto; max-width:192px; padding:0;" width="192" /></a>
</th>
</tr>
<tr>
<th align="center" class="hauto" height="80" style="margin: 0; padding: 0; vertical-align: top;">
<p style="text-align: center; margin-bottom: 2px;"> {{products[x].title}} </p>
<p style="text-align:center;"> {{products[x].line_total}} </p>
</th>
</tr>
</table>
</th>
{% endif %}
{% if loop.index % cols == 0 %}
</tr>
</table>
{% endif %}
{% endfor %}
</td>
</tr>
<tr>
<td om:editable="html" om:id="basket-3x1-cta" align="center" class="plr0" style="margin: 0; padding: 10px 10px 0 10px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center" role="button">
<tr>
<td align="center" class="button" style="background-color: #333333; mso-border-alt: 2px solid #333333;">
<a href="{% if basket.url %} {{basket.url}}{% else %}https://api.ometria.com/trk/click?acc={{email.account_hash}}{% endif %}" target="_blank" style="display: block; background-color: #333333; border: 2px solid #333333; mso-border-alt: 8px solid #333333; mso-padding-alt: 8px; padding: 16px; font-family: Arial, sans-serif; color: #ffffff; font-size: 14px; line-height: 16px; text-align: center; text-transform: uppercase; text-decoration: none;">Go to basket</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Abandoned browse
<table om:block="abandoned browse - product image + title + price" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" class="mobile-sidepadding" style="margin: 0; padding: 0;">
<table align="center" border="0" cellspacing="0" cellpadding="0" class="wf" role="presentation" style="margin: 0 auto;" width="100%">
<tr>
<td align="center">
{% set max_products=3 %}
{% set cols=3 %}
{% set products = visit.products %}
{% for x in range(max_products) %}
{% if loop.index0 % cols == 0 %}
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wf product" role="presentation" style="margin: 0 auto;">
<tr style="text-align: center">
{% endif %}
{% if products[x] %}
<th align="center" class="wf wr pbot10" style="margin: 0; padding: 0; max-width: 200px; vertical-align: top;" width="33%">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<th align="center" style="margin: 0; padding: 0;">
<a href="{{products[x].url}}" target="_blank"><img alt="" border="0" class="wf" heigh="auto" src="{{products[x].image_url}}&size=384x384&mode=pad" style="display:block; margin:0 auto; max-width:192px; padding:0;" width="192" /></a>
</th>
</tr>
<tr>
<th align="center" class="hauto" height="80" style="margin: 0; padding: 0; vertical-align: top;">
<p style="text-align: center; margin-bottom: 2px;"> {{products[x].title}} </p>
{% if products[x].original_price %}
<p style="text-align:center;"><strike>{{products[x].original_price}}</strike> </p>
<p style="text-align:center;">{{products[x].price}} </p>
{% else %}
<p style="text-align:center;">{{products[x].price}} </p>
{% endif %}
</th>
</tr>
</table>
</th>
{% endif %}
{% if loop.index % cols == 0 %}
</tr>
</table>
{% endif %}
{% endfor %}
</td>
</tr>
</table>
</td>
</tr>
</table>
Product previously purchased
<table om:block="previously ordered - product image + title + price" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" class="mobile-sidepadding" style="margin: 0; padding: 0;">
<table align="center" border="0" cellspacing="0" cellpadding="0" class="wf" role="presentation" style="margin: 0 auto;" width="100%">
<tr>
<td align="center">
{% set max_products=3 %}
{% set cols=3 %}
{% set products = order.products %}
{% for x in range(max_products) %}
{% if loop.index0 % cols == 0 %}
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wf product" role="presentation" style="margin: 0 auto;">
<tr style="text-align: center">
{% endif %}
{% if products[x] %}
<th align="center" class="wf wr pbot10" style="margin: 0; padding: 0; max-width: 200px; vertical-align: top;" width="33%">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<th align="center" style="margin: 0; padding: 0;">
<a href="{{products[x].url}}" target="_blank"><img alt="" border="0" class="wf" heigh="auto" src="{{products[x].image_url}}&size=384x384&mode=pad" style="display:block; margin:0 auto; max-width:192px; padding:0;" width="192" /></a>
</th>
</tr>
<tr>
<th align="center" class="hauto" height="80" style="margin: 0; padding: 0; vertical-align: top;">
<p style="text-align: center; margin-bottom: 2px;"> {{products[x].title}} </p>
{% if products[x].original_price %}
<p style="text-align:center;"><strike>{{products[x].original_price}}</strike> </p>
<p style="text-align:center;">{{products[x].price}} </p>
{% else %}
<p style="text-align:center;">{{products[x].price}} </p>
{% endif %}
</th>
</tr>
</table>
</th>
{% endif %}
{% if loop.index % cols == 0 %}
</tr>
</table>
{% endif %}
{% endfor %}
</td>
</tr>
</table>
</td>
</tr>
</table>
Product recommendation
<table om:block="recommended products - image + title + price" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" class="mobile-sidepadding" style="margin: 0; padding: 0;">
<table align="center" border="0" cellspacing="0" cellpadding="0" class="wf" role="presentation" style="margin: 0 auto;" width="100%">
<tr>
<td align="center">
{% set max_products=3 %}
{% set cols=3 %}
{% set products = recommended_products %}
{% for x in range(max_products) %}
{% if loop.index0 % cols == 0 %}
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wf product" role="presentation" style="margin: 0 auto;">
<tr style="text-align: center">
{% endif %}
{% if products[x] %}
<th align="center" class="wf wr" style="margin: 0; padding: 0; max-width: 200px; vertical-align: top;" width="33%">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<th align="center" style="margin: 0; padding: 0;">
<a href="{{products[x].url}}" target="_blank"><img alt="" border="0" class="wf" heigh="auto" src="{{products[x].image_url}}&size=384x384&mode=pad" style="display:block; margin:0 auto; max-width:192px; padding:0;" width="192" /></a>
</th>
</tr>
<tr>
<th align="center" class="hauto" height="80" style="margin: 0; padding: 0; vertical-align: top;">
<p style="text-align: center; margin-bottom: 2px;"> {{products[x].title}} </p>
{% if products[x].original_price %}
<p style="text-align:center;"><strike>{{products[x].original_price}}</strike> </p>
<p style="text-align:center;">{{products[x].price}} </p>
{% else %}
<p style="text-align:center;">{{products[x].price}} </p>
{% endif %}
</th>
</tr>
</table>
</th>
{% endif %}
{% if loop.index % cols == 0 %}
</tr>
</table>
{% endif %}
{% endfor %}
</td>
</tr>
</table>
</td>
</tr>
</table>
Price drop
<table om:block="Price drop block" cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation">
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="w95" align="center" role="presentation">
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<tr align="center">
<td align="center">
<a href="{{product.url}}" target="_blank" style="display:block;">
<img src="{{product.image_url|safe}}&size=500x500" class="w80" alt="{{product.title}}" border="0" width="300" height="auto" style="display:block; margin:0 auto; max-width:100%; padding:0;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th align="center" style="padding: 0 4px 0 4px;">
<p style="text-align: center; margin: 5px 0;"> {{product.title}} </p>
<p style="text-align:center;"><strike>{{product.price_drop_previous_price}}</strike> </p>
<p style="text-align:center;">{{ product.price_drop_new_price }}</p>
</th>
</tr>
<tr align="center">
<td om:editable="html" om:id="cta-price-drop" align="center" style="padding:15px 0">
<table class="wf btnwidth fl" role="presentation" border="0" cellpadding="0" cellspacing="0" height="25" align="center" bgcolor="#000001" style="border: solid 1px #000001; border-radius:1px; width:inherit;">
<tbody>
<tr>
<td align="center" style="font-size:14px;vertical-align:top;background:none;border-radius:0px;text-align:center;color:#ffffff; letter-spacing:0.5px" valign="top"><a href="{{product.url}}" target="_blank" style="display:inline-block;color:#ffffff ;background:none;border:solid 1px #000001 ;border-radius:0px;box-sizing:border-box;text-decoration:none;font-size:11px; letter-spacing:0.5px; margin:0;padding:5px 35px;border-color:#000001;" class="wf paddingbtn">CTA BUTTON</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Comments
0 comments
Please sign in to leave a comment.