Product selector – Ometria Help Centre

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.

See also: Product selector block

The product selector lets you search for products to display in the email and link to the right product page on your site.

Note: Products you include and their details (e.g. price, images etc.) render at the point the template is edited, and do not update at the time of send or opening. If you add a product block to a template and then make changes (such as a price drop) the block in the template won't update.

This guide is for the HTML version - there is also a product selector block available in the visual editor.

Guide

The product selector must be instantiated before it can be used.

To do this, assign the HTML tag om:editable to the containing HTML element with the value "products" along with an om:id attribute.

Individual products can be referenced either inside the HTML element which contains om:editable="products" or by referencing their position in the products list.

An example of referencing the product with its list position:

<div om:editable="products" om:id="1"> 
  <a href="{{products[0].url}}" target="_blank"> 
   <img src="{{products[0].image_url}}"> 
    <p>
     {{products[0].title}}"
   </p> 
  </a> 
</div>

An example of referencing the product with a for loop:

<div om:editable="products" om:id="2"> 
 {% for product in products %} 
  <a href="{{product.url}}" target="_blank"> 
   <img src="{{product.image_url}}"> 
   <p>
    {{product.title}}"
    </p> 
  </a> 
   {% endfor %} 
</div>

products[0] is an object containing data on the first product that has been selected when using the visual editor.

products[1] is an object containing data on the second product that has been selected when using the visual editor

Extra data

You can edit and extend product data in the visual editor by clicking the Edit button next to each selected product.

In the Extra data field, you can insert a JSON object that will be injected into an extra_data key in the product definition. (i.e., product[0].extra_data).

Common use cases include configuring the product appearance, background colours, CTA content, etc, dynamically using these variables.

Guide

Extra data

Related articles