Changing quantity selector to a dropdown

risarodil
Tourist
7 0 3

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.

Replies 13 (13)

oscprofessional
Shopify Partner
15868 2373 3075

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" />
<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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
risarodil
Tourist
7 0 3

@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
Shopify Partner
96 2 16

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)

 

Jahangir | EFOLI
- Was my reply helpful? Please Like and Accept Solution!
- Selling Personalized Products? Try Inkybay | For bulk variant order, check MultiVariants
risarodil
Tourist
7 0 3

@Jahangir thank you!!

Jahangir
Shopify Partner
96 2 16

@risarodil,

You're most welcome.

Jahangir | EFOLI
- Was my reply helpful? Please Like and Accept Solution!
- Selling Personalized Products? Try Inkybay | For bulk variant order, check MultiVariants
Liberty22
Tourist
3 0 0

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
Tourist
3 0 0

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
Shopify Partner
293 9 37

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

Emilia7 | eFoli
-Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants
liuyanyan
Tourist
16 0 1

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
Shopify Partner
15868 2373 3075

Hi @liuyanyan ,

Share the screenshot please.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
ronanweb
Visitor
1 0 0

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
Excursionist
18 0 7

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
Shopify Partner
182 11 15

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.

Multivarinats bulk order drop-down with inventory.jpg

 

Trapa | EFOLI
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants