Drop down Quantity selector supply theme

chile888
Tourist
10 0 4

Hey,

I was wondering how I would be able to add a drop down quantity selector where the maximum value was equal to the amount of products i had left in stock and if i would only be able to apply it for certain collections only. If there is any code i could add or a specific app that i could look into that would be great!

 

Thank you

0 Likes
florinanghel
Shopify Partner
102 15 17

In the debut theme, the quantity code from product-template.liquid

{% if section.settings.show_quantity_selector %}
              <div class="product-form__controls-group">
                <div class="product-form__item">
                  <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                  <input type="number" id="Quantity-{{ section.id }}"
                    name="quantity" value="1" min="1" pattern="[0-9]*"
                    class="product-form__input product-form__input--quantity" data-quantity-input
                  >
                </div>
              </div>
            {% endif %}

would be replaced by

{% if section.settings.show_quantity_selector %}
        		{% if product.tags contains 'selectable-qty' and product.selected_or_first_available_variant %}
                  <div class="product-form__controls-group">
                    <div class="product-form__item">
                      <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                      <select type="number" id="Quantity-{{ section.id }}"
                        name="quantity"
                        class="product-form__input product-form__input--quantity" data-quantity-input
                      >
                        <option value="1">1</option>
                        {% for q in (2..product.selected_or_first_available_variant.inventory_quantity) %}
                        	<option value="{{ q }}">{{ q }}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
        		{% else %}
                  <div class="product-form__controls-group">
                    <div class="product-form__item">
                      <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                      <input type="number" id="Quantity-{{ section.id }}"
                        name="quantity" value="1" min="1" pattern="[0-9]*"
                        class="product-form__input product-form__input--quantity" data-quantity-input
                      >
                    </div>
                  </div>
        		{% endif %}
            {% endif %}

You would tag the products you want to behave like this with selectable-qty.

 

0 Likes
chile888
Tourist
10 0 4

Would this work for the supply theme though?

0 Likes