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

Tourist
6 0 3

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.

0 Likes
Shopify Partner
21 0 9

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 :D

badaboom. have a great day.
9 Likes
Tourist
6 0 3

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.

3 Likes
Shopify Partner
21 0 9

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.
0 Likes
New Member
2 0 0

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!

0 Likes
New Member
1 0 0

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

0 Likes
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!

 

0 Likes
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
0 Likes
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.

0 Likes
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

0 Likes