Restrict Quantity Selector Variants Based on Inventory on the Product and Cart Pages (Need Code)

New Member
1 0 0

Hello, We are new here and have been looking through all the past forum posts on this topic and it's not completely clear how to do what we are looking for. 

We need to be able to restrict the quantity selector from being incremented if the inventory is not available for each variant. We saw this code

<input type="number" id="Quantity-{{ }}" name="quantity" max="{{ product.selected_or_first_available_variant.inventory_quantity}}" value="1" min="1" class="product-form__input" pattern="[0-9]*">

Which this ^ appears to work fine for products without variants. We have Variants. 

Then it says

If you have variants then you have to change max value using Js from Asset->theme.js from variants select callback function.  find if(variants)

But doesn't exactly say how to add this restriction in code for non-coding people. 


  1. What exact code do I need to add to restrict the quantity selector for variants?
  2. Where do I need to add this code exactly in my theme js file?
  3. AND... what/where do I add this same restriction code on the cart page? 

This person is asking for the same restriction on the quantity selector for the cart page with no answers...

I chatted with support and they said they have no answer for this and gave me the same links to forum posts I've already visited. They suggested that I pay for an expert to write the code or pay for an app that does something similar. I don't think we should have to pay for something that seems like it should be basic core functionality. 

I'm really hoping that someone can reply that has already figured this out!

Thanks in advance!