How to add a "add to cart"

New Member
2 0 0
How to add a "add cart" button to each product of a collection for people to be able to instead of clicking the product itself they can added witouh this step. Using Brooklyn Theme. Thank you!
0 Likes
Highlighted
Excursionist
20 0 5

Hi there,

 

in brooklyn the fastest way to add an ATC-button to your collection page is placing the following snippet into your product-grid-item.liquid.

Make sure to duplicate your Theme as a Backup, before you make any Changes.

You have to include the snippet right befor the last two closing divs at the bottom of the file.

 

Further Code

.

.
SNIPPET
</div>
</div>


{% if template contains 'collection' %}
<form style="margin-bottom:20px" class="product-form" action="/cart/add" data-productid="{{product.id}}"  method="post"> 
  <input type="hidden" name="id" data-productid="{{product.id}}" class="product-select" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />
  <input type="submit" value="Add To Cart" class="btn btn btn-default" />
</form>
{%endif%}


Duly note the following things, because this is a very basic ATC button.:
1. This ATC-Button is only for the first Variant of a product.

 

2. It will only add the product with a quantity of 1.
3. There is no check whether or not the product is sold out. The Customer will notice that when visits the checkout.


Adding the ATC Button is not the easiest thing and you might consider hiring a Shopify Developer.

Hope I could still help you and wish you a good day :-)

Was this answer helpful?
Leave a thumbs up, so others might find it faster.

Would you like to learn more about Shopify Development?
You might like my Youtube Channel
1 Like
New Member
2 0 0
Thank you very much it works very well. I just wondering if I could modify
this point:
Once I click the button the web shows me the "cart window" instead of going
to the "cart page". This way people still can adding products to the cart.
Please see the image attached for more information.

Thank you!
0 Likes
Excursionist
20 0 5

Unfortunatley this modification is not as easy as it may seem.

What you are looking for is an AJAX-Add to Cart Button for your collection page.

 

There is a tutorial from Shopify out there, wich explains how to do it on the product page, but this requieres some confidence in HTML and the shopify theme structure.


Maybe this will still help you, if you can understand the integration and then apply it to the collection page.

https://help.shopify.com/en/themes/customization/products/add-to-cart/stay-on-product-page-when-item...


Was this answer helpful?
Leave a thumbs up, so others might find it faster.

Would you like to learn more about Shopify Development?
You might like my Youtube Channel
0 Likes