Change quantity amounts in drop down.

Essential_Oils_
Excursionist
63 0 4

Currently, I have the standard drop down quantity field, using the code, as shown here:

<label for="quantity">Quantity: </label>
<select id="quantity" name="quantity">
{% for i in (1..10) %}
<option value="{{ i }}">{{ i }}</option>

and used on this page:
https://www.tenderessence.com/collections/packaging/products/empty-plastic-10ml-bottles-1?variant=36...

I'd like them to order possibly 1 (samples) but most customers would like to order in different bulk amounts, so I'd like to offer 1,2,5,10,20,50,100,200,400,500. 
Or at least different amounts. Of course they can be more exact on the cart and it doesn't matter if they order 7. 

How do I change that code to show these values, on the dropdown menu. I have attempted some ideas from the web, but each time I break it. 

Thanks in advance for any help.
Best regards,
Adele

 

http://www.tenderessence.com = Essential Oils UK
0 Likes
Jason
Shopify Expert
10037 119 1872

Hey Adele,

I'm not sure what broke when you tried but here's a snippet of code that might give you some inspiration:

{% assign quantityOptions = '1,2,5,10,20,50,100,200,400,500' | split:',' %}
<label for="quantity">Quantity: </label>
<select id="quantity" name="quantity">
{% for q in quantityOptions %}
  <option value="{{ q }}">{{ q }}</option>
{% endfor %}
</select>

Assuming your code above is working this should work ok as well. Since the site is live you might want to make these edits in a theme copy to avoid breaking the live theme.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Essential_Oils_
Excursionist
63 0 4

Thanks for the quick reply. 

That works perfectly. 

Thank you. 

http://www.tenderessence.com = Essential Oils UK
0 Likes
MerrittWatson
Tourist
7 0 1

Hey Jason,

 

How can i get this added to the cart.

 

It worked perfectly in my product page but when i go to my cart, it reverts to the original number dial. This gives customers the option to move away from my specific quantity options.

 

Any thoughts? even though this was 2 years ago?

 

Thanks,

Merritt

kittylash
Tourist
5 0 1

Really want this too


@MerrittWatson wrote:

Hey Jason,

 

How can i get this added to the cart.

 

It worked perfectly in my product page but when i go to my cart, it reverts to the original number dial. This gives customers the option to move away from my specific quantity options.

 

Any thoughts? even though this was 2 years ago?

 

Thanks,

Merritt


 

0 Likes
Jnk1
New Member
2 0 0

Hello Jason.

Any thoughts on how we can have this same code on work on the cart page?

0 Likes
Jason
Shopify Expert
10037 119 1872
@Jnk1 wrote:

Hello Jason.

Any thoughts on how we can have this same code on work on the cart page?


The logic talked about above still applies to the cart page. However, each cart page is different and you'll have some themes with other code in place that will conflict. Hard to know what you're dealing with as there's no context given. What I posted is a general concept and not something to copy and paste. 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes

I have worked using changing the input box type as hidden and then adding select in debut theme. Add this code in cart-template.liquid  below input box for quantity.

<select id="updates_{{ item.key }}" class="cart__qty-input" type="number"
data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-mobile>

{%-if item.quantity==1 -%}
<option value="{{ item.quantity }}" selected > {{ item.quantity }} </option>
{%- else -%}
<option value="{{ 1 }}"> {{ 1 }} </option>
{%- endif -%}
{%-if item.quantity==2 -%}
<option value="{{ item.quantity }}" selected > {{ item.quantity }} </option>
{%- else -%}
<option value="{{ 2 }}"> {{ 2 }} </option>
{%- endif -%}
{%-if item.quantity==3 -%}
<option value="{{ item.quantity }}" selected > {{ item.quantity }} </option>
{%- else -%}
<option value="{{ 3 }}"> {{ 3 }} </option>
{%- endif -%}
{%-if item.quantity==4 -%}
<option value="{{ item.quantity }}" selected > {{ item.quantity }} </option>
{%- else -%}
<option value="{{ 4 }}"> {{ 4 }} </option>
{%- endif -%}
{%-if item.quantity==5 -%}
<option value="{{ item.quantity }}" selected > {{ item.quantity }} </option>
{%- else -%}
<option value="{{ 5 }}"> {{ 5 }} </option>
{%- endif -%}
{%-if item.quantity==6 -%}
<option value="{{ item.quantity }}" selected > {{ item.quantity }} </option>
{%- else -%}
<option value="{{ 6 }}"> {{ 6 }} </option>
{%- endif -%}

{%-if item.quantity==7 -%}
<option value="{{ item.quantity }}" selected > {{ item.quantity }} </option>
{%- else -%}
<option value="{{ 7 }}"> {{ 7 }} </option>
{%- endif -%}
{%-if item.quantity==8 -%}
<option value="{{ item.quantity }}" selected > {{ item.quantity }} </option>
{%- else -%}
<option value="{{ 8 }}"> {{ 8 }} </option>
{%- endif -%}
{%-if item.quantity==9 -%}
<option value="{{ item.quantity }}" selected > {{ item.quantity }} </option>
{%- else -%}
<option value="{{ 9 }}"> {{ 9 }} </option>
{%- endif -%}
{%-if item.quantity==10 -%}
<option value="{{ item.quantity }}" selected > {{ item.quantity }} </option>
{%- else -%}
<option value="{{ 10 }}"> {{ 10 }} </option>
{%- endif -%}




</select>
<!-- new Code ends for dropdown functionality -->

 

 

 

bhaskar
0 Likes

Hello,

You can use MultiVariants ‑ Bulk Order to convert your default quantity input into a select box (drop-down). It will work on both the product page and the cart page. You can manage the quantity selection option as well to restrict your customers to choose from your available. Ex: 12, 24, 48 or 100, 200, 500 etc. 

Here is an example product you can take a look at Bundle/Bulk quantity (drop-down)

0 Likes