A store owner wants to add an ‘Add to Cart’ button directly below product images on collection pages, allowing customers to purchase without visiting individual product pages.
Solutions Proposed:
Custom Code Approach: One user suggests adding markup code after the existing price code in theme files (likely product-card.liquid, product-card-grid.liquid, or product-loop.liquid). Notes that AJAX functionality and JS triggers would be needed for cart updates without page refresh, plus CSS styling for the button.
App Solution: Another user recommends the ‘Collections Add to Cart’ Shopify app as an alternative.
Current Status:
The original poster reports that the suggested theme files aren’t available in their shop and shares a screenshot of their available files. They indicate they will investigate the suggestions further. The discussion remains open as implementation details are still being worked out.
Hi
I would like my customers to be able to put the item directly into the shopping cart without first clicking on the product. How can I embed an “add to cart” button directly below the product image.
Themes Testament
My Website: Taste-Experience
best regards
doris
Hello @TasteExperience ,
Use this code just after the existing price code.
Keep note you need to first find the file
Most probably file name will be
product-card.liquid
product-card-grid.liquid
product-loop.liquid
This code output a simple atc button you need to do css a/to your need.
And if you want it to function with ajax same like the product page then you have to trigger the JS function too.
Thanks
Hi.
For add to cart button, you can use the Shopify app.
OK thank you.
Unfortunately, the three you mentioned are not available in my shop.
I have these:
best regards
Doris
Thank you for your answer. I will take a look.
Best regards
doris
