Skip to main content

Cart Drawer Integration

MOD Bundles automatically tries to open your theme's cart drawer after adding a bundle to cart. This works out of the box with many popular themes, but some themes require additional configuration.

Updated yesterday

How It Works

When a customer adds a bundle to cart, MOD Bundles:

  1. Adds the bundle items to the Shopify cart via AJAX

  2. Attempts to detect your theme and trigger the appropriate cart drawer method

  3. Falls back through multiple methods if the initial attempt fails

The goal: Open your cart drawer and show the updated contents without a page refresh.

Cart Behavior Options

Each bundle type has settings to control what happens after adding to cart.

Setting Location

In Theme Customizer:

  1. Go to Online Store → Themes → Edit theme

  2. Navigate to a page with your bundle

  3. Click on the bundle block (Mix & Match, Pack Builder, or Collection Bundle)

  4. Find Cart Options or Cart Settings section

Available Actions

Setting

Behavior

Open Cart Drawer (default)

Attempts to open your theme's cart drawer

Redirect to Cart Page

Sends customer directly to /cart page

Stay on Current Page

Does nothing—customer stays on the bundle page

Recommendation: Start with "Open Cart Drawer". If it doesn't work with your theme, try the other options or configure Custom Cart Events.

Themes That Work Automatically

MOD Bundles includes built-in support for many popular themes. These should work without any configuration:

Shopify Free Themes

  • Dawn (and Dawn-based themes)

  • Sense

  • Craft

  • Refresh

  • Ride

  • Trade

  • Spotlight

Premium Themes (Verified)

Theme

Status

Notes

Impulse

✓ Verified

Works automatically

Prestige

✓ Verified

Works automatically

Warehouse

✓ Verified

Works automatically

Symmetry

✓ Verified

Works automatically

Broadcast

✓ Verified

Works automatically

Motion

✓ Verified

Works automatically

Expanse

✓ Verified

Works automatically

Fetch

✓ Verified

Works automatically

Gem

✓ Verified

Works automatically

Flex

✓ Verified

Works automatically

Turbo

✓ Verified

Works automatically

Beyond

✓ Verified

Works automatically

Blockshop

✓ Verified

Works automatically

Portland

✓ Verified

Works automatically

Stockholm

✓ Verified

Works automatically

Neat

✓ Verified

Works automatically

Reformation

✓ Verified

Works automatically

Horizon

✓ Verified

Works automatically

Palo Alto

✓ Verified

Works automatically

Concept

✓ Verified

Works automatically

Enterprise

✓ Verified

Works automatically

Other Supported Themes

These themes are detected and should work, though not all are individually verified:

  • Ascension, Alchemy, Atelier, Athens

  • Baseline, Be Yours, Boost, Boundless

  • Canopy, Debutify, Distinctive, Dwell

  • Empire, Expression, Fabric, Fame

  • Foxpad, Genie, Habitat, Handmade

  • Heritage, King, Maker, Masonry

  • Master, Maya, Mode, Monochrome

  • Narrative, North, Noire, Pinnacle

  • Pipeline, Pitch, Plantco, Purely

  • Ritual, Savor, Shark, Shella

  • Showcase, Sleek, Starter, Starlite

  • Streamline, Strong, Supply, Testament

  • Tinker, Venue, Vessel, Vision

  • Yuva, Zest

When the Cart Drawer Doesn't Open

If the drawer doesn't open after adding a bundle, try these solutions in order:

Solution 1: Use Custom Cart Events

Most themes listen for specific JavaScript events to update the cart. You can tell MOD Bundles which event(s) to dispatch.

Setting: Custom Cart Events

Location: In the bundle block settings under Cart Options

Format: Comma-separated event names

Example: theme:cart:update,cart-drawer:open

Custom Cart Events setting

Common Events by Theme Type

Theme Type

Events to Try

Shopify 2.0 themes

cart:refresh

Dawn-based themes

cart:refresh

Impulse/Streamline

ajaxProduct:added

Symmetry/Enterprise

dispatch:cart-drawer:open,dispatch:cart-drawer:refresh

Expanse/Motion/Fetch

cart:build,cart:open

Turbo

ajax:updateCart

Prestige/Warehouse

cart:refresh

Palo Alto

theme:cart:refresh

Baseline

baseline:modalcart:afteradditem

Finding your theme's event:

  1. Open your store in Chrome

  2. Press F12 to open Developer Tools

  3. Go to the Console tab

  4. Add a product to cart using your theme's normal add-to-cart button

  5. Look for any logged events or check your theme's JavaScript files

Solution 2: Redirect to Cart Page

