Blogs Home

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

November 13, 2024

ShopWallet was designed with flexibility at its core.

Merchants need to control user experiences while still benefiting from best-in-class recovery solutions. For many, ShopWallet works out of the box, but developers can go deeper—customizing appearance, behavior, and even the API itself.

Customizing the recovery popup‍

The recovery popup helps bring back abandoned carts, but it shouldn’t clash with your site’s look or tone. ShopWallet allows full theme customization through tokens available in the channel configuration form. These tokens let you adjust colors, fonts, and copy to match your brand identity seamlessly.

Want to change the language or tone? Swap out the default copy for messaging that matches your voice. Whether you use friendly reminders or professional prompts, the popup adapts to your communication style.

Previewing the popup on your website‍

Before going live, you can test your configuration safely. ShopWallet’s Preview Mode allows you to enable a preview key in your browser session. By copying a provided snippet into Dev Tools, you can reload the page and confirm the preview is active in your console log.

Once enabled, simulate an abandoned cart by deleting cart cookies. For most Shopify stores, these are the cookies with the cart* prefix. After removing them and refreshing the page, ShopWallet detects expired carts and prompts the user to recover their last session. This workflow makes testing quick and safe before launch.

Customizing the Shop API‍

Out of the box, ShopWallet integrates with Shopify via the AJAX API. This lets the popup handle actions like adding items or retrieving a checkout URL. But not every store uses the default setup—headless and custom implementations are increasingly common.

To support this, ShopWallet provides a global namespace (blotout-wallet) where you can override the default API with your own factory. Developers can implement methods like addItems, getCartToken, and getCheckoutURL to connect ShopWallet with any backend or custom flow. This modular approach ensures compatibility across modern commerce stacks.

Replacing the default recovery popup

For ultimate control, you can replace ShopWallet’s default UI entirely. This allows merchants and developers to build their own cart recovery interface from scratch while still using the same underlying infrastructure.

Check the updated documentation and blog posts for implementation details.

Blotout`s integration: unlock more features‍

Using ShopWallet with Blotout unlocks additional features and performance benefits. To enable it:

  • Ensure your store is on an App Pixel.
  • Contact cx@blotout.io to activate the feature.
  • If you’re not using EdgeTag yet, you can start for free.

Blotout ensures recovery signals are captured efficiently, improving overall performance tracking and compliance.

Turn customization into conversion‍

ShopWallet isn’t just a plug-and-play recovery tool—it’s a modular system designed to adapt to your store’s architecture, whether Shopify, headless, or custom. From styling popups to overriding APIs and even building entirely new UIs, you can take control of cart recovery without losing functionality.

Get started today — Install ShopWallet and try EdgeTag free to see how customizable cart recovery can boost your conversions.

FAQs

Q1: Can I style the ShopWallet popup to match my brand?
A1: Yes — use theme tokens to change colors, fonts, and copy for seamless brand integration.

Q2: How do I test the recovery popup before launch?
A2: Use Preview Mode with a preview key to simulate abandoned carts without affecting real users.

Q3: Does ShopWallet work with headless commerce?
A3: Absolutely. You can override the default Shopify API with your own implementation via the blotout-wallet namespace.

Q4: Can I build my own recovery UI?
A4: Yes. ShopWallet allows replacing the default recovery popup with a fully custom implementation.