How to insert the “Popular products” block in your own HTML mailing

2025-07-25 11:26 Emails

In Convead, you can create mailings based on templates (using a visual designer) or from scratch using HTML.

In the visual designer, the “Popular products” block is inserted by dragging the corresponding item from the sidebar. To insert popular products in the HTML-designed mailing, you will need to write instructions in Liquid – the language of templates.

Using Liquid language elements in the “Popular products” element in the HTML mailing allows you to send a fully customized trigger email.

Top Bought

<table>
    <tr>
        <td>Image</td>
        <td>Procust_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 }} шт.</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 }} шт.</td>
        <td>{{ line_item.total }}</td>
    </tr>
    {% endfor %}
</table>

This shows how you can use all the available attributes.

For customization, you can use any HTML and CSS constructs supported by email clients. Please note that when laying out HTML mailings, you will need be careful and stick to a number of recommendations, because email clients can be quite capricious 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 a mailing, be sure to check how it will look in the preview and send yourself a test email (buttons at the upper right) to make sure that all the items are displayed correctly.