Creating dropdown quantity selector

Creating dropdown quantity selector

martijn18
Excursionist
40 1 3

How can I make the quantity selector a dropdown menu instead of it being manual with minus and plus buttons? Preferably a dropdown menu in which you can scroll.

Example product page: https://marwijn.com/products/gregoriano-roble-bodega-picos

Thanks in advance!

Replies 4 (4)

ShreyaRevize
Shopify Partner
55 5 11

Hey @martijn18 

Do you wish to replace the stepper with a dropdown because you have users mostly buying in large numbers, if you can explain your problem there might be a better user-friendly solution, also can you help me understand what the highest number in the dropdown should be? and on average how many numbers do you wish to show in the dropdown before scrolling is needed so that I can share the code accordingly? 

Also if you wish, I would be more than happy to help you set this up for free, email your collaborator code at hello@untechnickle.com and I will take care of the rest 😊

Cheers,
Shreya

With 7+ years of experience helping Shopify merchants succeed | www.untechnickle.com
Creator of Revize – Empowering customers to fix mistakes and buy more after purchase 
Let shoppers edit shipping addresses, change variants/quantities, add products, and more!
https://apps.shopify.com/revize | hello@untechnickle.com
martijn18
Excursionist
40 1 3

As we sell wine, we want to promote buying in multiples of 6 (this decreases the risk of stuff breaking in the box). However, it is also possible for customers to order individual bottles. With the current set-up, it is not really clear that you can also order individual bottles. We think by adding a dropdown menu this can be clarified (or maybe you have a better suggestion 🙂 ). I was thinking of doing the dropdown going 1-2-3-4-5-6-12-18-24-30, if it is possible that you don't need to scroll down it would be perfect. Thanks for helping me!

ShreyaRevize
Shopify Partner
55 5 11

Hey @martijn18, please follow the steps below to replace your stepper quantity selector with a dropdown 

Step 1: Create a Backup of Your Theme
Before making any changes, it's always a good idea to duplicate your theme so you have a backup in case you can to revert.

Step 2: Locate the Quantity Input Code
The quantity selector is usually inside the product form. You’ll find it in one of these files: 

sections/main-product.liquid. If the quantity selector is directly inside the product section.
snippets/product-form.liquid
Look for an existing <input type="number" ...> element inside a <div> related to quantity selection.

Step 3: Comment Out the Existing Quantity Selector
To avoid deleting code permanently, comment out the existing quantity selector by wrapping it in {% comment %} ... {% endcomment %}.

Example:

 

{% comment %}
<input type="number" name="quantity" ... />
{% endcomment %}

 


Step 4: Add the New Quantity Dropdown
Now, replace the old code with the following dropdown:

 

<div id="Quantity-Form-template--23498573873496__main" class="product-form__input product-form__quantity">
  <label class="quantity__label form__label" for="quantity-select">
    Aantal
  </label>
  <div class="custom-quantity-dropdown">
    <select id="quantity-select" name="quantity">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="12">12</option>
      <option value="18">18</option>
      <option value="24">24</option>
      <option value="30">30</option>
    </select>
  </div>
</div>

 

 

Step 5: Add the CSS
To make the dropdown look clean and consistent with your theme, add this CSS to your theme’s stylesheet:
Locate your CSS file:
This is usually found in base.css or theme.css.
Scroll to the bottom of the file and paste the CSS code.

 

.custom-quantity-dropdown select {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

 

 

If this feels overwhelming or you're unsure about making these changes, let me know! I'd be happy to assist you in setting this up. 😊

Hope this helps!

With 7+ years of experience helping Shopify merchants succeed | www.untechnickle.com
Creator of Revize – Empowering customers to fix mistakes and buy more after purchase 
Let shoppers edit shipping addresses, change variants/quantities, add products, and more!
https://apps.shopify.com/revize | hello@untechnickle.com

Easify-Jolie
Shopify Partner
125 6 9

Hi @martijn18 

To achieve this, you need to hide the default quantity selector in your theme and use an app to create a dropdown option for quantity. I recommend using Easify Product Options, as it allows you to set up a scrollable dropdown menu for quantity, and it’s easy to configure without any coding required.

  • This is the result:

EasifyJolie_0-1738813247881.png

  • This is the app setting

EasifyJolie_1-1738813673277.png

 

To manage your product options inventory more effectively, a few additional steps are required. If you're interested, feel free to reach out to the Easify team! 🤗

Easify Product Options: Any product options app can help you create custom options, but Easify turns those options into sales and conversions!
Easify Inventory Sync: Automate inventory syncing for Bundles, Duplicates, and Raw Materials. Say goodbye to manual tracking headaches.
Easify Product Attachments: Enrich your store with downloadable content. Easily add PDFs and other files to product or any page.
>>> Try Apps for Free | 24/7 Live Chat Support