Why does clicking my cart icon open two drawers at once?
When an app embed listens for clicks across the whole page instead of its own element, it can end up firing alongside your theme's native drawer instead of replacing it.
What's going on
A merchant noticed that clicking the cart icon on their storefront opened two cart drawers at once, both animating in on top of each other. Nothing had changed in the theme, but a recently enabled app embed was the common factor. Anyone who has installed an app that adds a floating widget, drawer, or popup through an app embed has likely seen some version of this: a click that should trigger one piece of UI instead triggers two.
Because the double-trigger reproduced consistently across more than one page, this points to a structural cause rather than a one-off theme bug: two different pieces of code are listening for the same click, and both are responding to it.
Why it happens
Shopify app embeds are designed to inject a script, or a small amount of markup, into every page of the storefront rather than into one specific section, since they target the page's head or body directly. That makes them useful for adding functionality store-wide, but it also means the app has no visibility into what else is already on the page when its script runs.
A common implementation shortcut is to attach a single click listener to the whole page and match it against a broad, generic-looking selector, such as any element with a common class like cart-icon, rather than a selector unique to markup the app controls itself. Many themes use a similarly generic class name for their own native cart drawer trigger, so the app's page-level listener and the theme's own script both respond to the same click, and both drawers open.
This is different from a rendering bug or a broken installation. Both pieces of code are working exactly as written; the conflict only shows up because two independent scripts were each told to react to a selector that turned out not to be unique to either of them.
5 ways to fix it
Check whether two separate things are actually bound to the same click
Open the page's dev tools, inspect the cart icon or menu button in the Elements panel, and look for more than one click listener attached to it, or for two separate drawer elements in the DOM (search for a repeated id or class like cart-drawer). If you find two drawer elements, you're dealing with two separate implementations reacting to the same click, not one buggy one.
Turn off the app embed and retest before touching any code
In the theme editor, open Theme settings, then App embeds, and toggle off the app you suspect. Reload the storefront and click the icon again. If only one drawer opens now, that app's embed was adding the extra listener. This isolates the cause in under a minute and tells you whether the fix belongs in the app's settings or in your theme's own code.
Ask the app's support to scope its script to its own element, not the whole page
A common cause of this kind of conflict is an app attaching a click listener to the entire page and matching it against a generic, common-sounding class name instead of an element unique to its own markup. Ask the app's support team, or check its settings, whether the trigger can be restricted to an element the app renders itself, or to a selector you specify, rather than intercepting a class your theme also uses.
If it's your own theme code, give the app a distinct hook to target
If the duplicate drawer is your theme's native cart drawer plus an app reusing the same icon, add a distinct class or attribute to that icon that only your theme's script binds to, and ask the app to target its own inserted element instead. This is typically a small change in the theme's cart-icon code, and it prevents any app embed from accidentally catching the same click going forward.
Disable or uninstall the app if it can't be scoped down
If the app has no setting to narrow its trigger and support can't resolve it, the safest short-term move is to disable that specific app embed under Theme settings and App embeds while keeping the rest of the app active, or uninstall it entirely if the conflicting feature is the only reason you installed it.
Bottom line
This is almost always a targeting problem, not a broken app: something, usually an app embed's script, is listening for clicks across the whole page with a loose selector that happens to also match your theme's own cart or menu icon, so one click fires two separate drawer implementations. Isolating the cause by toggling the app embed off, then asking the app to scope its listener to its own markup or a unique selector, resolves it in most cases without needing a developer rebuild. If you keep running into conflicts like this across several app embeds, that points to your theme carrying a lot of overlapping JavaScript rather than any one app category being at fault, and a developer review of your installed embeds is usually more useful than adding another app.
Browse the rest of the problem library, run a free storefront scan to catch issues like this automatically, or email us and we'll work out a custom solution for it.