How can I adjust the quantity selector dropdown based on inventory left?

[risarodil]

Hi,

I'm using the Debut theme and I would like to change the quantity selector in the product pages where instead of the customer inputting the number, I would like them to select from a dropdown. I was able to integrate it using this code but I want the quantity to adjust based on the inventory left. Right now it's set up to "10" but if the product has 5 items left, I would like it to reflect that the dropdown would be 1-5 only.

   {% if section.settings.show_quantity_selector %}
              <div class="product-form__controls-group">
                <div class="product-form__item">
                 <label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
              <select name="quantity" id="quantity">
         {% for i in (1..10) %}
                  <option value="{{ i }}">{{ i }}</option>
          {% endfor %}         
</select>
                </div>
              </div>
            {% endif %}

Would appreciate the help.

[oscprofessional]

Check your theme settings

Many themes include the option to enable a quantity selector on product pages. To see if your theme includes this option:

1. Go to the  theme editor.

2. From the drop-down menu at the top of the page, or from the Templates menu on mobile, click Product pages.

3. Click Product pages or Product. If your theme includes the option to enable a quantity selector, then you will see a Show quantity selector checkbox in the theme editor.

4. Check the Show quantity selector checkbox.

5. Click Save.

If your theme doesn't include the option to enable a quantity selector, then you can add one by editing your theme code. Continue to follow the next steps.

Edit your theme code to add a quantity selector

To add a quantity selector to your product pages by editing your theme code:

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Templates directory, click product.liquid.

2. find the opening <form> tag in the code.

3. Between the opening <form> tag and the closing </form> tag, paste the following code:

<label for="quantity">Qty: </label>
<input min="1" type="number" id="quantity" name="quantity" value="1" />
<style>
  #quantity {
    padding: 5px;
    width: 35px;
    border: 1px solid #555;
  }
</style>

• The exact position of the code will vary theme to theme. You can experiment with putting the code in different places to find a location that you are happy with.

• Click Save

[risarodil]

@oscprofessional 

I have the quantity selector enabled, but I wanted to change it to a dropdown that reflects the amount of inventory left. Is that possible?

[Jahangir]

Hello @risarodil,

You can use the MultiVariants ‑ Bulk Order app to change the quantity input into a dropdown including inventory checking. It will show the quantity dropdown based on the available quantity in your inventory. Also, MultiVariants will change the quantity input into a dropdown for quantity selection/change in the cart page.

Here is the demo, you can take a look.

Quantity selector (drop-down)

[risarodil]

@Jahangir thank you!!

[Jahangir]

@risarodil,

You're most welcome.

[Liberty22]

Hello, Do you know a quantity discount app that works with the Multivariants app... on the product page... the hulk discount app only works in the cart...

[Liberty22]

Hello, Do you know a quantity discount app that works with the Multivariants app... on the product page... the hulk discount app only works in the cart...

[EFOLI-Emilia7]

Hello @Liberty22,

Right now, the quantity discount app will work on the product page with the MultiVariants app. You can use any discount app like hulk app that works on the cart page.

In the future, we've plans to add the feature for adding quantity discounts on the product page.

Thank you

[liuyanyan]

hello

thanks for your code

your code can work in product liquid very well

but can not work in cart liquid, if i use it

i face those problems,

the price , quantity and subtotal can not in same line

if i change the quantity, then subtotal can not automatically changed

here has the screenshot, thanks

[oscprofessional]

Hi @liuyanyan ,

Share the screenshot please.

[ronanweb]

I am wondering if you may have been answering a different question from someone else? The answer you provided to this thread is quite a bit off target.

[MichalisKouts]

Hello, i need exactly the same. Have you got a solution working for showing only the stock quantity left in the inventory, instead of 1-10 numbers? Or maybe can you set a limit different than 10?

[eFoli-Trapa]

hello @MichalisKouts 

Are you still looking for a solution?

You can use the MultiVariants ‑ Bulk Order app to change the quantity input into a dropdown including inventory checking. it will count the inventory which is imported into your Shopify store and deduct it every time your customer purchases a variant or multiple variants.

It will show the quantity dropdown based on the available quantity in your inventory. Also, MultiVariants will change the quantity input into a dropdown for quantity selection/change on the cart page.

here is a demo product that you can check.

apart from that multivariants provides tickets, mail solutions, live meetings & 24*7 live support to answer any query and solve any issue.

you can give it a try.

thank you.