How to add the “Abandoned cart” 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 visual designer for emails, the "Abandoned cart" block is added by dragging the appropriate element from the sidebar. To insert an "Abandoned cart" block into an HTML-designed email, you need to write instructions in Liquid - the language of templates.

Using the Liquid language for the "Abandoned cart" element in the HTML emails allows you to send a fully customized auto email with details about the full composition and cost of the abandoned cart.

The abandoned cart object (the last cart) is available in the HTML email with the "Automatic" type under the name "Cart". It is not used for one-time and scheduled emails. The following methods are available for this object:

• line_items - the collection of items in the cart
• display_revenue - the total amount of the abandoned cart
• revenue - the total amount of the abandoned cart without currency

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)
• qnt - number of items in the shopping cart price - price of the product
• total - total price of the items in the shopping cart (qty * price)

The simplest example of shopping cart abandonment output in an HTML-designed email:

<!-- start --> 
<table> 
<tr> 
<td>Image</td> 
<td>Name</td> 
<td>Price</td> 
<td>Quantity</td> 
<td>Sum</td> 
</tr> 
{% for line_item in cart.line_items %} 
<tr> 
<td><img src="{{ line_item.image_url }}" /></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> <br><b>Sum: {{ cart.display_revenue }}</b> 
<!-- End -->

Here you can see how to use all available attributes of the abandoned cart and the items in it.

You can use all HTML and CSS constructs supported by email clients to customize the items in the cart. Please note that you should follow a set of recommendations when designing HTML emails, as 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.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 shows a shopping cart with two fictitious product caps and prices, but complete with styling. This is done so you can imagine how the email will look with a real shopping cart. 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.

To create a shopping cart block in the style of the InSend template email, you can use the code below. In addition to setting the styles, a cap is used here if there is no image of the product.

When designing fields in emails, you can use standard liquid filters. Also, InSend supports md5 filter (encoding strings or numbers with md5 algorithm).

Example of how to use filters:

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