BYOB bundle not appearing in cart after adding (theme compatibility fix)

The problem

When a customer adds a BYOB bundle to their cart, the cart icon or drawer doesn't update. The bundle was added successfully, but the theme's cart UI doesn't show it until the customer refreshes the page.

This happens because the BYOB widget uses its own add-to-cart flow. Some themes only update their cart UI when products are added through the theme's native product form. The BYOB widget dispatches a simple-bundles-byob:add-to-cart event after adding, but not all themes listen for it.

Who this affects

Stores using:

• Themes with custom cart drawers or AJAX cart functionality
• Third-party cart drawer apps
• Heavily customized Dawn-based themes

If your theme uses Shopify's standard cart page (no drawer, no AJAX updates), you won't see this issue.

The fix

Add a small script that listens for the BYOB add-to-cart event and triggers a cart refresh. This works for most themes.

Add the script with a Custom Liquid section

1. Go to Online Store > Themes
2. Click Customize on your live theme
3. Use the template selector at the top to open the Default product template
4. Click Add section and choose Custom Liquid
5. Paste the code below into the Custom Liquid field
6. Rename the section to SB: BYOB cart refresh (optional, helps you find it later)
7. Save

The code

Copy this entire block:

<script>
(function() {
  // Set to true if you want the cart drawer to open after adding a BYOB bundle
  const openCartDrawerAfterByobAdd = true;
  
  // How often to check if the cart updated (milliseconds)
  const cartUpdateInterval = 500;
  
  // How many times to check before giving up
  const cartUpdateAttempts = 10;

  async function getCart() {
    const root = window.Shopify?.routes?.root || '/';
    const response = await fetch(root + 'cart.js', {
      credentials: 'same-origin',
      headers: { Accept: 'application/json' }
    });
    if (!response.ok) throw new Error('Cart request failed: ' + response.status);
    return response.json();
  }

  async function waitForCartUpdate(previousCart) {
    for (let attempt = 0; attempt < cartUpdateAttempts; attempt++) {
      await new Promise(r => setTimeout(r, cartUpdateInterval));
      const currentCart = await getCart();
      if (currentCart.item_count !== previousCart.item_count ||
          currentCart.total_price !== previousCart.total_price ||
          currentCart.token !== previousCart.token) {
        return currentCart;
      }
    }
    return null;
  }

  document.addEventListener('simple-bundles-byob:add-to-cart', async function() {
    try {
      const previousCart = await getCart();
      const updatedCart = await waitForCartUpdate(previousCart);
      if (!updatedCart) return;
      
      // Tell the theme the cart changed
      document.dispatchEvent(new CustomEvent('cart:update', {
        bubbles: true,
        detail: { resource: updatedCart, data: { source: 'simple-bundles-byob', sections: {} } }
      }));
      
      // Open cart drawer if enabled
      if (openCartDrawerAfterByobAdd) {
        var drawer = document.querySelector('cart-drawer-component');
        if (drawer && drawer.open) drawer.open();
      }
    } catch (e) {
      console.error('Unable to update cart after BYOB add:', e);
    }
  });
})();
</script>

Configuration options

You can adjust two settings at the top of the script:

Theme-specific notes

Most themes respond to the cart:update event. If your cart drawer still doesn't open, your theme may use a different method. Common alternatives:

• Dawn and Dawn-based themes: The code above should work as-is
• Debut: Add $(document).trigger('cart.requestComplete'); after the cart:update dispatch
• Custom cart drawer apps: Check the app's documentation for their cart refresh event

If the cart drawer selector cart-drawer-component doesn't match your theme, inspect your cart drawer element and update the selector on the line that calls .open().

Testing

1. Open a BYOB product page
2. Add items to fill the required slots
3. Click "Add bundle to cart"
4. The cart icon should update and (if enabled) the cart drawer should open

If the cart still doesn't update, check your browser console for errors and contact support with the error message.