Overview

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>