This guide shows you how to setup a shopping cart / basket reminder.
The cart reminder automatically sends push notifications to users that leave without buying the contents of their shopping cart.
To set up a cart reminder, you'll need to:
- update properties when users add, remove or purchase the contents of their cart (if you're using our Shopify, or our WordPress plugin with WooCommerce that's automatically done for you),
- make sure the Cart Reminder notification is active in your dashboard, under Notifications.
Activating the Cart Reminder notification
The Cart Reminder notification is created and activated by default when you first create your WonderPush project.
Go to your dashboard, find this notification under the Notifications section and make sure it is “ON”, like this:
If you can't find the cart reminder notification, because you've deleted it or because your project was created before Sept 1st 2019, you can still create it yourself.
Setup the cart reminder properties
In this step, you'll be adding JavaScript to all the pages of your website to transmit some of the shopping cart / basket contents to WonderPush.
If you're using our WordPress plugin along with WooCommerce, see our WooCommerce specific cart reminder instructions.
If you're using Shopify, see our Shopify instructions.
We need to make sure that a string_cartReminderProductName property stays up-to-date with the name of one of the user's cart items, or null when their cart is empty.
The below sample code shows how to do this, and also how to customize the destination URL, the message, or set a product image.
// include this snippet on every page of your website, including the "Thank you" page users get after purchase
window.WonderPush = window.WonderPush || [];
WonderPush.push(function() {
var productName = null; // Mandatory: adapt to set product name when cart not empty
var pictureUrl = null; // Optional: adapt to set add a picture to the notification
var message = null; // Optional: adapt if you wish to customize the notification text
var url = null; // Optional: adapt if you want to take the user somewhere specific
WonderPush.putProperties({
string_cartReminderProductName: productName,
string_cartReminderPictureUrl: pictureUrl,
string_cartReminderMessage: message,
string_cartReminderUrl: url,
});
});
let productName = nil // Mandatory: adapt to set product name when cart not empty
let pictureUrl = nil // Optional: adapt to set add a picture to the notification
let message = nil // Optional: adapt if you wish to customize the notification text
let url = nil // Optional: adapt if you want to take the user somewhere specific
WonderPush.putProperties([
"string_cartReminderProductName": productName,
"string_cartReminderPictureUrl": pictureUrl,
"string_cartReminderMessage": message,
"string_cartReminderUrl": url,
]);
NSString *productName = [NSNull null]; // Mandatory: adapt to set product name when cart not empty
NSString *pictureUrl = [NSNull null]; // Optional: adapt to set add a picture to the notification
NSString *message = [NSNull null]; // Optional: adapt if you wish to customize the notification text
NSString *url = [NSNull null]; // Optional: adapt if you want to take the user somewhere specific
[WonderPush putProperties:@{
@"string_cartReminderProductName": productName,
@"string_cartReminderPictureUrl": pictureUrl,
@"string_cartReminderMessage": message,
@"string_cartReminderUrl": url,
}];
String productName = null; // Mandatory: adapt to set product name when cart not empty
String pictureUrl = null; // Optional: adapt to set add a picture to the notification
String message = null; // Optional: adapt if you wish to customize the notification text
String url = null; // Optional: adapt if you want to take the user somewhere specific
JSONObject properties = new JSONObject();
properties.put("string_cartReminderProductName", productName);
properties.put("string_cartReminderPictureUrl", pictureUrl);
properties.put("string_cartReminderMessage", message);
properties.put("string_cartReminderUrl", url);
WonderPush.putProperties(properties);
var productName = null; // Mandatory: adapt to set product name when cart not empty
var pictureUrl = null; // Optional: adapt to set add a picture to the notification
var message = null; // Optional: adapt if you wish to customize the notification text
var url = null; // Optional: adapt if you want to take the user somewhere specific
WonderPush.putProperties({
string_cartReminderProductName: productName,
string_cartReminderPictureUrl: pictureUrl,
string_cartReminderMessage: message,
string_cartReminderUrl: url,
});
Make sure the above code gets called every time the shopping cart is updated, including when the user finalizes his purchase.
That's it!
Your cart reminder is ready, time to test it.
Updated 3 months ago
What's Next
| Setting up the cart reminder notification |