How to setup Add to cart button on Collection page

Shivam96
Excursionist
20 0 1

Hi, How i can implement Add to cart on my collection page so while clicking on add to cart right cart popup shows up.

URL - holief.com

 

Thanks

Replies 7 (7)
dmwwebartisan
Shopify Partner
9770 2228 3065

@Shivam96 

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>​

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Shivam96
Excursionist
20 0 1

I tried this @dmwwebartisan But its opening new cart page instead of opening right popup cart.

dmwwebartisan
Shopify Partner
9770 2228 3065

@Shivam96 

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Kimi
Shopify Staff
225 29 57

Hi, @Shivam96!

If you aren't comfortable with coding, an alternative and easy way to include add to cart buttons onto your collection page is by installing a third-party app. There are a few apps on our Shopify App store that can help you achieve this, but I did find a couple that you might be interested in. Feel free to take a closer look at them:

Just a note that these apps are made by third-party developers outside of Shopify. So if you need more information about each respective app’s functionality, I recommend getting in touch with the app developers as they are best equipped to answer app specific queries.

Including add to cart buttons on your collection page will definitely make it easier for customers to purchase your products, so hopefully that'll help increase your store's sales! If you're looking for further strategies to optimise your conversion and sales rates, take a look at our Shopify Blog here for some tips and tricks.

Kimi | 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

sktch-io
Tourist
6 0 3

Also, remember to be careful when adding an add to cart button to the collection page, if you are using customization/options apps on your product pages, they won't work since the option fields will not display in the collection pages, only in product pages.

Otherwise, a simple add to cart form + add to cart button should work just fine.

Sktch.io Theme Builder: Create Shopify themes without writing a single line of code!
Shivam96
Excursionist
20 0 1

Hi @Kimi thanks for the help and suggestion, i tried your suggested app but its also not working on my store.

Kimi
Shopify Staff
225 29 57

@Shivam96

I see, were you after a specific functionality that those apps don't offer? If this is the case, you can look into hiring one of our Shopify Experts to help you code a tailored solution onto your store's theme.

Kimi | 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