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

When your theme (or a third-party app) already has a slide-out cart, you can hook Bundly into it so the drawer opens automatically after the customer clicks Add to Cart.

Step-by-step instructions

1. Stop Bundly from redirecting to 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.
• Un-check Redirect to cart after adding bundle to cart.
• 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' hx-preserve>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    if (event.detail.success) {
      /* Replace with your drawer's open method */
      openCartDrawer();
    }
  });
</script>

Ready-made snippets for popular drawers

Monster Cart Upsell

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

AMP Slide Cart Drawer

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

Stretch theme (built-in drawer)

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