The theme's +/- quantity buttons don't change the selected offer

Bundlex keeps the quantity input and the selected offer in sync, but the sync is only fully two-way when your theme cooperates. Selecting an offer always updates the quantity, but updating the quantity only re-selects the matching offer if your theme's controls fire standard browser events. This article explains why that happens and how to fix it.

How the sync is supposed to work

There are two directions to keep in mind:

• Offer to quantity: when a shopper clicks an offer (for example Buy 1, Buy 2, Buy 3), the widget sets the theme's quantity input to that offer's quantity. This always works because Bundlex is the one setting the value.
• Quantity to offer: when a shopper changes the quantity with the theme's +/- buttons or by typing, the widget should detect the new value and select the offer whose quantity matches exactly.

The second direction is the one that breaks on some themes. The match is exact, so a quantity that does not line up with any offer's quantity simply leaves no offer selected and falls back to normal Shopify behavior. That part is intentional. The problem we are addressing here is when a valid quantity still fails to re-select its offer.

Why the +/- buttons don't update the offer

To stay in sync with the quantity, the widget listens for native change and input events on the quantity input. When a shopper types a number into the field, the browser fires those events automatically and everything works.

Many themes, however, implement their +/- buttons by setting the input's value directly in JavaScript (for example input.value = newValue). Assigning a value this way does not fire change or input events. The number changes on screen, but no event is dispatched, so the widget never learns that the quantity moved and the selected offer stays where it was.

This is not specific to any one framework. Any programmatic value assignment skips the events. Only real user interaction, like typing, fires them. Themes built on Shopify's <quantity-input> custom element (used by Dawn) dispatch a change event after updating the value, which is why those themes work out of the box.

How to confirm this is the cause

1. Open your browser's developer tools (F12, or Cmd+Option+I on Mac) and go to the Console tab.
2. Click a +/- button on the product page.
3. Watch the quantity field. If the number changes visually but the selected offer does not update, the buttons are setting the value without firing an event.

Themes that tend to hit this use custom +/- buttons that set the value directly, rather than Shopify's <quantity-input> web component.

The fix: dispatch a change event

This fix lives in the theme, so it is a quick change for whoever maintains your theme code. Ask your theme developer to dispatch a change event right after the +/- handler sets the new quantity value:

input.dispatchEvent(new Event('change', { bubbles: true }));

Here input is the quantity input element being updated. This lets every app and script on the page react to quantity changes, not just Bundlex, and it should not affect any other functionality on the page.

The duplicate quantity input case (sticky cart bars)

Some themes add a sticky or fixed "Add to cart" bar that duplicates the product form, including a second quantity input. Both inputs often share the same name="quantity" and sometimes even the same id. Bundlex's default selector, input[name="quantity"], can then attach to the wrong one, so the offer and the main form's quantity never line up.

How to confirm there are duplicates

1. Open developer tools and go to the Console tab.
2. Run: document.querySelectorAll('input[name="quantity"]').length
3. If the result is greater than 1, your page has more than one quantity input.

The fix: a custom Quantity input selector

Point Bundlex at the main form's quantity input only, excluding the sticky bar. Add a custom selector in the app embed settings:

1. In your Shopify admin, open the Theme Editor.
2. Go to App embeds and find the Bundlex embed.
3. Set the Quantity Input Selector to a selector that targets only the main form's quantity input.

The exact selector depends on your theme. Two examples that work on some themes:

.product-form__item--submit input[name="quantity"]
form.shopify-product-form:not(#addtocart-sticky form) input[name="quantity"]

If neither selector works for your theme, share the product page URL with support so the right selector can be identified for your specific markup.

When to reach out

If you have confirmed the +/- buttons change the value without firing an event, or that there are duplicate quantity inputs, and the fixes above do not resolve it, contact support with the product page URL. It also helps to include any [Bundlex] messages from the browser console and the HTML of the product form.