Shopify themes, liquid, logos, and UX
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
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.
Solved! Go to the solution
This is an accepted solution.
Hello Lovelyn12,
Just follow the steps for Debut theme for Add to cart button on collection pages.
<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>
The code works great, i just have a few questions
Thanks
Aswell as the above questions, would it be possible to vertically align the add to cat button (see pictures)
Current layout
Ideal Layout
Your button is so beautiful. Can you instruct how to do it or get a code. thanks!
Hope u check the code
How do i do it? It doesn't align?
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).
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!
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
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
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.
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.
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