Abandoned shopping carts and checkouts with Commerce.js

Online shoppers will sometimes abandon their carts and checkouts before completing an order. As disheartening this may seem, all is not lost.

Why a customer might abandon their order is something you can't control, but how and when you re-engage them is.

In this post I’ll explain how you can re-engage customers who have abandoned your Commerce.js carts and checkouts. I’ll then provide a simple example explaining how to implement this as part of your Commerce.js integration.

What are cart and checkout abandonment recovery emails?

Abandonment emails are sent to visitors of your site who have expressed interest in your products by adding them to their cart, but did not complete the checkout process. An automated email is then sent to that visitor shortly after their cart and checkout are abandoned, with the goal of converting them into customers.

The re-engagement email you send to customers may include the following information:

• Images of the products that were in the customer’s cart
• A “continue shopping” CTA with the cart and customer data pre-loaded
• A summary of your business and your value add
• A discount code
• Validation of your products through reviews
• Links to related products
• Social media links

Below is a Klayvio powered abandon cart email from the folks at Leon & George.

Abandoned carts vs abandoned checkouts

Unlike an abandoned cart which might only has cart items, abandoned checkouts contain more customer data like full name, shipping location, billing address etc.

Commerce.js gives you granular control over re-engaging abandoned checkouts through the use of the checkout token.

What are checkout tokens?

Checkout tokens are essentially a checkout session. Checkout tokens store data on a checkout e.g. Line item quantities, selected variants, a chosen shipping method, a defined tax zone for the customer.

Note: Checkout tokens expire after 7 days.

How do abandonment emails work?

In order to initiate a cart or checkout recovery email, you’ll first need the customer’s email address. There are two ways you might collect the customer’s email:

1. The customer is logged in to your application so you already have their email
2. The customer enters their email at the beginning of the checkout

Once you have the customer’s email, you can add them to a list in your database, segment them based on their browsing session or products they were interested in, and then re-engage them with an email.

Let’s now create an abandonment email for your store

Below is a short guide explaining how to create your own abandonment emails.

You’ll need:

• A Chec account
• A marketing automation provider (Klayvio, Omnisend, Active Campaign)
• A database (Airtable, Fauna, Firebase)

1. Collect the customers email/phone number

If you are using an authentication/membership system on your storefront, you may already have this data on hand.

If you do not have an authentication or membership system in place, we suggest recording the customers email or phone number address using a multi-step checkout form. Multi-step checkouts are preferred because they allow you to capture the customers contact information early in the checkout process.

Note: You should be aware of different data privacy/legal requirements in your country regarding this approach.

2. Retrieve and store cart information

Retrieve the current cart ID by using the commerce.cart.id() function. You’ll then want to store the cart ID in your database of choice, we recommend also storing the created & expires date in your database (for more information on the data you can store, refer to the full response of the cart object. If you have the customer’s email, or the customer ID available, store this in your database alongside the cart information.

Note: Cart tokens expire 30 days after they've been created, carts are also deleted once an order containing the cart has successfully been captured.

3. Use the stored cart data

The beauty of creating a custom abandoned cart with Commerce.js is that you get to decide when you consider a cart to be abandoned, when to re-engage the customer (1 hour, 6 hours, or 1 day) and what channel you are going to use (email, SMS etc).

Before you continue, you should first check and see if the cart still exists (it may have expired, or the customer may have already completed their purchase. You can do this by calling commerce.cart.retrieve({CART_ID}), this function will either return the cart information or a 404 if the cart no longer exists. If the cart exists, you can use the data returned from the step above to continue with your flow and send the customer an email.

Alternatively you can synchronize the cart data with email providers like Klayvio or Active Campaign who provide native abandoned cart support.

4. Recreate the cart for a customer

In your re-engagement email, link your customer to a cart and checkout that contains all the products the customer was interested in. Do this by calling commerce.cart.retrieve({CART_ID}). If this call returns a 404 (as the cart has expired or has been deleted), you can then call commerce.cart.refresh() to create a fresh cart for the customer. After a successful checkout you should remove cart data from your local database/custom abandoned cart system to avoid your customer from being prompted to complete a purchase on a cart that has already been captured. An easy way to achieve this would be to set up a webhook on the orders.create event.

Re-engagement complete!

You're now setup to capture the abandoned shopping session of your shoppers, send them a re-engagement email, and seamlessly convert them into customers.

Using a email marketing platform will give you a lot of control over how you style your email, the email sending interval, and frequency of.

The beauty of these re-engagement emails is they are all automated, so once you are up and running, sit back and let Commerce.js and your email marketing platform handle the rest. Like your checkouts, you can also A/B test the emails you send out with different behavioural triggers, copy, layout, and imagery!