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

[William_Vernon]

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.

[Brydon_McClusk1]

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

[William_Vernon]

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]

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

[Blazk]

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]

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

[audgelane]

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]

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.

[chelcwill]

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]

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