You may be storing lists of products in your customer's carts on a server and want to send reminder emails or push notifications about it through our API. Or you may not be storing this data currently and want to leverage OneSignal's Data Tags and Journeys. This guide will explain the pros and cons of each and how to setup the content for these messages. If you need details on adding tags for abandoned cart, see Tags: Abandoned Cart.

Requirements

• Your custom data either stored on your server or using OneSignal's Data Tags

Option:custom_data

This allows you to pass data stored on your server into OneSignal's Create notification API using the custom_data property. You cannot use custom_data for Journeys.

The custom_data structure for this example:

{
"custom_data": {
    "cart_url": "https://yourdomain.com/cart",
    "cart": [
        {
            "cartImageURL": "https://i.imgur.com/ssPCfbC.png",
            "cartProductName": "24 Pack of Acorns",
            "cartQuantity": "1",
            "cartPrice": "$12.99"
        },
        {
            "cartImageURL": "https://i.imgur.com/8QWTfV4.png",
            "cartProductName": "Fancy Sweater",
            "cartQuantity": "1",
            "cartPrice": "$9.99"
        },
        {
            "cartImageURL": "https://i.imgur.com/ZI6XrpC.png",
            "cartProductName": "Squirrel Hammock",
            "cartQuantity": "1",
            "cartPrice": "$14.59"
        },
        {
            "cartImageURL": "https://i.imgur.com/VDOnWKB.png",
            "cartProductName": "Acorn Catapult Shirt",
            "cartQuantity": "1",
            "cartPrice": "$5.89"
        }
    ]
}

Option: Data Tags

You can store custom user properties or event data within OneSignal as Data Tags and substitute them into your message content. Data tags are limited because they are key : value pairs of string data and cannot store objects or arrays like custom_data. However, these can be used with Journeys.

Note that tags are key : value pairs of string data only. You cannot set arrays or objects for tag values. Your tag structure would best include only the last item added to your cart and how many items total in the cart. For example:

"cartImageURL": "https://i.imgur.com/ssPCfbC.png",
"cartProductName": "24 Pack of Acorns",
"cartQuantity": "1",
"cartPrice": "$12.99",
"cartItemsCount": "4",
"cart_url": "https://yourdomain.com/cart"

Abandoned Cart Email Template

This email template example will demonstrate how to display the following items Using Liquid Syntax:

• total number of items in the cart
• items in the user's cart including:
  • product image
  • product name
  • product quantity
  • product price
• link to the customer's personalized cart URL

Email Template Setup

Navigate to Messages > Templates > New Email Template and use the Drag & Drop Editor.

Create a 5 rows with the following:

• Rows 1, 2, and 4 have 1 column with a Text block.
• Row 3 has has 4 columns with: HTML block | Text block | Text block | Text block
• Row 5 has 1 column with a Button block

Display item count in email

A nifty feature of liquid syntax is the size property. We can display how many products in our cart array by referencing it with {{ message.custom_data.[key].size }}.

Within our template row 1 Text block, set your copy as desired. Example:

We're holding onto {{ message.custom_data.cart.size }} items in your cart, but don't wait too long, other squirrels are getting ahead!
  

If using Data Tags, you may want to consider storing the number of items in the cart on the frontend and include that within the message directly without the size property. Example: {{ cartItemsCount }}

Display items in email

Liquid syntax provides for-loops which can cycle through array data types set within your custom_data.

Note this only works with custom_data. You cannot use for-loops with data tags because tags only store string data types. In this case, the setup is the same, but you will only show 1 item based on your tag structure.

Within template row 2 Text block, set: {% for product in message.custom_data.cart %} which starts the for-loop.

Row 3 with the 4 columns will have the following in the 1st column's HTML block:

<img src="{{product.cartImageURL}}" alt="Image" style="max-width:100%;" />

The Text blocks of the 2nd, 3rd, and 4th columns will have the text:

• {{product.cartProductName}}
• {{product.cartQuantity}}
• {{product.cartPrice}}

Row 5 Text block, set: {% endfor %}

The for-loop checks each product in the cart array we pass into custom_data and displays the value for each product in the columns.

If using Data Tags, you can remove the rows with the for-loop. Remember to change the liquid syntax based on your tag structure.

Add a custom cart URL in email

This is optional and only needed if your carts are custom to a specific URL per customer.

There are several ways to setup the cart URL. In this example we pass in the full URL to the cart within the custom_data or tag like this: "cart_url": "https://yourdomain.com/cart"

See Custom URLs for more details.

In the Button block > Content Properties > Action > Url, set:

• {{message.custom_data.cart_url}} if using custom_data
• {{cart_url}} if using tags

Update the email template and send the message

See Design Emails with Drag and Drop for more details on customizing the template.

👍

Testing

When ready, you can use the template_id within your Create notification API requests with custom_data property.

If using tags, you can send using any of OneSignal's options for Sending Messages.

Abandoned Cart Push Setup

This push template example will demonstrate how to display an item in the user's cart including its image and name. It also displays how many items total are in the cart and links to the customer's personalized cart URL.

Push Template Setup

Push notifications can only be sent with a limited amount of data. Instead of listing all items in the cart, we want to display the first item and mention how many total items there are.

Navigate to Messages > Templates > New Push Template

Display item and item count in push

Liquid syntax provides if statements we can use to change what the message says depending on how many items in the cart array of your custom_data object or cartItemsCount tag.

In the template Message field, add the following copy:

{% assign item_count = message.custom_data.cart.size | plus: 0 %}
{% if item_count == 1 %}
You left {{message.custom_data.cart.first.cartProductName}} in your cart.
{% endif %}
{% if item_count == 2 %}
You left {{message.custom_data.cart.first.cartProductName}} and {{item_count | minus: 1}} more item in your cart.
{% endif %}
{% if item_count > 2 %}
You left {{message.custom_data.cart.first.cartProductName}} and {{item_count | minus: 1}} more items in your cart.
{% endif %}

{% assign item_count = cartItemsCount | plus: 0 %}
{% if item_count == 1 %}
You left {{cartProductName}} in your cart.
{% endif %}
{% if item_count == 2 %}
You left {{cartProductName}} and {{item_count | minus: 1}} more item in your cart.
{% endif %}
{% if item_count > 2 %}
You left {{cartProductName}} and {{item_count | minus: 1}} more items in your cart.
{% endif %}

In this example, we assign the variable item_count to be the custom_data.cart.size or the tag cartItemsCount and if that count is equal to 1, 2 or more than 2, display different content.

Due to the cart may having more than 1 item, we use the first property to get the first item in the cart.

We use the minus feature to reduce the total cart items count by 1 since we mention it already.

Display item image in push

In the template Image field, add the Image URL property with the liquid syntax. If the image doesn't exist, then no image will show. You can set a default image as well. Example:

• {{message.custom_data.cart.first.cartImageURL | default: "https://i.imgur.com/ssPCfbC.png"}}
• {{cartImageURL | default: "https://i.imgur.com/ssPCfbC.png"}}

Add a custom cart URL in push

In the template Launch URL field, add the cart URL property with the liquid syntax. If the cart doesn't exist, then the push will direct to the home page of the site or app.

Note on Launch URL within Templates: setting https:// or some other schema in the format x:// is required. If you set this within the tag, you can use the remove feature of liquid syntax as follows:

• https://{{message.custom_data.cart_url | remove: "https://"}}
• https://{{cart_url | remove: "https://"}}

Update the push template and send the message

See Sending Messages for more details on options provided within push templates.

👍

Testing

When ready, you can use the template_id within your Create notification API requests with custom_data property.

If using tags, you can send using any of OneSignal's options for Sending Messages.