Building a Personalized Cart Recovery Experience with Blotout

Cart recovery is one of the most effective ways to re-engage shoppers and reduce abandoned cart losses.

But out-of-the-box implementations can feel rigid, making it difficult to match the unique tone and flow of your website.

With Blotout and ShopWallet, you can now fully customize the Cart Recovery user experience using the new ready event handler. This approach ensures dynamic components, asynchronous code, and personalized flows all work smoothly—without tricky timing issues.

‍

Why Cart Recovery Matters

Studies show that cart abandonment rates average 70%+ across ecommerce sites. Recovering even a fraction of these lost sales can dramatically improve ROI.

But shoppers expect personalized, context-aware recovery flows—not generic popups. Blotout makes this possible.

‍

The Challenge with Older UI Overrides

Previously, customizing the Cart Recovery UI required overriding functions before the /init call. This created issues when:

• Code loaded asynchronously
• Components initialized after the tag
• Complex dynamic flows required precise timing

The result? Fragile implementations and inconsistent user experiences.

‍

Timing Is Everything: The ready Event

The new ready event handler solves this. It allows developers to reliably hook into the initialization lifecycle and safely build custom UIs.‍


edgetag('ready', ({ userId, isNewUser, ...rest }) => {
// custom UI code runs after initialization
})

Example: Simple Dialog-Based Recovery Flow

edgetag('ready', async () => {
const { walletAPI, storeAPI, variables } = window[Symbol.for('blotout-wallet')];


if (!variables?.enabled) return;


try {
const expiredCarts = await walletAPI.getExpiredCarts();


if (expiredCarts.carts.length > 0) {
const lastExpiredCart = expiredCarts.carts.at(0);


if (confirm('Expired cart found! Restore?')) {
await storeAPI.addItems(lastExpiredCart.items);
await walletAPI.restoreCart(lastExpiredCart.cartId);
alert('Cart restored!');
} else {
await walletAPI.deleteCarts();
alert('Cart deleted!');
}
}
} catch (error) {
console.error('Error handling expired carts:', error);
}
});

‍

Understanding the variables Object

The variables object exposes parameters configured in the Cart Recovery provider form. This means you can control UX directly from Blotout without redeploying code.

Key properties include:

• enabled (boolean): Whether the current user can restore carts (useful for A/B tests or preview modes).
• experiment (object): Details about user’s test group and mode.
• silentRestore (boolean): If true, the cart should be restored automatically—no confirmation needed.
• afterRestore (object): Defines what action happens after a successful restore (redirect, message, etc.).

‍

Controlling Popup Behavior with Configuration

By tailoring logic around these variables, you can:

• Run silent restores for frictionless UX
• Present different A/B test flows
• Trigger custom actions after restore

All without touching production code.

‍

Excluding the Default UI for Full Customization

Once your custom UI is ready, simply exclude the default UI bundle:

• In the Cart Recovery channel provider form, check the option to disable the default UI.

This ensures your site’s custom UX is the only recovery flow shown.

⚠️ Important: Cart recovery only works if the current user is enabled. For disabled, test, or preview modes, behavior depends on user group and keys. Decide whether to show an alternative UX—or none at all.

‍

Best Practices for Smooth Cart Recovery Implementation

• Always check variables.enabled before showing recovery flows.
• Use silentRestore for seamless mobile-friendly UX.
• Combine recovery flows with personalization data (e.g., loyalty status, past purchases).
• Log errors gracefully to avoid disrupting shopping sessions.

‍

FAQs: Blotout Cart Recovery Personalization

Q1: Do I need to override the default UI?
Only if you want a custom UX. You can use Blotout’s default UI out-of-the-box.

Q2: Can I run A/B tests with Cart Recovery?
Yes. Use the experiment object to define test groups and behaviors.

Q3: How does silent restore work?
When silentRestore = true, carts are restored automatically without confirmation.

‍

Conclusion: Smarter, Configurable Cart Recovery

With Blotout’s ready event and variables API, cart recovery is no longer one-size-fits-all. You can now:

• Build custom flows that match your site’s branding
• Control behavior directly from Blotout’s configuration
• Deliver seamless experiences that reduce friction and boost recovery rates

👉 Ready to roll out personalized cart recovery flows? Explore how Blotout empowers you to turn abandoned carts into loyal customers.