ShopWallet: Cart Recovery Customizations For Shopify, Headless and Custom UI

ShopWallet was built from the ground up for modularity, anticipating the need for merchants to control the user experience and their specific use cases. For most cases, ShopWallet works out of the box and allows you to configure its look and feel using the channel configuration form; Cart Recovery is a great example of this.

To customize its appearance, the Recovery Popup allows configuring its theme through a set of tokens provided in the form:

This allows swapping out copy for your own particular brand of communication and makes the popup fit better to your overall color scheme.

Previewing the Popup on Your Website

When preparing to launch the recovery popup on your site, you can switch to Preview Mode which enables you to set a preview key in your current browser session to enable the popup without affecting the rest of your users. When Shop Wallet is switched to Preview Mode, the form displays instructions on how to set the preview key:

After copying and running this snippet on your page inside Dev Tools, reloading the page should show the following line in the console to confirm the preview key works:

With the preview key in place, we can try out cart recovery by adding an item or two to our cart and then deleting the cart cookies to simulate the cart expiring. We can do this by opening Dev Tools → Application and locating our shop domain's cookies. For typical Shopify stores this would be the cart* cookies:

Deleting just the cookies with the cart prefix and reloading the page will simulate a customer coming back to the page with the cart cookies expired. On page load, Shop Wallet checks for any previously active carts. If it finds at least one, it will prompt you to recover the last expired cart:

At this point you can choose to recover or delete the expired cart, which will allow you to test the full functionality of Shop Wallet.

You can read more about customizing our popup on the documentation page.

Customizing the Shop API

The default implementation ships with a store-specific API implementation that provides methods to the popup to interact with the site's cart. It uses the Shopify AJAX API to add items to the cart.

If your site cannot use that endpoint or are using a headless setup, you can provide your own API implementation by overriding the default one supplied by our SDK package:

// This is the global namespace key for Shop Wallet's modules
const registryKey = Symbol.for('blotout-wallet')

if (!window[registryKey]) {
  window[registryKey] = {}
}

// `storeAPIFactory` is the factory method that will be called by our
// SDK and should return a Shop API object
window[registryKey].storeAPIFactory = function (
  fetchImplementation = window.fetch
) {
  return {
    addItems(items, expiredCartId) {
      /* ... */
    },
    getCartToken() {
      /* ... */
    },
    getCheckoutURL() {
      /* ... */
    },
  }
}

The requirements for each of these methods are described in our documentation.

Replacing the Default Recovery Popup

For more technically savvy merchants we also provide a way to completely take over the implementation of the Recovery Popup by using the Shop API and Wallet API directly using your preferred UI approach.

To opt into this mechanism, you must provide an implementation through the shared namespace object:

// This is the global namespace key for Shop Wallet's modules
const registryKey = Symbol.for('blotout-wallet')

if (!window[registryKey]) {
  window[registryKey] = {}
}

// `ui` is the interface that the SDK uses to communicate with your UI
// implementation
window[registryKey].ui = {
  init(params) {
    /* ... */
  },
}

When the Shop and Wallet APIs are ready, init will be called, passing these parameters to the method. It's at this point that your application can call the Wallet API to fetch expired carts and restore the cart.

A minimal implementation using just the browser's native dialogs using the Shop and Wallet APIs to achieve the same kind of functionality that the default recovery popup offers can be implemented with just a few lines of code:

const registryKey = Symbol.for('blotout-wallet')

if (!window[registryKey]) {
  window[registryKey] = {}
}

const start = async ({ walletAPI, storeAPI }) => {
  try {
    const expiredCarts = await walletAPI.getExpiredCarts()
    if (expiredCarts.carts.length) {
      // grab the latest expired cart
      const lastExpiredCart = expiredCarts.carts.at(0)
      // prompt the user to restore or delete the cart (cancel will delete)
      if (confirm('Expired cart found! Restore?')) {
        // adds items to the cart in your shop
        await storeAPI.addItems(lastExpiredCart.items)
        // marks the cart as restored in the Wallet database
        await walletAPI.restoreCart(lastExpiredCart.cartId)
        alert('Cart restored!')
      } else {
        await walletAPI.deleteCarts()
        alert('Cart deleted!')
      }
    }
  } catch (e) {
    console.error(e)
  }
}

let initialized = false

window[registryKey].ui = {
  init(params) {
    // components can receive multiple init calls, so we should only run
    // `start` once
    if (!initialized) {
      start(params)
    }
    initialized = true
  },
}

This approach is completely framework agnostic and allows any UI library to receive the parameters and use them to update any part of your application.

For example, themes that use a collapsible sidebar to display the cart could fetch expired carts in the background and open the sidebar when an expired cart is detected to prompt the user to restore items, all within the familiar interface of the cart sidebar. An integrated experience allows you to better guide your customers through the recovery workflow.

You can read more about this feature in our documentation.

Are you usign Blotout EdgeTag? Try it now

1. Ensure you are on an App Pixel
2. Email cx@blotout.io to turn on feature

Are you not using EdgeTag? Start for free

1. Install EdgeTag
2. Feature will be turned ON