Skip to main content
Troubleshooting

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

If your theme's quantity buttons do not change the selected offer, first check which quantity control your discount uses. A typed quantity being reduced to a tier is different from a button that never sends the widget an update.

I typed 8, but the cart received 6

In the usual setup without Bundlex's own quantity selector, the theme input navigates between configured tiers. An exact tier quantity can select that card, while an in-between quantity can leave the current offer selected. Add to cart then uses that offer's quantity. Typing 8 with Buy 6 selected does not guarantee 8 items.

To let shoppers choose flexible quantities, enable Quantity selector on the discount's Add-ons tab when available. It works together with subscriptions. If it is disabled, the dashboard names the setting that blocks it; see settings you can't combine it with.

When Bundlex's selector is active, the theme input reflects its result rather than controlling a second quantity. Some stores have a separate support-enabled native-quantity setup for plain tiers; that is not the default. See theme quantity behavior.

If optional offer selection is on and no offer is selected, the theme controls work normally and do not navigate the offer cards. The checks below concern an active offer in the tier-navigation setup.

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 can break when the theme changes the input without dispatching an event, or when the widget is watching a different quantity input. An off-tier number alone does not prove an event problem and does not guarantee that the offer is deselected.

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

The widget listens for native change and input events on the quantity input. Typing normally fires these events; a theme's custom +/- button may not.

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 Bundlex Bundles.
  3. Enable Show advanced settings, then 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. If support previously configured an override, it can take precedence over the theme field.

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.

Was this article helpful?

Your feedback helps us improve our docs.

Thanks - we'll keep improving this article.

Want to chat with our team? Still have a question?

Still need help?

Our team is one click away. Send us a message and we'll get back to you.

We use a few cookies to keep this site working, measure how it is used, and power our chat widget when you open it. See our cookie policy.