Design
Choose the Inspire template, available in the standard library.
Styles
The communication inherits the styles from the brand kit. You will find pre-set logos, fonts, and color palettes. To modify them, click the Styles icon; the section on the right will allow you to adjust various options (learn more by reading the article Come creare una comunicazione con il template Inspire).
Abandoned checkout products
You can start creating your communication by customizing the existing section or by adding a new section from the catalog. Click the Add Section button.
In the catalog, select the Shopify section and choose the item Your Cart.
Click the edit icon.
In the Layout tab, you can modify the structure of the item by adjusting, for example, the column proportions, text color, background color, or, in the Columns tab, you can change the behavior and appearance of individual columns.
Click the Content tab. By default, the Connect to Shopify option is selected. From the dropdown What to show the contact?, select Checkout - Products.
The selected options are already valid for displaying the products in the contact's cart. You will only need to indicate the number of products to display. Depending on the chosen item, you can check or uncheck the option One product per row.
Click the Save button.
The item is already set up to display the product image, name, price, and cart total. To further customize the item, click the info icon next to Product Placeholders in Cart and note the available placeholders:
-
[temp:item.title]
Product name -
[temp:item.varianttitle]
Only for checkout - Name of the specific variant in the checkout -
[temp:item.description]
Product description. Use[temp:item.description left='130']
to limit its length. -
[temp:item.link]
Product link on Shopify -
[temp:item.image]
Main product image -
[temp:item.price]
Price
Example of formatting:[temp:item.price maxdigits='2' mindigits='0' locale='it']
-
[temp:item.usecompareatprice]
True if the product is on sale. Use in visibility conditions. -
[temp:item.compareatprice]
Original price (if the product is on sale)
Example of formatting:[temp:item.compareatprice maxdigits='2' mindigits='0' locale='it']
-
[temp:item.currency]
Currency symbol -
[temp:item.quantity]
Only for checkout - Quantity of the individual product -
[temp:item.tags]
Tags defined on the Shopify product -
[temp:item.hasvariants]
True if the product has variants (e.g., size, color). Use in visibility conditions. -
[temp:item.minvariantprice]
Minimum price of variants (if the product has variants). Use to display the price as "Starting From". -
[temp:item.maxvariantprice]
Maximum price of variants (if the product has variants). -
[temp:item.available]
Only for checkout - Available (true if inventory quantity is greater than 0). -
[temp:item.sku]
Product SKU (if defined on Shopify). -
[temp:item.vendor]
Supplier (if defined on Shopify). -
[temp:item.productid]
Numeric product ID. -
[temp:item.variantid]
Numeric variant ID.
Checkout Information
As with the checkout products, insert a new section and choose the Your cart item from the Shopify tab. Then, while editing the item, click the Content tab and select Checkout - Info.
The item is already set up to display the total, number of items, etc. To customize the item further, click the info icon next to Checkout placeholder and note the available placeholders:
-
[temp:checkout.checkouturl]
Link to checkout -
[temp:checkout.itemsqty]
Items in the checkout -
[temp:checkout.itemscount]
Products in the checkout -
[temp:checkout.totalprice]
Total price.
Example of formatting:[temp:checkout.totalprice maxdigits='2' mindigits='0' locale='it']
-
[temp:checkout.subtotalprice]
Subtotal (Total - shipping costs - taxes).
Example of formatting:[temp:checkout.subtotalprice maxdigits='2' mindigits='0' locale='it']
-
[temp:checkout.totalitemsprice]
Total (without discount) -
[temp:checkout.currency]
Currency symbol
Cart Link
A button linking to the cart page is automatically included. You can change the clickable text and style by clicking the edit icon.
The link already uses the correct placeholder.
Preview
To ensure everything is set up correctly, click the Preview button and then Customize.
Select the database connected to Shopify, then choose a contact by clicking the icon.
Filter the contacts by selecting those with a populated cart.
Select a contact.
Click the Update button.