Brooklyn Theme: Add to Cart button on homepage/collection pages

[sms_3000]

Hi,

I'm looking to add "Add to Cart" button for each product on my collection pages. And I would like the button to appear on the product photo when hovering over it.

Is there somebody who could help me with this?

My site is www.mariseger.com which uses Brooklyn theme.

Thanks!

[KetanKumar]

@sms_3000 

thanks for post are you able to code try this or if you any issue let me know

Just follow the steps for a theme for Add to cart button on collection pages.

• From Shopify Admin select Online Store and click on Themes
• Choose your main theme
• Click the . . . on the top left-right (see below) and hit Edit code
• Open Snippets -> product-card-grid.liquid or product-grid-item.liquid File and paste below code at the end of the page.

<form method="post" action="/cart/add"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> <input min="1" type="number" id="quantity" name="quantity" value="1"/> <input type="submit" value="Add to cart" class="btn" /> </form>

[Staton]

It's amazing how simple this shopify platform is. It's just navigating around the different, what seems like, "component" files and sorting the mess of code in the browser that makes it more difficult. 

Thanks for this solution! 

[KetanKumar]

@Staton 

it's my pleasure to help us

[HFM]

Hi,

This code works, however the buttons are all uneven in height from one another.  Is there a code to adjust the text boxes above the add to cart buttons, making them uniform throughout.  This would be one way to solve it.  Or if there is another way to have the buttons on the same plane as one another I would love to know.  Any help would be appreciated.

Thanks

[KetanKumar]

@HFM 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[HFM]

Hi,
Thanks for the offer. It’s appreciated, however, I managed to sort out the problem.

Thanks again!

[Kosti]

How did you sort the issue? I am having a similar issue and my buttons are appearing on the right side of the products instead of under the products?

[HFM]

Hi, I resolved my issue by adding the following code at the bottom of the assets/theme.scss.liquid file.

.template-collection #CollectionSection .grid-product__title{ display: block !important; min-height: 175px; }

My buttons were appearing below, however were staggered and uneven.  Not sure if this code with solve your issue but it doesn’t hurt to try.

[candikapone]

Can you tell me how you sorted it out, I'm having the same issue and need help?

[HFM]

I suppose you’re referring to the uneven buttons.  I resolved my issue by adding the following code at the bottom of the assets/theme.scss.liquid file.

.template-collection #CollectionSection .grid-product__title{ display: block !important; min-height: 175px; }

[candikapone]

Hi, so I used the code you provided for mine as well but the button doesn't align in the center underneath the products right. They are more towards the left instead of being centered, how do I center all of them? Also when the customer click on the "add to cart button" I want it to say "added" so they'll know it's been added to there cart and instead of it taking you straight to the checkout page I want it to stay on that same page so that the customers can continue shopping? 

[HFM]

I have not looked into that. I realize that the link directs to the cart page. At the cart page I have added a continue shopping button for this reason. However, your approach seems better. I am not a developer, therefore will need to look into this as well. If I find out how I will let you know.

[candikapone]

Can you Message me on here?

[HFM]

I found this link in the forum. Let me know if it works for you.

https://community.shopify.com/c/technical-q-a/stay-on-the-product-page-after-adding-to-cart-brooklyn...

[candikapone]

Yes I finally got it, this has definitely helped, thank you so much!

[AlexaBvogue]

Hello! I need some help with aligment. Looks like this and I don t know how to fix it. 

[candikapone]

Hey Alexa, try this and let me know if it worked for you. Go to edit code -> Snippets -> Product-Grid-Item.liquid. Copy & paste this code on line #124:

</a><form method="post" action="/cart/add"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> <input min="1" type="number" id="quantity" name="quantity" value="1"/> <input type="submit" value="Add to cart" class="btn" /> </form>

[KetanKumar]

@AlexaBvogue 

sorry for that issue 

can you please share store url

[GBSshop]

Hi, when i use the code:

<form method="post" action="/cart/add"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> <input min="1" type="number" id="quantity" name="quantity" value="1"/> <input type="submit" value="Add to cart" class="btn" /> </form>

It appears to the left of the products:

My URL is: gbs-new.myshopify.com/?key=cf1cbe6423e23cd7eb7467b1c1a0b73ec617c6e12ba27f5f74aa3d167e8889e8

Can you help?

[GBSshop]

All okay, the code is great, it just needs to be put in the right part of the product-grid-item.liquid code. for me it was below this code around line 100:

<span class="icon-fallback-text">
<span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</span>
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
</span>

[KetanKumar]

@GBSshop 

Do you have a fixed issue?

[GBSshop]

Yes, issue all fixed thanks 

[KetanKumar]

@GBSshop 

great thanks for update

[Elad1]

hey, how yo fix the problom that the add to cart is not on center?

@GBSshop 

[KetanKumar]

@Elad1 

can you please share store url 

[Elad1]

hey 

parisunglasses.com

@KetanKumar 

[KetanKumar]

@Elad1 

try this 

From Shopify Admin select Online Store and click on Themes Choose your main theme Click the . . . on the top left-right (see below) and hit Edit code Open Snippets -> product-card-grid.liquid File and paste below code at the end of the page.
<form method="post" action="/cart/add"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> <input min="1" type="number" id="quantity" name="quantity" value="1"/> <input type="submit" value="Add to cart" class="btn" /> </form>

[joshdavies1988]

Hi I am having a few issues with the code. Firstly the  - 1 + part of the add to cart is not central on either mobile or web version. Also it is putting the brand/tag text underneath. How do I sort both please?

[joshdavies1988]

I have managed to remove the tag text, I just need to centralise the  -1+ part.

Also do you know how once added it can stay on the page rather than keep going to the cart page, and making users go back.

Maybe with a prompt to say 'Added' 

[pguil]

Hey this breaks my page, I'm using a 3 collumn layout could you help?

[Jahid-KlinKode]

Hi @sms_3000, check out this YouTube tutorial for a simple guide on adding an "Add to Cart" button to your Shopify collection pages: https://www.youtube.com/watch?v=s98l1bUZe6k