Shopify Cart Drawer Not Opening: AJAX, Theme, and App Fixes (2026)

Quick Fix: Reduce Script Pressure Around the Cart

First Identify Which Cart Path Is Failing

Do not start by editing Liquid. Reproduce the issue in four places: product page, collection grid, homepage featured product, and quick-view modal. Many Shopify stores have separate add-to-cart code for each surface. The drawer may work on the product template while collection cards still post directly to the cart page.

Open DevTools, click Add to cart, and watch the Network tab. A healthy AJAX flow usually posts to /cart/add.js, gets a successful response, fetches updated cart sections or /cart.js, and opens the drawer. A redirect to /cart means the form is using normal HTML submission or the AJAX handler did not attach.

If add-to-cart works but purchases still disappear later, compare this with the Shopify add to cart but no sales checklist and the checkout button debugging guide.

Check Theme Cart Settings Before Touching Code

In many Online Store 2.0 themes, the drawer is controlled by a theme setting. Go to Online Store, Customize, Theme settings, Cart, then confirm the cart type is set to drawer or notification instead of page. Save, preview, and test in an incognito window.

Then duplicate the live theme and preview an unmodified Dawn theme. If Dawn opens the drawer and your live theme does not, the problem is theme code or an installed storefront app. If Dawn also redirects to cart, look for settings, product availability, or a page-builder button that intentionally redirects.

Stores that have installed and removed multiple cart tools should also run the app leftovers cleanup checklist. Old snippets can keep listening for cart events long after the app is gone.

Fix the AJAX Add-to-Cart and Drawer Refresh Flow

A drawer needs two separate jobs: add the item, then render the updated drawer. Developers often fix the first job and forget the second. The result is a cart count that changes only after refresh, a drawer that opens empty, or a product card that sends shoppers to the cart page.

async function addToCart(form) {
  const response = await fetch('/cart/add.js', {
    method: 'POST',
    body: new FormData(form),
    headers: { Accept: 'application/json' },
  });

  if (!response.ok) throw new Error('Add to cart failed');

  const cart = await fetch('/cart.js').then((res) => res.json());
  document.dispatchEvent(new CustomEvent('cart:refresh', { detail: { cart } }));
  document.dispatchEvent(new CustomEvent('cart:open'));
}

Your theme may use different event names. Dawn-based themes often have their own cart notification or cart drawer class. Search your theme for cart:refresh, cart:open, cart-drawer, cart-notification, and /cart/add.js, then keep one consistent event path.

Page Builders and App Embeds Can Bypass the Drawer

GemPages, PageFly, custom landing pages, quick-buy sections, and bundle widgets may render their own add-to-cart button. Those buttons can be configured to redirect to cart, open a mini cart, or call a helper script. If only page-builder pages fail, fix the element setting first before rewriting theme code.

Disable app embeds in a duplicate theme, then retest. Re-enable them one by one, starting with cart drawers, free gifts, bundles, subscriptions, upsells, search, personalization, chat, and pixels. The same debugging flow in the app scripts slowing down Shopify guide applies here.

For broader script cleanup, use the third-party script impact guide, unused code cleanup guide, and complete Shopify speed optimization guide.

Manual Shopify Cart Drawer Debugging Checklist

Google's Interaction to Next Paint guidance is useful here because a delayed cart drawer is often a responsiveness problem. If mobile taps lag, read the Shopify INP guide and test again after script cleanup.

When the drawer is part of a wider revenue leak, use professional Shopify speed optimization or Thunder pricing to decide whether app automation or expert cleanup is the faster path.

FAQ