Changing quantity selector to a dropdown

7 0 1


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 %}         
            {% endif %}


Would appreciate the help.


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. 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" />
  #quantity {
    padding: 5px;
    width: 35px;
    border: 1px solid #555;


  • 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

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
7 0 1


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?


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)Quantity selector (drop-down)


7 0 1

@jahangir thank you!!