Shopify themes, liquid, logos, and UX
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
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
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?
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!
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>
Hey, did you ever find a solution for this?
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024