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>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    /* Replace with your drawer's open method */
    openCartDrawer();
  });
</script>

Ready-made snippets for popular drawers

Monster Cart Upsell

<script>
  document.addEventListener('bundly:afterAddBundleToCart', (event) => {
    window.monster_refresh();
  });
</script>

Prestige theme (built-in drawer)

<script>
  document.addEventListener('bundly:afterAddBundleToCart', function() {
    document.dispatchEvent(new Event('cart:refresh'));
    document.querySelector('cart-drawer').show();
  });
</script>

Sydney theme (built-in drawer)

<script>
  document.addEventListener('bundly:afterAddBundleToCart', function() {
    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>
  document.addEventListener('bundly:afterAddBundleToCart', function() {
    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>
  document.addEventListener('bundly:afterAddBundleToCart', function() {
    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>
  document.addEventListener('bundly:afterAddBundleToCart', function() {
    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>
  document.addEventListener('bundly:afterAddBundleToCart', function() {
    const cartDrawer = document.querySelector('cart-drawer');
    cartDrawer.refetchContents();
    cartDrawer.dialog.showModal();
  });
</script>

Minimog theme (built-in drawer)

<script>
  document.addEventListener('bundly:afterAddBundleToCart', async function() {
    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>
  document.addEventListener('bundly:afterAddBundleToCart', async function() {
    document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
      bubbles: true,
      detail: {
        openMiniCart: true,
      }
    }));
  });
</script>

Motion theme (built-in drawer)

<script>
  document.addEventListener('bundly:afterAddBundleToCart', async function() {
    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.