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

sms_3000
Tourist
4 0 3

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!

Replies 23 (23)
HFM
Tourist
10 0 7

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
Tourist
8 0 1

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
Tourist
10 0 7
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
Tourist
8 0 1

Can you Message me on here?

candikapone
Tourist
8 0 1

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

AlexaBvogue
Tourist
3 0 1

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

candikapone
Tourist
8 0 1

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
Shopify Partner
25061 2509 9072

@AlexaBvogue 

sorry for that issue 

can you please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GBSshop
New Member
14 0 9

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:

 

GBSshop_0-1638620651434.png

 

 

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

 

Can you help?