How to add the “Popular products” block in your own HTML email?

In InSend, you can create emails based on templates (using a visual editor) or from scratch using HTML.

In the visual editor, the Popular Products block is added by dragging the appropriate element from the sidebar. To insert popular products into an HTML-designed email, you need to write instructions in Liquid - the language of templates.

Using Liquid language elements in the Popular Products element in the HTML emails allows you to send a fully customized auto email.

Top Bought

<table> 
<tr> 
<td>Image</td> 
<td>Product_name</td> 
<td>Price</td> 
<td>Qty</td> 
<td>Sum</td> 
</tr> 
{% for line_item in account.top_purchased_offers %} 
<tr> 
<td><img src="{{ line_item.picture }}" /></td> 
<td><a href="{{ line_item.url }}">{{ line_item.name }}</a></td> 
<td>{{ line_item.price }}</td> 
<td>{{ line_item.qnt }} pcs</td> 
<td>{{ line_item.total }}</td> 
</tr> 
{% endfor %} 
</table>

Top Viewed

<table> 
<tr> 
<td>Image</td> 
<td>Priduct_name</td> 
<td>Price</td> 
<td>Qty</td> 
<td>Sum</td> 
</tr> 
{% for line_item in account.top_viewed_offers %} 
<tr> 
<td><img src="{{ line_item.picture }}" /></td> 
<td><a href="{{ line_item.url }}">{{ line_item.name }}</a></td> 
<td>{{ line_item.price }}</td> 
<td>{{ line_item.qnt }} pcs</td> 
<td>{{ line_item.total }}</td> 
</tr> 
{% endfor %} 
</table>

This shows how you can use all available attributes.

For customization, you can use all HTML and CSS constructs supported by email clients. Please note that you need to be careful when designing HTML emails and follow a set of recommendations, as email clients can be quite whimsical and do not always understand some of the modern layout standards.

For example, a customized link with a product name might look like this:

<a href="{{ line_item.picture }}" style="text-decoration: none; color: #006699;"> {{ line_item.name }} </a>

Important! Before sending an email, be sure to check how it looks in the preview and send yourself a test email (buttons at the top right) to make sure all elements are displayed correctly.