SA beauty retailer · Beauty & skincare retailBag context and a direct checkout after add-to-bag
The native 'item added' modal showed the item and nothing else. The variant adds the bag total, item count and a Checkout now button, driven by the site's own analytics event and cart feed.
- Shoppers saw a confirmation with no sense of what was in the bag or how to get to checkout quickly.
- The buy button lives in a fixed bar, so visibility checks could not gate clicks.
- Sale prices are baked into line prices, so the cart's discount flag is only true for vouchers.
Showing the added item with the bag total and a direct checkout call to action will increase checkout starts per add-to-bag.
- Popup with item image, variant and price, bag item count and total, and a primary Checkout now button.
- Trigger by wrapping the dataLayer push for the add-to-cart event, which only fires on a genuine successful add.
- Bag summary read from the mini-cart JSON feed, with the just-added line matched by order line ID.
- Native modal suppressed through CSS and by unchecking its trigger input.
Respecting server load
The client flagged a doubled cart call. The popup times out at four seconds and renders without the total, and a fallback reusing the native add-to-bag response was specified as the next step.
Verifying the discount path
Strikethrough pricing only appears with a cart-level voucher, so that branch was verified with a stubbed cart rather than left untested.
Measured on checkout starts per add, cart to checkout rate. Test results belong to the client and are shared in conversation, with their permission, rather than published here.
More experiments
View all →SA tiles & bathroom retailer · Rebuilding a tile calculator without breaking its maths
The native tile calculator was hard to use. Version one decorated the native modal; version two replaced it with a custom floor and wall calculator, ported from a validated clone of the original logic and hardened through a 29-bug QA thread.
The hard part. The calculator markup exists twice on the page with duplicate IDs, and the theme's ID-based styles with !important beat any attribute selector the variant could write.
SA beauty retailer · A thumb-reach bottom nav with search that survives the keyboard
Home, categories, search, brands and bag were buried in the top header on mobile. The variant pins them to a bottom bar, reusing the native search so suggestions and tracking stay intact.
The hard part. Pinning the search panel with a transform made it the containing block for its fixed children. When the keyboard opened, the suggestions sheet flew off the screen.