Events on Bundle Pages

Bundly emits a set of custom JavaScript events on bundle pages. These let you hook into key interactions (like toggling modals, changing options, or adding bundles to the cart) and run your own custom logic.

Every event bubbles up to document , so you can listen anywhere:

document.addEventListener('bundly:afterAddVariant', (e) => {
  console.log(e.detail.title, e.detail.price, e.detail.currency);
});

All before  events are cancelable. To cancel the event:

document.addEventListener('bundly:beforeToggleProductDialog', (e) => {
  e.preventDefault(); // prevents modal from opening
});

Fields on Every Event

Besides the fields listed per event below, every event.detail  carries:

The after  event carries the same fields as its before  event, plus the result fields marked (after only).

Bundle Load Event

Details (example values):

• bundleProductId : '8570513260706' , the bundle product

Variants restored from the URL, and variants selected automatically when the page opens, are applied between these two events.

Block Update Events

Details (example values):

• productId : '8570513260706' , the bundle product
• variantId : '45579422990498' , the bundle variant

These two fields are absent when the block that refreshes is the bundle list on a product page, because that block belongs to a product and not to a bundle.

Add/Remove Variant Events

Details (example values):

• componentIndex : '0' , position of the component in the bundle
• componentVariantIndex : '1' , position of the slot inside that component
• variantId : '43553180418210' , the variant that was added or removed
• productId : '7760014049442' , the product that variant belongs to
• title : 'Sample Product - Blue / Large' , the same title Shopify puts on the cart line
• sku : 'SP-BL-L'
• price : 24.99 , the price of this variant on its own, before the bundle discount, in the customer's currency
• currency : 'USD'
• quantity : 2 , how many units of this variant the component adds
• bundleProductId : '8570513260706' , the bundle product

Add to Cart Events

Details (example values):

• formData : the FormData  instance that is sent to /cart/add.js
• bundleProductId : '8570513260706' , the bundle product
• bundleTitle : 'Build Your Own Box'
• bundleHandle : 'build-your-own-box'
• currency : 'USD'
• bundleOriginalPrice : 89.97 , total of all components before the bundle discount
• bundlePrice : 71.98 , what the customer pays for the bundle
• bundleItems : an array of the selected variants, each with productId , variantId , title , sku , price  and quantity . A variant selected more than once in the same component is one entry, and its quantity  counts all of the selections
• success : true  or false  (after only)
• error : 'Error message here'  (after only, on failure)
• serverResponse : '{"items":[...]}' , the raw response from /cart/add.js  (after only, on success)

Example: send the bundle to your own analytics after a successful add to cart.

document.addEventListener('bundly:afterAddBundleToCart', (e) => {
  if (!e.detail.success) return;

  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'add_to_cart',
    currency: e.detail.currency,
    value: e.detail.bundlePrice,
    items: e.detail.bundleItems.map((item) => ({
      item_id: item.sku,
      item_name: item.title,
      item_variant: item.variantId,
      price: item.price,
      quantity: item.quantity,
    })),
  });
});

Variant Option Events

Details (example values):

• componentIndex : '0'
• componentVariantIndex : '1'
• productId : '7760014049442' , the product whose option changed
• optionName : 'Size'
• optionValue : 'Large'

Dialog Events

Details of the toggle events (example values):

• newState : 'open'  or 'closed'
• componentIndex : '0'
• componentVariantIndex : '1'
• productId : '7760014049442' , the product shown in the dialog

Details of the navigate events (example values):

• direction : 'previous'  or 'next'
• productId : '7760014049442' , the product shown before the move

Bundle Summary Events

These fire on the summary panel that shows the selected items and the count.

Analytics Events (Web Pixels)

Bundly also publishes customer events to Shopify's analytics layer, so you can send bundle activity to GA4, Meta, or any other destination from a custom web pixel (Settings → Customer events → Add custom pixel).

analytics.subscribe('bundly:bundle_added_to_cart', (event) => {
  console.log(event.customData.bundle_price, event.customData.bundle_items);
});

Need More Events?

Let us know what you're building, we're happy to add new hooks.