Abandoned cart reminder

If you have an e-commerce website and you only had to set up a single notification, then it would undoubtedly be the abandoned cart reminder, the ultimate push notification that will turn your abandoned carts into real sales.

The cart reminder automatically reengage users that leave without buying the contents of their shopping cart.

To set it up, several options are available to you, depending on the framework used to develop your website and the information available in the HTML of the product pages:

1. My website is built on woocommerce

A Cart Reminder notification is created and activated when you first create your WonderPush project.
It doesn't need any coding, everything happens from the WonderPush dashboard and your woocommerce interface.
Follow the abandoned cart reminder guide for woocommerce.

2. My website is built on shopify

A Cart Reminder notification is created and activated when you first create your WonderPush project.
It doesn't need any coding, everything happens from the WonderPush dashboard and your shopify interface.
[Follow the abandoned cart reminder guide for shopify] (https://docs.wonderpush.com/docs/customize-your-shopify-cart-reminder)

3. My website has JSON-LD structured data

The vast majority of ecommerce websites around the world (including Shopify, WooCommerce, Magento, Prestashop, BigCommerce, etc.), expose JSON-LD structured data.

JSON-LD allows Wonderpush to automate several push scenarios without coding a single line.

Just activate the E-commerce Web Plugin from the Web Plugins page of your WonderPush dashboard, without any coding, and [follow the e-commerce web push guide for marketers] (https://docs.wonderpush.com/docs/push-notifications-for-e-commerce-web-sites).

4. My website doesn't use JSON-LD, Shopify or WooCommerce

This case needs a developer
He'll be adding JavaScript to all the pages of your website to transmit some of the shopping cart / basket contents to WonderPush.
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.

Setting up the cart reminder notification
If you've deleted this notification, you can re-create it yourself following this guide.

Click "+ Add it to your project" button above
or 
Follow 🔍 Instructions

WARNING:
- If your website uses JSON-LD, don't follow this guide!
- Follow this guide only:
	. if your project is using shopify or woocomerce and you removed the reminder notification which was normally set up automatically.
	. or if your project doens't use JSON-LD, Shopify or WooCommerce 


COPY/PASTE THE FOLLOWING INTO THE PUSH NOTIFICATION EDITOR:

1/YOUR MESSAGE
Title:{{installation.custom.string_cartReminderProductName}}
Text:{{installation.custom.string_cartReminderMessage|default:"Order before it's too late!"}}
Image:{{installation.custom.string_cartReminderPictureUrl}}
Open URL or deeplink:{{installation.custom.string_cartReminderUrl|default:"wonderpush://notificationOpen/default"}}

2/ATTACH IN-APP COMPONENT
Skip this step unless, for example, you want to present the user with a discount coupon to encourage them to convert their shopping cart.

3/AUDIENCE
Add Criteria and choose Installation property (string), has any value, in string_cartReminderProductName

Send only to:
Installation property (string) > has any value, in string_cartReminderProductName 
AND 
Presence > User is absent, more than, 30, Minutes

4/SCHEDULING

Campaign name: Cart reminder
Automatic > When a subscriber becomes part of the audience

5/ SAVE

6/ ACTIVATE
Switch on the Cart reminder campaign

👍
That's it!
Your cart reminder is ready, time to test it.