buy multiple sizes and quantities on single product page

nb782
Shopify Partner
18 0 0

In a store that sells t-shirts ( for example). On a product page for a white t-shirt I would like to list all the sizes and have quantity boxes next to each size. A user would then be able to select 2 x small, 10 x medium , 3 x large, 25 x X Large click the add to basket button once to add them to their basket. This would avoid the user having to select a quantity of small and add to basket, select a quantity of mediums and then add to basket etc....

Do not want to use an app for this

Any advice on this would be greatly appreciated….

Regards

Replies 6 (6)
diego_ezfy
Shopify Partner
2308 414 543

Hello,

What you need is to setup variants. Kindly take a look at the documentation for detailed and complete information: https://help.shopify.com/en/manual/products/variants/add-variants

Thank you

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.
nb782
Shopify Partner
18 0 0

Thanks

I think that how i described is very clear.

My product has all the variants set up so currently you can slect your size from a drop down and click to buy the size.

I would like to have each size listed on the product page seperatley so you can add a quantity next to each size and click buy and it will add everything to your basket

 

Not sure if that is clearer?

dmwwebartisan
Shopify Partner
9825 2237 3078

Hey @nb782,

It seems that this is your custom requirements. If you do not want to use the app then I would suggest you to hire Shopify expert for the customization.

The expert will do as per your need.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
nb782
Shopify Partner
18 0 0

I have got the following which is listing all the variants seperatley and putting a quantity box next to each one. Everything is working fine apart from when I click add to cart only the first quantity ( i.e. small ) is added to the cart. any help greatly appreciated.

 

<form action="/cart/add" method="post" id="product-form-{{ variant.id }}">

<table class="desktop-12 tablet-6 mobile-3">
<thead>
<tr>
<th>Size / Item Code</th>
<th>Price</th>
<th style="text-align: center;">Qty</th>
</tr>
</thead>
<tbody>
{% for variant in product.variants%}
<tr>
<td>
<p> <input type="hidden" id="{{ variant.id }}" name="id" value="{{ product.variants[0].id }}" />{{ variant.title | escape }} </p>
</td>
<td>
<p>{{ variant.price | money }}{% if variant.compare_at_price > variant.price %}<br /><del>{{ variant.compare_at_price | money }}</del>{% endif %}</p>
</td>
<td>
{% if product.available %}

<a class="down" field="quantity"><i class="icon-minus"></i></a>
<input min="1" type="text" id="{{variant.id }}" name="quantity" class="quantity" value="0" />
<a class="up" field="quantity"><i class="icon-plus"></i></a>

{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>

any help greatly appreciated.
{% if product.available %}
<input type="submit" name="button" class="add" value="Add to Cart"/>
<p class="add-to-cart-msg"></p>
{% endif %}

</form>

JoshMaher
Excursionist
14 0 5

Hey, did you ever find a solution for this?

Jahangir
Shopify Partner
93 2 12

Hello @JoshMaher and @nb782,
Have you found any solution yet? If not, you can check out the MultiVariants - Bulk Order app to display all the variants with a quantity box and allow bulk add to cart for all selected variants.

Here is the demo you can take a look at.

You can do this by using the FREE plan of the app.

MultiVariants to allow buy multiple sizes and quantities on single product pageMultiVariants to allow buy multiple sizes and quantities on single product page