Variant quantity selector max not updating

Technical Q&A
, ,
1

Hello,

I have a product which has two variants. Variant 1 which has stock of 44. Variant 2 which has stock of 40.

When I go to the product page the variant 1 selected by default. If I add 100 to the quantity selector field it updates the amount correctly to 44. BUT if I change the variant to variant 2 and add 100 again to the quantity selector field it updates it to 44 which is the other variant’s inventory amount (variant 2 had inventory of 40).

In the theme code the max is taken from product.selected_or_first_available_variant.inventory_quantity
but it seems like it doesn’t get updated when variant is changed.

Has anyone else faced this and found a solution?

2

Hi,

Yes, this can happen because product.selected_or_first_available_variant.inventory_quantity is rendered on page load, but it doesn’t always re-render when the variant changes. That’s why your quantity selector is still showing the first variant’s inventory limit even after switching.

To fix this, you need to update the max attribute dynamically with JavaScript whenever the variant is changed. For example:

document.addEventListener('variant:change', function(event) {
  const variant = event.detail.variant;
  if (!variant) return;

  const qtyInput = document.querySelector('input[name="quantity"]');
  if (qtyInput) {
    qtyInput.setAttribute('max', variant.inventory_quantity);
  }
});

If your theme doesn’t use the variant:change event, you may need to hook into the variant selection logic it uses (often in product-form.js or global.js). The idea is the same: when the variant changes, grab its inventory_quantity and reset the quantity input’s max value.

That way, Variant 1 will cap at 44 and Variant 2 will cap at 40 as expected.

3

Hi @PK2023 ,

I hope you are doing well!

Can you please provide the store URL to generate the issue? Also, I need the collaborative code to check the code and fix it for you.