Shopify themes, liquid, logos, and UX
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!
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
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!
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!
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.
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! 🤗
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025