Adding an "Add to Cart" Button to Collection Pages in Debut Theme

William_Vernon
Tourist
6 0 15

Summary - Would like code to help with:

  • Adding Add to Cart buttons to our collection pages
  • Adding Quantity selectors next to the Add to Cart buttons on the collection pages

Hi Shopify Design Forum!

Designing our first ever site with Shopify. Been very self-explanatory to pick up so far even with simple questions just looked up on the forums; however, I can't find code that works to do this. I would like to add Add to Cart buttons to all products on collection pages so that customers don't have to click into products to order them.

Much of what we sell does not require reading about the product and in today's fast-paced world, I believe many people (particularly those on the go) would find it cumbersome to click into each individual item to add them.

Also, since some of our items are bought in larger-than-one quantities, can I also add a Quantity Selector for each item beside the Add to Cart button?

Thanks for your help, Shopify Design forum.

Replies 143 (143)
Brydon_McClusk1
Shopify Partner
21 0 27

Hey William!

 

Glad to see you using Shopify, it's a great platform! That's a great idea, and I'd be happy to help you achieve that! 🙂

  • From Shopify Admin select Online Store and click on Themes
  • Choose your main theme, and select Customize theme
  • Click the . . . on the top left-right (see below) and hit Edit code

  • Seach for product-grid-item.liquid (or something similar!)
  • Find <div class="product-item--price">, and add the following code before, or after, the closing </div> tag depending on if you want the button and quantity selector above or below the price
<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> 
  • Hit Save, and you're good! You can't preview the changes to the code unless you save it first 🙂

 

Best of luck with your store and I hope I was able to help! All the best William 😄

badaboom. have a great day.
William_Vernon
Tourist
6 0 15

Hi Brydon,

Appreciate this. I was able to get it to work and played around to figure out the middle line was for the quantity selector. Not sure if I want that or not yet.

For Debut theme, for us, it was under product-card-grid.liquid under Snippets for reference to any out there that it may help pinpoint (at least until it is outdated). 🙂

Thanks again, definitely appreciate the wisdom.

Brydon_McClusk1
Shopify Partner
21 0 27

You're very welcome and great luck on the store William! I'd love to see it when it has launched. 🙂

badaboom. have a great day.
Blazk
New Member
2 0 1

I have successfully added the button. But how would it be possible to add another drop down to let user selects different variation (size: S, M, L).

I look forward to help!

Bonfire
New Member
1 0 0

Thank you for posting the exact path needed to add this to Debut.

audgelane
New Member
1 0 0

Couple of follow-up questions.

1. Is is possible to make the action direct to the full details of the product? What would I change the action to?

2. Is it possible to add another button next to it so there could be an Add to Cart and a View Product or something similar?

Thanks!

 

Thomas_Valdez
Explorer
68 0 15

If you want the button to redirect the user to the product page, then you should just add an url to the product page 😉

But for the add to cart button, I know that a lot of stores use an app for it. It is called Add to cart button and it adds an add to cart button to your products on collection pages. This button works in a way that you can add each item to the cart without being redirected to the product or cart. It is really amazing.

~Valdez
chelcwill
New Member
3 0 0

This is awesome! Thank-you everyone. So when I click to add a quantity it takes me to the product page, how do I stop this from happening? Thanks in advance.

squarpeg
New Member
6 0 0

Is there a reply to this?  It appears as the code for the "form" is in the linked area that goes back to the product page and therefore clicking on the +/-  takes you to that products individual page, Add to cart button does seem to work

Vegan_Chocolate
New Member
1 0 0

Hi,

 

This has been super helpful. I am looking for the "add to cart" button to be center alligned, can someone shed some light on how to do this?

 

Best of Wishes

Will

Jason_Augusto1
New Member
1 0 0

Hi, is there way to redirect the "add to cart " to the product page not the cart page?

 

 

Christina_Hall
New Member
4 0 0

Hi, 

I am also wanting to have 'add to cart' buttons on our collections pages - exactly as the example above. I am using minimal theme and have tried following the above instructions, however, I can't find where to put the code - as the following doesn't exist:

  • Find <div class="product-item--price">, and add the following code before, or after, the closing </div> tag depending on if you want the button and quantity selector above or below the price

I am a novice in this, and would appreciate any help. 

thanks

squarpeg
New Member
6 0 0

I had some guy do this for me. I think it cost $50. If you want I will see if I can find his name. Came out pretty good, you have to watch the title length though as long titles cause misalignment.

 

 

Christina_Hall
New Member
4 0 0

Thanks for this - I just hired someone in UpStart who did it for me....  a much better option!

 

Cheers,

 

shereen_ahmed
Tourist
16 0 1

hello there! did you find <div class.... >in the product grid, to paste the form?? I can't in debut theme.

chris120
New Member
2 0 1

hello there! did you find <div class.... >in the product grid, to paste the form?? I can't in debut theme.

It looks like you cna just paste the above code directly at the end of the product-card-grid.liquid file in Debut.  No need to put it in the <div>.

Deepesh_Mehta
New Member
2 0 0

If anyone needs help doing this please email me at deepeshhmehta@gmail.com

MixedLove_Globa
New Member
1 0 3

Does anyone know how to avoid being redirected to the cart? I would like for people to stay on that current page once they click the "add to cart button" - I know there's apps that do that.. but spending 10usd a month for just a "simple" redirect... 

Nevermind, I found the answere here:

https://help.shopify.com/en/themes/customization/products/add-to-cart/stay-on-product-page-when-item...

Though I would need to change the size of the product selected, and it does not let me do that.

SteveWinch5DS
Excursionist
54 0 6

Hi All

 

I know this thread is a little old, but I'm looking for something related to all of this.
I've added the Add To Cart button to my collection page, but when it's clicked it takes the customer to the product.

Don't want / need this at all. I want to stay on the Collection page when Add To Cart is clicked.
That's the point of adding the button in the first place isn't it? To shorten the customer journey!?

And is there any way of reducing the size of the qty box? 

And I don't appear to have the +/- buttons for adjusting quantities... mine looks like this...

 

add to cart.jpg


ALSO, I've ajaxified the store, but clicking 'Add To Cart' on the product page is STILL redirecting to the basket.

 

Any help with the above gratefully received!
Thanks