When the Shopify cart drawer opens empty but the cart page shows the item, the item was added and the drawer failed to redraw. The usual causes are a theme customization or update that broke the drawer’s script, or an app that changes the add-to-cart request. Test on a duplicate theme with app embeds switched off, check the browser console and the add-to-cart response, and compare with a fresh copy of your theme.
Why does the cart page show the item but the drawer is empty?
In most Shopify themes, clicking Add to cart with a drawer cart does two separate things. First, the theme’s JavaScript sends the product to Shopify’s Cart API, usually the /cart/add.js endpoint, which adds it to the cart. Second, the script redraws the drawer with the new contents and opens it.
If the cart page shows the item after a refresh, step one worked. Your problem is in step two. That is useful to know: the cart, the product and Shopify’s checkout are probably fine, and the fault is in the code that draws the drawer, or in something that gets in its way.
Shopify’s documentation explains why step two can fail quietly. The add endpoint returns only the line items that were just added, not the whole cart. Many themes use bundled section rendering to ask for the drawer’s new HTML in the same request: the Cart API can return the HTML for up to five sections under a sections key. Shopify notes that sections are rendered after the cart has been changed, so rendering errors don’t affect the response status, and a section that fails to render comes back as null. The request looks successful, the item is in the cart, and the drawer gets nothing to show.
Lost add-to-cart clicks cost sales directly, so this is one of the first things we check on a store. If you’d rather hand it over, our Shopify and e-commerce team does this kind of theme work.
What usually causes it?
| Cause | What you tend to see | Where to look |
|---|---|---|
| A theme code edit removed or renamed something the drawer script expects | A red error in the browser console when you click Add to cart | Recent edits in Edit code, especially product and cart templates |
| A theme update didn’t carry your code edits over | The drawer broke on the day you published the updated theme | Your theme library: compare with the previous version |
| An app intercepts add to cart (bundles, upsells, cart apps) | The drawer works when the app’s embed is switched off | App embeds in the theme editor, and code the app added to the theme |
| The drawer section was renamed or moved | The add-to-cart response has null where the drawer’s HTML should be | The sections in the response, and the drawer’s section in the theme |
| A setting or browser issue | Only one browser or device is affected | Private window, another device, cleared cache |
Section names matter more than they look. Shopify’s Section Rendering API explains that a section included in a JSON template or a section group is assigned a dynamic section ID. If a script asks for the drawer by a section ID that doesn’t exist in the theme, for example after the drawer’s section was renamed or replaced, the response has nothing to put in the drawer.
Apps are a common culprit because some change the add-to-cart flow itself. Shopify’s help notes that some apps inject code directly into your theme’s code, and when you update a theme it warns that some apps might not be compatible with a new theme. Code edits are carried into an update only if they can be merged; if not, Shopify tells you the code edits could not be included, and they have to be reapplied by hand.
Real examples from store owners match these causes. In one Shopify Community thread, the drawer showed empty until a refresh, and the owner found a bundle app was the cause. In another, a customized Dawn theme stopped updating the drawer after an element the theme’s script expected was removed from the product template. These are community discussions, not official fixes, but they show why the steps below start with apps and code edits.
How do I find the cause? 5 checks
Work on a copy, not the live theme. Shopify recommends you duplicate your theme as a backup before you change it; the copy shows on the Themes page as “Copy of” plus the theme’s name, and you can test in it without touching the live theme.
- Switch off app embeds on the copy. Open the duplicate in the theme editor, click the App embeds icon in the sidebar, and switch off the embeds for apps that touch the product page or cart, one at a time. Preview and add a product after each. If the drawer starts working, you have your app.
- Read the browser console. In the preview, open your browser’s developer tools, go to the Console tab and click Add to cart. A red error at that moment usually names the script file and line that failed. A file from your theme points to theme code; a file from another domain often belongs to an app.
- Check the add-to-cart response. In the developer tools’ Network tab, type “cart” in the filter, click Add to cart and select the add request. In the Response tab, look for your product in the line items, then look for a sections part. If the product is there but the drawer’s section is missing or null, the add worked and the redraw failed.
- Compare with a fresh copy of the theme. Shopify’s theme troubleshooting guide suggests installing a new version of your theme from the Theme Store and testing whether the issue is still there. If the fresh copy works, the cause is in your customizations or your app setup. If it fails too, it is likely a theme bug.
- List what changed and when. Note the date the drawer broke and what happened around then: a theme update, a new or updated app, or code edits. In Edit code, a file’s Timeline view lets you restore an earlier version of that file; Shopify suggests copying your current version somewhere safe first.
Shopify’s troubleshooting guide also suggests ruling out your own browser: clear the cache and cookies, or try a private window or another device. If the drawer works everywhere except one browser, the store is probably fine.
How do I fix it once I know the cause?
An app is the cause
Leave the app’s embed off on the live theme for now if the app isn’t essential, and contact the developer from your Shopify admin: go to Settings > Apps, open the app’s menu and choose Get support. Shopify suggests including the app’s name and version, what you expected and what happened, the steps to reproduce it, screenshots or a screen recording, and the date it started with anything that changed around then. Add your theme’s name and version: app developers often have a setting or a fix for a particular theme’s drawer. Shopify’s guide also suggests uninstalling an app temporarily to confirm it is the cause; check first whether uninstalling would delete the app’s data or settings.
Your own code edits are the cause
Restore the element or file the script depends on, using the console error and the Timeline view to find it, or reapply your customization on a fresh copy of the theme, carefully. If the edits came from a developer, ask them to fix the drawer against the current theme version rather than patching the script to skip the error.
A theme update is the cause
Shopify adds an updated theme to your library as a new copy, so your previous version is still there. If the drawer broke when you published the update, you can publish the previous theme again while you reapply the code edits that weren’t carried over.
It is a theme bug
If a fresh, unedited copy of the theme fails too, contact the theme’s developer with the console error and the steps to reproduce it. Shopify’s guide calls this getting support for your theme.
You need sales working today
Change the cart style while the real fix is made. In theme settings, the Cart type menu offers Drawer, Page or Popup notification in themes that have it. Switching to Page sends shoppers to the cart page after they add a product, which you already know works. It changes the shopping flow, so treat it as temporary.
Test checkout after the fix
A drawer that opens isn’t the end of the job. Add products from a product page, a collection page and any quick-add buttons, change quantities in the drawer, remove an item, then go through to checkout on a phone and a computer. Our 5-minute Shopify checkout test lists the rest of the steps. If you removed apps along the way, our guide to whether apps slow down a Shopify store explains how to clean up the code they leave in your theme.
Drawer still empty, or not sure whether it is the theme or an app? Send your store URL for a free website audit, or ask about a full Shopify store audit, which includes test orders on each payment method.
Frequently asked questions
Why does the cart page show the item but the drawer is empty?
Because adding the item and redrawing the drawer are separate steps. The item reached Shopify’s cart, so the cart page shows it, but the script that updates the drawer failed or received no HTML. Shopify’s Cart API returns sections that fail to render as null without failing the request, so the error is easy to miss. Check the browser console and the add-to-cart response.
Can an app cause the cart drawer to open empty?
Yes. Bundle, upsell and cart apps often change what happens when a shopper clicks Add to cart, and some inject code into your theme. Switch off app embeds one at a time on a duplicate theme and test after each. If the drawer works with one app off, contact that app’s developer through Settings > Apps > Get support in your Shopify admin.
Will updating my theme fix the empty cart drawer?
Only if the cause is a bug the theme developer has fixed in a newer version. Install a fresh copy from the Theme Store and test it first. If the drawer works there, the cause is in your code edits or apps, and an update may not carry your edits over. Shopify adds the updated theme as a new copy, so you can test before publishing.
Sources
- Shopify.dev: Cart API reference (add.js, bundled section rendering)
- Shopify.dev: Section Rendering API (section IDs)
- Shopify Help Center: extend your theme with apps (app embeds)
- Shopify Help Center: duplicating themes
- Shopify Help Center: updating themes
- Shopify Help Center: troubleshooting your online store theme
- Shopify Help Center: getting support for third-party apps
- Shopify Help Center: theme settings (cart type)
- Shopify Community thread (not official): add-to-cart drawer empty until refresh, bundle app conflict
- Shopify Community thread (not official): cart drawer does not update automatically (Dawn theme)