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 31 (31)

KetanKumar
Shopify Partner
36839 3635 11972

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

 

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
Staton
Visitor
1 0 0

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
Shopify Partner
36839 3635 11972

@Staton 

it's my pleasure to help us

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
HFM
Tourist
10 0 7

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
Shopify Partner
36839 3635 11972

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

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
HFM
Tourist
10 0 7
Hi,
Thanks for the offer. It’s appreciated, however, I managed to sort out the problem.

Thanks again!
Kosti
Shopify Partner
2 0 0

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

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

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

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?

HFM
Tourist
10 0 7
candikapone
Tourist
8 0 1

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

AlexaBvogue
Tourist
7 0 2

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
36839 3635 11972

@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
Excursionist
20 1 10

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?

GBSshop
Excursionist
20 1 10

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
Shopify Partner
36839 3635 11972

@GBSshop 

Do you have a fixed issue?

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
Excursionist
20 1 10

Yes, issue all fixed thanks 

KetanKumar
Shopify Partner
36839 3635 11972

@GBSshop 

great thanks for update

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
Elad1
Tourist
3 0 1

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

@GBSshop 

KetanKumar
Shopify Partner
36839 3635 11972

@Elad1 

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
Elad1
Tourist
3 0 1

hey 

parisunglasses.com

@KetanKumar 

KetanKumar
Shopify Partner
36839 3635 11972

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

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
joshdavies1988
New Member
5 0 0

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?Capture.PNG

joshdavies1988
New Member
5 0 0

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
Excursionist
13 0 4

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

Jahid-KlinKode
Excursionist
145 1 4

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