How to add “Add to cart” button on Shopify collection pages for each product
Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.
You can create an “Add to cart” button that features a single product that includes one or all of the product’s variants on your collection pages. This will allow your clients to easily and effortlessly add products to cart without opening the product page.
Please follow below steps to add “Add to cart” button on Shopify collection pages for each product.
- From your Shopify admin, to to Online Store > Theme.
- Find the theme you want to edit and then click Action > Edit code.
- In the online code editor of collection page find to the loop
{% for product in collection.products %}add the below code.12345678<form action="/cart/add" method="post">{% if product.variants.size == 1 %}<input type="hidden" name="id" value="{{ product.variants.first.id }}" />{% else %}<select name="id">{% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %}</select>{% endif %}<div><button type="submit" name="add">Add to cart</button></div></form> - Hit Save, and you’re done!
Happy coding!
Great guys, this code helped me a lot. But i have a problem, when add to cart is pressed it takes the customer to the cart page. Is it possible to stay on the collection page after clicking add to cart ?
I think you can use the ajax technique to do that.
Hey, where did you added the code
Can someone please guide me to add price to the Drop down in this along with the Variants.