Field NotesJuly 3, 2026

Two add-to-carts and the overlay wars: second-pass cleanup on a luxury storefront

An anonymized Shopify field note on consolidating duplicate add-to-cart logic, overlay conflicts, chat placement, tap targets, and script loading.

Abstract Shopify duplicate add-to-cart and overlay cleanup board for a luxury storefront

The short version

This field note comes from second-pass cleanup work for a luxury tabletop and home entertaining storefront.

The first pass had handled the obvious weight. The follow-up was quieter and more operational: the product page still had two competing add-to-cart implementations, overlays were fighting for priority, the chat widget needed to stop covering mobile tap targets, and a dead helper was throwing JavaScript errors.

That kind of cleanup is easy to undervalue because it does not always produce a dramatic before-and-after number. But it is often where a storefront stops fighting its own shoppers.

The problem with two add-to-carts

Add to Cart should have one clear owner.

When a PDP has two competing implementations, the store can disagree with itself at the most important moment in the buying flow. One script may own button state. Another may own form submission. A sticky bar may read product state differently from the main form. A cart drawer may open for one path and not the other.

The cleanup consolidated that behavior so the buying action had one path to reason about. That made later QA more meaningful because there was no longer a need to ask which add-to-cart system was being tested.

For related reading, the earlier JavaScript payload cleanup note covers the broader theme cleanup pattern. This note is about the smaller second pass that makes the storefront feel solid.

The overlay stack needed a referee

Modern Shopify storefronts collect layers. Chat widgets, popups, sticky add-to-cart bars, mobile menus, product media modals, cart drawers, promotional banners, and app embeds can all need to sit above the page at different times.

When there is no clear stacking system, customers see the symptoms: a drawer behind a popup, a chat launcher over a checkout-adjacent button, a close control hidden by sticky UI, or a mobile tap target that is technically present but practically blocked.

The z-index audit gave those layers a clearer order.

  • Cart and purchase UI needed priority over passive widgets
  • Modal and drawer states needed predictable stacking
  • Mobile chat placement needed room around tap targets
  • Sticky elements needed to stop covering each other
  • Popup behavior needed to respect core shopping actions

The point was not to make every overlay disappear. The point was to make sure the storefront knew which one mattered most in each state.

The unglamorous punch list

The follow-up cleanup also removed a JavaScript error from a dead isScrollable helper. Errors like that are tempting to dismiss when the page mostly works, but they reduce trust in every other interaction on the page.

Shopify-generated leftover assets were removed from the codebase as part of the same cleanup. That kind of housekeeping makes future diffs easier to read and lowers the chance that a developer wastes time chasing files that are not really part of the authored theme.

Tap-target sizing was another small but important fix. A luxury storefront can look polished and still feel poor on mobile if important controls are too hard to hit. The cleanup made interactive areas more forgiving without changing the visual direction of the store.

The checkout path starts before checkout.

Shopify Detox Scan checks for order-flow risk, duplicate embeds, visible app leftovers, and storefront behavior that can interfere with the path from PDP to cart.

Start with Shopify Detox Scan

Third-party scripts needed loading discipline

The cleanup also reviewed third-party scripts such as Klaviyo, Gorgias, and Bing. These tools can be useful, but they should not all compete with the storefront's most important interactions by default.

The work was not about removing every integration. It was about making scripts load with intention and checking that support, marketing, and tracking tools did not make the product page harder to use.

That is the balance I look for in Shopify cleanup. Keep the business tools that matter, but stop letting them blur ownership of the buying flow.

The bigger lesson

The second pass is where a storefront often becomes calmer.

The first pass may reduce payload, remove obvious clutter, or fix the largest visible problems. The second pass catches the things customers feel: duplicated actions, blocked taps, overlays with unclear priority, chat launchers in the wrong place, and errors that make the theme less predictable.

Two add-to-carts is not just duplicate UI. It is duplicate authority over the store's most important button. Once that ownership is clear, the rest of the storefront is easier to trust.

How Storefront Detox can help

Shopify Detox Scan is a useful first step when a storefront looks mostly fine but still feels fragile, noisy, or inconsistent.

It can flag visible app bloat, duplicate embeds, console errors, subscription or cart risk, tracking clutter, and other symptoms that point toward deeper cleanup.

If the scan shows the same kind of second-pass issues, the next step is usually a focused cleanup sprint around the PDP, cart, overlays, and third-party loading behavior.

Next step

Does your storefront still feel noisy after the obvious cleanup?

Start with a Shopify Detox Scan. I can help find order-flow risk, duplicate embeds, blocked tap targets, script clutter, and cleanup work that makes the store easier to trust.

Start with Shopify Detox Scan