How to Open the Cart Drawer After Adding a Bundle to Cart

When your theme (or a third-party app) has a slide-out cart, you can make it open automatically after the customer clicks Add to Cart. There are two ways to do this. Try the first one; it needs no code.


If you have not built your first bundle yet, start with our guide on how to create a bundle on Shopify.


Method 1: Use Shopify's standard cart actions (no code)

Shopify's standard cart actions let apps add items through the theme's own cart, so the drawer refreshes and opens by itself. Shopify's Horizon theme and themes built on it support them, and more themes and cart drawer apps are adding support.


  • In Shopify Admin go to Online Store → Themes.
  • Click Customize on your live theme.
  • Navigate to any bundle product page.
  • In the left sidebar, select the Bundle Information app block (or the Bundle Buy Buttons block if you use it).
  • Under Advanced settings, check Use Shopify's standard cart actions to add to cart.
  • Make sure After adding bundle to cart is set to Show the cart.
  • Click Save and test on your storefront.

Heads-up: If the page reloads or goes to the cart page instead of opening the drawer, your theme does not support standard cart actions yet. Uncheck the setting and use Method 2.


Method 2: Open the drawer with a small script

1. Stop Bundly from showing the cart page

  • In Shopify Admin go to Online Store → Themes.
  • Click Customize on your live theme.
  • Navigate to any bundle product page.
  • In the left sidebar, select the Bundle Information app block.
  • Under Advanced settings, set After adding bundle to cart to Do nothing.
  • Click Save.

2. Listen for the submit event and open the drawer

  • Still inside the Bundle Information app block, find the Custom Liquid setting.
  • Paste code like the snippet below, replacing the placeholder with the function your store uses to open its cart drawer.
  • Save the changes and test on your storefront.

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      /* Replace with your drawer's open method */
      openCartDrawer();
    }
  });
</script>

Heads-up: Every cart drawer exposes its own JavaScript function or event to open it. You'll need the correct call for your specific theme or upsell app. The snippets below only work with Use Shopify's standard cart actions to add to cart unchecked.


Ready-made snippets for popular drawers

Monster Cart Upsell

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      window.monster_refresh();
    }
  });
</script>

AMP Slide Cart Drawer

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      window.SLIDECART_UPDATE();
      window.SLIDECART_OPEN();
    }
  });
</script>

Prestige theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      document.dispatchEvent(new Event('cart:refresh'));
      document.querySelector('cart-drawer').show();
    }
  });
</script>

Sense theme (built-in drawer)

<script id="bundly-add-to-cart-listener">
  document.addEventListener('bundly:afterAddBundleToCart', async (event) => {
    if (event.detail.success) {
      const cartDrawer = document.querySelector('cart-drawer');
      const sectionIds = cartDrawer.getSectionsToRender().map((section) => section.id);
      const sections = await fetch(`${window.Shopify.routes.root}?sections=${sectionIds}`).then((response) => response.json());
      cartDrawer.classList.remove('is-empty');
      cartDrawer.renderContents({ sections });
    }
  });
</script>

Stretch theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      document.dispatchEvent(new Event('cart:refresh'));
      document.querySelector('cart-drawer').show();
    }
  });
</script>

Concept theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      document.dispatchEvent(new Event('cart:refresh'));
      document.querySelector('cart-drawer').show();
    }
  });
</script>

Sydney theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      const cart = document.querySelector('cart-drawer');
      fetch(`${window.location.pathname}?sections=${cart.getSectionsToRender().map((section) => section.id)}`)
        .then((response) => response.json())
        .then((response) => {
          cart.renderContents({ sections: response });
          cart.open();
        });
    }
  });
</script>

Madrid theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      const variantId = document.querySelector('.bundly__block').dataset.variantId;
      const cart = document.querySelector('cart-drawer');
      fetch(`${window.location.pathname}?sections=${cart.getSectionsToRender().map((section) => section.id)}`)
        .then((response) => response.json())
        .then((response) => {
          cart.renderContents({ id: variantId, sections: response });
        });
    }
  });
</script>

Shrine PRO theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      const variantId = document.querySelector('.bundly__block').dataset.variantId;
      const cart = document.querySelector('cart-drawer');
      fetch(`${window.location.pathname}?sections=${cart.getSectionsToRender().map((section) => section.id)}`)
        .then((response) => response.json())
        .then((response) => {
          cart.classList.remove('is-empty');
          cart.renderContents({ id: variantId, sections: response });
        });
    }
  });
</script>

Stiletto theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      const quickCart = window.Shopify.theme.sections.instances.find((instance) => instance.container.matches('.quick-cart'));
      quickCart.refreshQuickCart();
      quickCart.openQuickCart();
    }
  });
</script>

Eclipse theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      const cartDrawer = document.querySelector('cart-drawer');
      cartDrawer.refetchContents();
      cartDrawer.dialog.showModal();
    }
  });
</script>

Minimog theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', async (event) => {
    if (event.detail.success) {
      await MinimogTheme.Cart.refreshCart();
      await MinimogTheme.Cart.renderNewCart();
      MinimogTheme.Cart.openCartDrawer();
      MinimogEvents.emit('ON_CART_UPDATE', MinimogTheme.Cart.cart);
    }
  });
</script>

Focal theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
        bubbles: true,
        detail: {
          openMiniCart: true,
        }
      }));
    }
  });
</script>

Maker theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', async (event) => {
    if (event.detail.success) {
      theme.cart.fetchTotals();
      await theme.cart.updateAllHtml();
      theme.drawer.open("right", "cart-drawer", document.querySelector('.bundly__add_to_cart_button'));
    }
  });
</script>

Motion theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      document.dispatchEvent(new CustomEvent('ajaxProduct:added'));
    }
  });
</script>

Flux theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      const productId = document.querySelector('.bundly__block').dataset.productId;
      const cart = document.querySelector('cart-drawer');
      fetch(`${window.location.pathname}?sections=${cart.getSectionsToRender().map((section) => section.id)}`)
        .then((response) => response.json())
        .then((response) => {
          cart.renderContents({ id: productId, sections: response });
          cart.classList.remove('is-empty');
        });
    }
  });
</script>

Woodstock theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      const productId = document.querySelector('.bundly__block').dataset.productId;
      const cart = document.querySelector('cart-drawer');
      fetch(`${window.location.pathname}?sections=${cart.getSectionsToRender().map((section) => section.id)}`)
        .then((response) => response.json())
        .then((response) => {
          cart.renderContents({ id: productId, sections: response });
          cart.classList.remove('is-empty');
        });
    }
  });
</script>

Horizon theme (built-in drawer)

<script id='bundly-add-to-cart-listener'>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      const response = JSON.parse(event.detail.serverResponse);
      document.dispatchEvent(
        new CustomEvent('cart:update', {
          bubbles: true,
          detail:{
            data: {
              itemCount: response.items.length,
              source: 'product-form-component'
            }
          }
        })
      );
      document.querySelector('cart-drawer-component').open();
    }
  });
</script>

Palo Alto theme (built-in drawer)

<script id="bundly-add-to-cart-listener">
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      const cart = document.querySelector('cart-element#cart-drawer');
      cart.renderCartDrawer();
      cart.openCartDrawer();
    }
  });
</script>

Need a different drawer?

If your theme or app isn't listed, locate the JavaScript method it uses to open the drawer and drop it into the generic template from step 2. If you run into trouble, just send us a note, include your theme name or drawer app, and we’ll help you wire it up.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us