How to add block with "Saved Cart" 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 "Saved cart" block is added by dragging the "Cart" element from the sidebar. But to insert an "Saved cart" block into an HTML-designed email, you need to write instructions in Liquid - the language of templates.

Using the Liquid language for the "Saved 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:

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 item in visitor.cart.line_items %}
<tr> 
<td><img src="{{ item.image_url }}" /></td> 
<td><a href="{{ item.url }}">{{ item.name }}</a></td> 
<td>{{ item.price }}</td> <td>{{ item.qnt }} pcs</td> 
<td>{{ item.total }}</td> 
</tr> 
{% endfor %} 
</table> <br><b>Sum: {{ visitor.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:

<td style="padding:0;Margin:0"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;font-size:14px">{{ item.name | truncate: 40, '...' }}</p></td>

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.