Wondering the same! Commenting in case someone finds a solution.
#hi, agree it needs Variations to be perfect, and if the item is out of stock to make the button not available or state out of stock and be not clickable. - currently it allows it to add to the basket even tho its out of stock. not ideal!
all help appreciated
https://www.youtube.com/watch?v=5uzyReIlKOs
Please check the updated code, it’s not allowing the out-of-stock items to basket rather it’s is redirecting to the product page and on the product page, the add to cart button is already disabled.
Thank you very much for the code! Just wanted to ask if there is any way that we can change the function of the add to cart button so when user clicks it - the item gets added to cart and the pop up shows that the item is added to cart but without them leaving the collection page. At the moment when user clicks the add to cart button - they get redirected to the cart page and item gets added to cart they need to click continue shopping.
It will be much more efficient if this friction is removed and users can add to cart without leaving the collection page.
Thank you!
2 Likes
@IvayloKolev Also something I’m looking into. Please come back if you find a solution to this matter
Thanks!
1 Like
Hi. Have anybody else experienced that this button for some reason display differently on some devices? I have added this piece of code for add to cart buttons on collection pages for 2 stores now, and same thing for both of them. Nothing wrong with CSS, but on some mobile devices, I have experienced that these buttons display incorrectly. See screenshots. Anybody else with this issue?
I also have this request. I’ve been trying to find a way to use the “quick add” feature again just to avoid forcing the user to go back and forth out of the shopping cart.
1 Like
I’m waiting for that too, because the code itself works great. Only this little functionality is missing to make this button perfect.
That’s a great piece of code for us. After implementing, I realized two issues,
-
Add to cart will redirect the customer to the cart page every time they click the add to cart. Would prefer the cart drawer like action like the add to cart on the product page.
-
Hence some of the product names are 2 lines, and the alignment of the ‘add to cart’ button on the collection page doesn’t look good.
I tried inserting the code above the product title, but then the button is not working it is redirecting to the product page instead.
I hope you can come up with an updated solution or someone else can put here their expert help.
1 Like
Hi,
I have tried this but cannot locate the product-card-grid file in the code library.
I am on Dawn Version 6 - can you please assist? Tried pasting the code here:
card-product.liquid
But no success. Please help!
@jimpw90 ,
No need to add code, shopify added this feature.
How do I add it to our site?
I tried using the enable Quick Add button in theme editor (Dawn Theme) but that did not work…
@jimpw90 ,
It’s strange. You can contact me on whatsapp +92 3486775142 and I can check it for you.
depending on the file you are editing, quite possibly also:
1 Like
Hi! I tried this on my shop and nothing showed up.
i tried the code but whenever the button is clicked it redirects me to the cart page how can i do this while being on same page and also page don’t refreshes.
Hey @VictorVaissier , if you need to add an “Add to Cart” button to your Shopify collection pages, watch this helpful tutorial on YouTube: https://www.youtube.com/watch?v=s98l1bUZe6k
This code has been working perfectly for Dawn theme for a long time.
I have updated Dawn to latest version 15.0.0. and this code doesn’t work for it (I tried to put the same code to card-product.liquid)
Is there any update of this piece of code ?
Thank you in advance.