Product selector (HTML block)

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

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.