Skip to main content

Disabling the Cart Drawer

Many themes open a cart drawer after a product is added to the cart. Inside the mobile app, the app has its own native cart, so the website's cart drawer is redundant - and it covers the page the customer is looking at.

Every theme opens its cart drawer differently, so there's no single snippet that works everywhere. Find which of the patterns below your theme uses, then use the matching code.

Don't just hide the drawer with CSS

Hiding the drawer with display: none usually isn't enough. When a theme opens its drawer, it typically also shows a dark overlay and locks page scrolling (for example by adding a class like overflow-hidden to <body>). If only the drawer is hidden, the customer is left with a dimmed page that can't be scrolled. Stop the drawer from opening instead.

Finding how your theme opens the drawer​

Open your storefront in a desktop browser, add a product to the cart so the drawer opens, then right-click the drawer and choose Inspect. Look at the drawer's outer element:

What you seePattern
A tag with a dash in its name, such as <cart-drawer> or <cart-notification>Custom element - e.g. Dawn and themes built on it
Attributes like x-data, x-show="$store.xMiniCart.isOpen"Alpine.js store - e.g. Maximize
Neither - but the theme's cart script listens for an event such as cart:openCustom event

The snippets below are written for an app-only script, so the cart drawer keeps working normally on the regular website.

Custom element themes​

Dawn, and the many themes built on it (for example Volume), render the drawer as a <cart-drawer> custom element - or <cart-notification> when the cart type is set to Notification. After a product is added, the theme calls the element's open() method.

Replace open() with an empty function on the element, so nothing can open it - not adding to cart, not the cart icon, not quick view:

document.querySelectorAll('cart-drawer, cart-notification').forEach(function (cart) {
  cart.open = function () {};
});

If your theme uses a different tag name, replace cart-drawer, cart-notification with it.

Only after adding to cart

Some Dawn-based themes only auto-open the drawer when the element has an open-after-adding class (Volume is one). If you only want to stop that automatic opening, and keep the drawer working from the cart icon, remove the class instead:

document.querySelector('cart-drawer')?.classList.remove('open-after-adding');

Alpine.js themes​

Some themes (for example Maximize) are built with Alpine.js and keep the drawer's state in an Alpine store - you'll see it in the drawer's x-show attribute, e.g. $store.xMiniCart.isOpen. The theme calls handleOpen() on the store after a product is added, and some cart updates reopen it through reLoad(true).

Override both on the store:

function disableMiniCart() {
  var miniCart = window.Alpine && window.Alpine.store('xMiniCart');
  if (!miniCart) return false;

  // never open the drawer
  miniCart.handleOpen = function () {};

  // still refresh the cart contents, but without opening the drawer
  var reLoad = miniCart.reLoad;
  miniCart.reLoad = function () {
    return reLoad.call(this, false);
  };
  return true;
}

// Alpine may still be starting up - try again once it has initialized
if (!disableMiniCart()) {
  document.addEventListener('alpine:initialized', disableMiniCart, { once: true });
}

Store and method names differ between Alpine themes. Search your theme's cart script (e.g. assets/cart.js) for Alpine.store( to find the store that controls the drawer and the method that opens it.

Event-based themes​

Some themes open the drawer by dispatching an event, such as cart:open, that the drawer listens to. Listen for the same event in the capture phase and stop it before it reaches the drawer:

document.addEventListener('cart:open', function (event) {
  event.preventDefault();
  event.stopImmediatePropagation();
}, { capture: true });
  • capture: true makes this listener run before the theme's own listeners.
  • stopImmediatePropagation() stops the theme's listeners from handling the event, and preventDefault() cancels the default action.

Replace cart:open with the event your theme uses - search the theme's cart drawer script (usually assets/cart-drawer.js or similar) for addEventListener(.

Cart drawer apps​

If the drawer comes from a third-party cart app rather than your theme, check the app's settings first - many let you turn off auto-opening, or expose their own JavaScript API to control it. Call that API from your app-only script, just like the examples above.