Shopify cart drawer not opening after add to cart
A Shopify cart drawer that will not open is almost always a conflict, not a broken cart: an app that adds its own cart, upsell or badge code is either cancelling the theme’s drawer script or overriding the CSS that slides it in. Check first that Theme settings > Cart is still set to Drawer, then switch app embeds off one at a time in the theme editor. Whichever embed brings the drawer back is the one to take up with its developer.
What you'll see
The shopper clicks Add to cart and the item does go into the cart, but the slide-out panel never shows. Sometimes the page darkens or blurs as if the drawer were about to appear and then nothing slides in, leaving an overlay that blocks the page. On other stores the drawer opens but lists nothing until the page is refreshed, or it only opens on the second or third click.
Why it happens
1. An app is overriding the drawer’s code or animation
Bundle, upsell, trust badge and sticky cart apps often load their own JavaScript and CSS on every page. When their styles override the transform or visibility rule that moves the drawer on screen, the theme opens the drawer correctly but it stays hidden behind the overlay.
2. Two carts are listening to the same click
If an app ships its own slide cart while the theme’s drawer is still enabled, both react to the add to cart event. One may stop the other, or they race each other, which is why the drawer opens on some clicks and not on others.
3. The cart type setting was changed
Themes such as Dawn offer Drawer, Page and Popup notification as cart types. A theme update, a new theme or someone tidying settings can switch it away from Drawer, and the store then behaves exactly as configured rather than as you remember it.
4. An earlier script error stops the drawer from listening
The drawer only opens if its event listener was registered when the page loaded. A JavaScript error higher up the page, often from an app or an edited snippet, can stop that from happening, so the click adds the item silently.
How to fix it
- In Online Store > Themes > Customize, open Theme settings and find the Cart group. Confirm Cart type is set to Drawer; some themes call it slide-out cart or mini cart.
- Still in the editor, open App embeds and disable any cart, bundle, upsell, badge or sticky-cart embed one at a time. After each change, add a product in the preview and watch whether the drawer returns.
- On the live product page, open DevTools and the Console tab before clicking Add to cart. Any red error that appears on the click, or on page load, names the file to look at.
- Switch to the Elements panel and find the drawer element (in Dawn it is a cart-drawer tag). Click Add to cart and see whether it gains an open class or attribute. If it does but stays off-screen, the problem is CSS; if it never changes, the problem is JavaScript.
- If an app’s stylesheet is to blame, ask its developer for a compatibility fix for your theme rather than piling on your own CSS overrides, which will quietly break again when the app updates or is removed.
- If you use an app’s slide cart on purpose, turn the theme drawer off so only one cart responds to the click.
- Repeat the test from a collection page quick-add as well as the product page, on an iPhone in Safari and an Android phone in Chrome.
How to check it's fixed
- From a product page, add an item once: the drawer should slide in on the first click showing that item, its variant and the correct subtotal.
- Add a second product from a collection quick-add button and confirm the drawer updates without a page refresh.
- Close the drawer and check that the dimmed overlay disappears with it and the page can be scrolled and tapped again, at phone width too.
What a QAlaunch scan shows for this
- JavaScript errors logged on the page as it loads, including errors thrown by app scripts.
- Script or stylesheet requests from apps that fail with a 404 or never load.
- Overlays or hidden elements visible in the desktop and phone screenshots, such as a dark layer left over the content.
- It does not know which apps you have installed, so it can point at the failing file but not name the app that owns it.
See exactly what a full report contains in the sample report.
Frequently asked questions
Why does the drawer only open after I refresh the page?
The add to cart request works, but the code that re-renders and opens the drawer either errored or was interrupted by another script. A refresh simply draws the cart fresh from the server. Look in the console for an error at the moment you click.
Should I fix it with custom CSS?
Only as a temporary patch. Overriding an app’s styles with stronger rules works until the app changes its class names, then the drawer breaks again with no warning. A fix from the app developer, or removing the conflicting app, lasts longer.
Is it safe to turn app embeds off on a live store?
Turning an embed off in the theme editor takes effect when you save, so test on a duplicate theme in preview if the store is busy. Turning an embed off does not uninstall the app or delete its settings.
Rather have a QA engineer test it by hand?
If this is a site you're launching or handing to a client, I'll go through it by hand, including the Shopify-specific issues a scan can't reach, like logged-in flows.
- Up to 10 key pages tested by hand, not a scan
- Every flow a customer uses: forms, sign-up, checkout, booking
- Real mobile and desktop browsers
- A written report in plain language, with screenshots
- A 15-minute call to walk you through it
- 10 years of professional QA experience
Tell me about your site and I'll reply personally, usually the same day.
No payment now. I'll confirm scope and price first.
Related fixes
More for Shopify: all Shopify fixes · Shopify testing · Shopify mobile checkout bugs
Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.
Sources: Shopify Community: add to cart drawer not opening after click · Shopify Community: cart drawer does not appear (Broadcast theme)