Change quantity amounts in drop down.

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
Shopify Expert
9778 86 1524

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
1 Like
Excursionist
63 0 4

Thanks for the quick reply. 

That works perfectly. 

Thank you. 

http://www.tenderessence.com = Essential Oils UK
0 Likes
Tourist
5 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

1 Like
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
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
Shopify Expert
9778 86 1524
@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
Highlighted

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