How to add a "add to cart"

Highlighted
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
Shopify Partner
34 3 11

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 :-)

Passionate Shopify Developer :-)
Also teaching a little Theme Development on my YouTube channel for free
- - >Let's Build Shopify
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
Highlighted
Shopify Partner
34 3 11

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...


Passionate Shopify Developer :-)
Also teaching a little Theme Development on my YouTube channel for free
- - >Let's Build Shopify
0 Likes
Highlighted
Tourist
3 0 1

Everytime I try to add that code; this happens (See image). I want the buttons "Add to cart" to be below the images and centered. What is going on?

 

 

 Screen Shot 2020-07-23 at 8.27.04 PM.png

0 Likes