Add to cart button on collection page

New Member
2 0 0


We are using a debut theme. We wanted to add the "Add to Cart Button" on each product on the collection page.

I've tried every tutorial I have seen here in the community. But it became like this: 


the at the bottom, after the footer, it looks like this: 


Although we fixed it already. We still want to have "add to cart" button just like in the picture. 

Hope someone can help us with it. 




Just follow the steps for Debut 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 File and paste below code at the end of the page.


<form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />


If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: | Skype : oscprofessionals-87
Shopify Staff
Shopify Staff
968 109 150

Hey, @Asrylanan!


There are also some third party apps in the Shopify App Store that have this functionality, if you’d prefer to use an app instead. Here are a few suggestions to take a look at:


  • Sticky Add To Cart BOOSTER PRO - This app installs a ‘quick buy’ button to the products on your Collection page, making it easier and faster for your customers to make a purchase.
  • Quick View & Quick Shop - Depending on what types of products you’re selling, this app may be useful. It enables for a quick view of your products on the Collection page, so customers don’t have to click into the Product page to find more info. Customers can add to cart directly from the quick view. 


For more information about using third party apps, including how to install, uninstall and where to receive support for them, take a look at the Help Doc on Apps for your Shopify store. Hope this helps!


Helen | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog