We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Re: How to add "add to cart" button on my collection page

Solved

How to add "add to cart" button on my collection page

Lovelyn12
Excursionist
39 1 4

Hello everyone, I am currently using debut theme. How to add "add to cart" button on my collection pages. And I want to show % discount every product on my collection page. Thank you in advance.

 

Please see attached file.

Screenshot 2019-08-06 10.27.25.pngScreenshot 2019-08-06 10.27.36.png

Accepted Solution (1)

oscprofessional
Shopify Partner
16407 2444 3196

This is an accepted solution.

Hello Lovelyn12,

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>


Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...

View solution in original post

Replies 112 (112)
Closy-Market
Tourist
11 0 2

The code works great, i just have a few questions

  1. Is there a way to stop it directing you to the cart page after clicking the button?
  2. Is there a way to display text saying 'added' so the user knows it has been added to the cart?
  3. Can it show a quantity selector?
  4. Can it display a dropdown to choose variants or open in another window like canopy theme

Thanks

 

 

Closy-Market
Tourist
11 0 2

Aswell as the above questions, would it be possible to vertically align the add to cat button (see pictures)

 

Current layout

Current.png

 

Ideal Layout

Ideal.png

 

  

buvituvietnam
Visitor
1 0 0

Your button is so beautiful. Can you instruct how to do it or get a code. thanks!

Sunny9599
Excursionist
13 1 8

Hope u check the code

AAAAABA
Tourist
3 0 1

How do i do it? It doesn't align? 

 

SealSubs
Explorer
81 1 4

I believe that this button is coming from an Add to cart button app: https://apps.shopify.com/add-to-cart
It has the same design of the button and the exact same placement (see screenshot).

SealSubs_0-1717320281312.png

 

Seal Subscriptions App, a subscription app for Shopify, with glowing user testimonials.
n_bcn
Excursionist
18 1 1

Hello,

I followed these instructions and the add to cart buttons look great on my collections pages now.

However, I use the Brooklyn theme and from the product page, clicking the add to cart button triggers the AJAX cart drawer. But from the collections pages, the add to cart button automatically re-directs the customer to the cart page instead of the drawer.

I would prefer for the customer to be kept on the collections page but have the cart drawer pop out - is there any way to do this?

Here is my store URL.

Thanks!

souravroy
Excursionist
31 0 6
Hey!

I can see that clicking on ATC button gets redirected to your cart page
which is a huge back drop for you. Ajaxifying your cart is quite I
personally recommend you take an experts help.

Any way you can do it yourself if you have coding knowledge.

https://community.shopify.com/c/Shopify-Design/Product-pages-Stay-on-the-product-page-after-adding-p...

PS: Code changes for different themes.

n_bcn
Excursionist
18 1 1

Hi @souravroy,

I already followed that tutorial and it worked, the add to cart button no longer redirects to the cart page.

I already have the built in AJAX cart enabled (the one that comes with Brooklyn theme), and if add to cart is clicked from the product page then the drawer still pops out.

I would like the same thing to happen when add to cart is clicked on the collection page. I'm trying to find out if there is a way to enable this

Thanks

Imperfect_Mom
Visitor
2 0 0

do you know how this would work in boundless? i want to add the outlink... to the collections page and have it open in a new tab

 

MRamzan
Shopify Partner
533 3 46

I solved this by following these steps:

 

1. Go to theme -> Action -> Edit Code

2. Find the exact place of adding the code.

3. Paste below code

 

<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 you wanted to hide quantity input box then replace type="number" with type="hidden"

 

Follow this video: https://youtu.be/fxk51sRZs38

 

Let me know if still you can't solve.

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
mgerrar
Visitor
2 0 1

Thank you this worked. I placed it right before the final "/div". It solved reroute to product page, which was happening both with ATC and the +/- of quantity. Thank you! I had to look at 4 threads to find this fix.

Jahid-KlinKode
Excursionist
145 1 5

Hi @Lovelyn12, check out this YouTube video for a quick solution on adding an "Add to Cart" button to Shopify collection pages: https://www.youtube.com/watch?v=s98l1bUZe6k