You can create a mailing in Convead based on templates (using a visual designer) or from scratch using the HTML language.

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

The use of Liquid language elements in the “Abandoned view” element in the HTML mailing allows you to send a fully customized trigger email with a list of viewed products.

The “Viewed products” object is available in the HTML template under the name product_collection. The following methods are available for this object:

• line_items – collection of items in the cart

The following methods are available for the product collection:

• name – product name (from XML feed)
• url – link of the product card in the store (from XML feed)
• image_url – link to the product image (from XML feed)
• price – price of the goods

The simplest example of the output for an abandoned cart in an HTML mailing:

<code><code><!-- start --> <table> <tr> <td>Image</td> <td>Product</td> <td>Price</td> </tr> {% for line_item in product_collection.line_items %} <tr> <td><img src="{{ line_item.picture }}" /></td> <td><a href="{{ line_item.url }}">{{ line_item.name }}</a></td> <td>{{ line_item.price }}</td> </tr> {% endfor %} </table> <!-- End -->

This shows how you can use all the available attributes of the abandoned view.

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 to 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:

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

Important point! In the preview mode when editing HTML emails, and when sending a test mail, Convead displays a unit with two fictitious product caps and prices, but with all the relevant styles applied. This is done so that you can imagine what this block will look like in the actual email. When sending this trigger mailing to the client, their actual products from the XML feed will be substituted in the email. The styles that you configured for the mailing will be used for the products and other aspects of the cart.

You can use the code below to make the “Abandoned view” block fit the style of Convead’s template mailings. In addition to setting the styles, a stub is used here in case there is no picture of the product:

<code><code><!-- Start --> <table cellpadding="0" cellspacing="0" style="margin: 15px 0; font-size: 15px; line-height: 1.3em;" width="100%"> <tr> <td colspan="3" style="padding: 0 0 10px 0;"> <h4 style="font-size: 22px; line-height: 1.2em; font-weight: 400; margin: 0; padding: 4px 0;">You viewed products</h4> </td> </tr> {% for line_item in product_collection.line_items %} <tr> <td colspan="3" style="border-top: 1px solid #e0e0e0;"></td> </tr> <tr> <td valign="middle" width="73" style="padding: 9px 14px 9px 0;"> <a href="{{line_item.url}}"> <br />{% assign line_item_image = line_item.image_url %}{% if line_item_image == null %} <br />{% assign line_item_image = 'https://d2p70fm3k6a3cb.cloudfront.net/public/messages/common/product.jpg' %} <br />{% endif %} <img src="{{line_item_image}}" width="73"> </a> </td> <td valign="middle" style="padding: 9px 0; font-size: 16px; line-height: 1.3em;"> <a href="{{line_item.url}}" style="text-decoration: none; color: #3e3e3e;"> {{ line_item.name | truncate: 10, '...' }} </a> </td> <td valign="middle" width="140" align="right" style="padding: 9px 0; font-size: 16px; line-height: 1.3em; font-weight: bold; white-space: nowrap;">{{ line_item.price }}</td> </tr> {% endfor %} </table> <!-- End -->

You can use standard Liquid filters when designing fields in mailings. Plus, Convead supports the md5 filter (encode strings or numbers using the md5 algorithm).

Example of using filters:

<code><code>{% assign encoded_var = 'Test' | downcase | md5 %} <p> <a href="http://example.com/?super_param={{encoded_var}}"></a> </p>