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!
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.
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!
it’s my pleasure to help us
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
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.
Hi,
Thanks for the offer. It’s appreciated, however, I managed to sort out the problem.
Thanks again!
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?
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.
Can you tell me how you sorted it out, I’m having the same issue and need help?
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; }
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?
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.
Can you Message me on here?
I found this link in the forum. Let me know if it works for you.
Yes I finally got it, this has definitely helped, thank you so much!
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:
Hi, when i use the code:
It appears to the left of the products:
My URL is: gbs-new.myshopify.com/?key=cf1cbe6423e23cd7eb7467b1c1a0b73ec617c6e12ba27f5f74aa3d167e8889e8
Can you help?
