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.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024