If cart drawer integration isn't working:

  1. In the bundle block settings

  2. Change "After Adding to Cart" to Redirect to Cart Page

  3. Save

This bypasses the cart drawer entirely and sends customers to the full cart page.

Solution 3: Stay on Current Page

If you don't want any automatic action:

  1. Change "After Adding to Cart" to Stay on Current Page

  2. Customers can manually open the cart when ready

This is useful if you have a custom cart icon that updates, or if you want customers to continue shopping.

Custom and Heavily Modified Themes

If your theme is custom-built or heavily modified, the automatic detection may not work.

Option A: Find the Cart Event

Most themes use a JavaScript event to refresh the cart drawer. Ask your developer to:

  1. Find what event your theme listens for

  2. Add that event to the Custom Cart Events setting

Common patterns to look for in theme JavaScript:

document.addEventListener('cart:refresh', ...)document.addEventListener('cart:updated', ...)window.addEventListener('updateCart', ...)$(document).on('cart:change', ...)

Option B: Add Event Support to Your Theme

If your theme doesn't have a cart refresh event, a developer can add one.

Example implementation:

// In your theme's JavaScriptdocument.addEventListener('cart:refresh', function(event) {  // Your cart drawer refresh logic here  // This might involve:  // - Fetching /cart.js  // - Updating the drawer HTML  // - Opening the drawer    // Example:  fetch('/cart.js')    .then(response => response.json())    .then(cart => {      // Update cart count      document.querySelector('.cart-count').textContent = cart.item_count;            // Refresh drawer contents      refreshCartDrawer(cart);            // Open the drawer      openCartDrawer();    });});

Then add cart:refresh to the Custom Cart Events setting.

Option C: Contact Us

If you've tried the above and still can't get the cart drawer working:

  1. Contact MOD Bundles support with:
    Your theme name and version Whether it's a custom theme or purchased theme Screenshots of the issue Any browser console errors

  2. For custom themes: Have your developer contact us. We can often provide specific guidance for your theme's cart implementation.

Multiple Events

You can specify multiple events separated by commas. All events will be dispatched.

Example: cart:refresh,theme:cart:update,cart-drawer:open

This is useful when:

  • Your theme needs multiple events for different updates

  • You're using third-party apps that also need cart notifications

  • You want to ensure compatibility across theme updates

Troubleshooting

Cart drawer opens but shows old contents

The drawer is opening but not refreshing. Try:

  1. Add a refresh event before the open event: cart:refresh,cart:open

  2. Check if your theme has a specific refresh method

Cart drawer opens empty

The drawer opened before the cart finished updating.

  1. This is sometimes a timing issue

  2. Try enabling "Show Bundle Items Text in Cart" to help identify the bundle

  3. Check for JavaScript errors in the console

"Add to Cart" button does nothing

  1. Open browser Developer Tools (F12)

  2. Check the Console tab for errors

  3. Verify the bundle is properly configured with products

  4. Try in incognito mode to rule out browser extensions

Cart count doesn't update

The cart drawer may open but the header cart count stays the same.

  1. Most themes update this separately from the drawer

  2. Try adding your theme's cart count update event to Custom Cart Events

  3. The count should update on page refresh

Works on desktop but not mobile

Some themes have different cart implementations for mobile.

  1. Check if your theme has a mobile-specific cart drawer

  2. Try the "Redirect to Cart Page" option for mobile users

  3. Contact your theme developer for mobile cart event names

Advanced: How Detection Works

For developers curious about the implementation, MOD Bundles uses this detection order:

  1. Custom Events — If configured, dispatches these first

  2. Theme Detection — Checks window.Shopify.theme.name, window.theme.name, and DOM patterns

  3. Theme-Specific Methods — Uses known methods for detected themes

  4. Common Selectors — Tries clicking common cart drawer triggers:
    ​[data-cart-drawer-trigger] [data-drawer-id="cart"] .cart-drawer-trigger .header__icon--cart #cart-icon-bubble .js-drawer-open-cart

  5. Global Functions — Tries calling:
    ​window.refreshCart() window.openCartDrawer() window.theme.cart.open() window.theme.ajaxCart.loadCart()

  6. Fallback — Opens/refreshes the element if present

Testing Your Integration

  1. Add a bundle to cart — Complete all selections and click Add to Cart

  2. Check drawer opens — Should slide out with bundle items

  3. Verify contents — Bundle items should be visible (grouping varies by theme)

  4. Check pricing — May show original price briefly, then update

  5. Proceed to checkout — Verify discounts apply correctly

If any step fails, refer to the troubleshooting section above.

Related Articles

Did this answer your question?