How to setup Add to cart button on Collection page

Proto
Excursionist
34 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 8 (8)

dmwwebartisan
Shopify Partner
12282 2546 3694

@Proto 

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Proto
Excursionist
34 0 1

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

dmwwebartisan
Shopify Partner
12282 2546 3694

@Proto 

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

Kimi
Shopify Staff
1511 169 258

Hi, @Proto!

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

Proto
Excursionist
34 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
1511 169 258

@Proto

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

sktch-io
Shopify Partner
7 1 4

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!

Jahid-KlinKode
Excursionist
145 1 4

Hey @Proto, facing trouble with adding an "Add to Cart" button on Shopify collection pages? Check out this YouTube tutorial for a quick solution: https://www.youtube.com/watch?v=s98l1bUZe6k