Add to cart button on collection page

Asrylanan
New Member
2 0 0

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: 

Asrylanan_0-1614108840986.png

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

Asrylanan_1-1614108904950.png



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. 



0 Likes

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>

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Helen
Shopify Staff
Shopify Staff
887 93 139

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

0 Likes