Add to cart button on collection page

[Asrylanan]

Hello! 

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

https://wishgardens.com/collections/home

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. 

Thanks. 

[oscprofessional]

Hi,

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="{{ 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>

[Helen]

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!