How to add the “Abandoned view” block in your own HTML email?

You can create an email in InSend based on templates (using a visual editor) or from scratch using the HTML language.

In the email's visual editor, the "Abandoned view" block is added by dragging the appropriate element from the sidebar. To insert an "Abandoned view" block into an HTML-designed email, you must write instructions in Liquid - the language of templates.

Using Liquid language elements in the "Abandoned view" element in the HTML email allows you to send a fully customized auto 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 shopping cart

The following methods are available for the product collection:

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

The simplest example of abandoned cart output in an HTML email:

<!-- 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 to use all available attributes of the abandoned view.

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.url}}" style="text-decoration: none; color: #006699;"> {{ line_item.name }} </a> 

Important! In preview mode when editing HTML emails and sending a test email, InSend displays a unit with two fictitious product caps and prices, but with all relevant styles. This is done so you can imagine how this block will look in the actual email. When you send this auto email to the customer, their actual products from the XML feed will be replaced in the email. The styles you configured for the email will be used for the products and other aspects of the shopping cart.

You can use the code below to customize the Exited View block to match the style of Insend's email templates. In addition to setting the styles, a stub is used here if there is no image of the product:

<!-- 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 emails. Plus, InSend supports the md5 filter (encode strings or numbers using the md5 algorithm).

Example of using filters:

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