Shopify themes, liquid, logos, and UX
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>
Thank you! Amazing
I know this thread is old, but I had to say THANK YOU! This was by far the simplest step by step I found. Quick and easy fix!!
hello!, I didn't find the product-card-grid.liquid , instead I edited the Product grid Item. liquid and it shows like this: vertically displayed on the left side of the product, I need it below it.
What can I Do? thanks!
Hi, Thank you. I am however having the issue that the add to cart button brings me to the product page and does not actually add the item to cart. CAn you help? I am using the debut theme and don't have customizations on the page.
Is there any way to have the add to cart button in the center underneath the product image? At the moment the button is showing on the left and quite far down
Good morning,
Firstly congrats on this code, the functionality is working perfectly on my store.
Unfortunately, I've found 2 issues:
1st Issue: The quantity box isn't resizing automatically and is too big. If possible would be better to have this box as is showing on the product page (image below).
2nd Issue: This ADD TO CART button is the only thing that's not being translated from the Translation Lab App that I'm currently using to translate my whole store (amazing free translation app by the way).
The Developer of the Translation Lab team send me this feedback:
Regarding the "Add to cart" button I could not proceed to fix that so you should contact theme developers regarding that. You can tell them that the "Add to cart" text is translated in our app:
But it seems that the translation is overwritten by a javascript code coming from the theme.
Please, let me know if you have a workaround to solve those issues
Kindly regards
Tiago Moreira
Is it possible to have a add-to-cart button which does not redirect to the cart? Currently using Debut theme.
Yes! That worked great! So where do I edit the code to center the buttons and change the shape, color etc?
This code worked but when you actually click on the add to cart button it goes to an error page. Why is it not working correctly?
If you are using Dawn theme then try this:
<!-- cart button on collection page :: starts --> <style> .collection-cart-btn { display: none; } .collection-grid-section .collection-cart-btn { display: block; } </style> <form method="post" action="/cart/add" class="collection-cart-btn"> <input type="hidden" name="id" value="{{ product_card_product.variants.first.id }}" /> <input type="submit" value="Add to cart" class="button" style="margin-top: 17px; width: 100%;" /> </form> <!-- cart button on collection page :: ends -->
Or try this:
<!-- cart button on collection page :: starts --> <style> .collection-cart-btn { display: none; } .collection-grid-section .collection-cart-btn { display: block; } </style> <form method="post" action="/cart/add" class="collection-cart-btn"> <input type="hidden" name="id" value="{{ card_product.variants.first.id }}" /> <input type="submit" value="Add to cart" class="button" style="margin-top: 17px; width: 100%;" /> </form> <!-- cart button on collection page :: ends -->
I hope it will solve your issue. If still face issue then please reply here, I will help you out.
Thanks.
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?
Hi @Jesper20 ,
I am able to see the screenshot due to file type issue.
Can you share again ?
share me the url please..
Hi @oscprofessional ,
Thanks for your reply!
Here is the url to see all 4 screenshots: https://postimg.cc/gallery/8L1bGnt (don't worry, no virus).
Share the both url pages where it is correct and incorrect.
@oscprofessional
https://cbd24.dk/collections/cbd-olie the other one is still being developed and pw protected, but same problem and same code I used for the atc button
Share me the incorrected act page url, with password.
Check this screenshot.
As you have defined that this is correct button design.
@oscprofessional yes that is correct. But when you check it on some mobile devices, they will display differently for some weird reason. Have you checked the url on mobile (no mobile through inspect, but actual mobile)?
@oscprofessional It has to be checked through an actual mobile, not through inspect
I have checked in my mobile.
@oscprofessional okay thanks. That's the thing, it's only on some devices and on yours it shows correctly.
The other one is https://nordicoil-us.myshopify.com/ pw: geucra
You want these buttons like green backround?
@oscprofessional no.
Here is how they should be displayed on all devices:
How it displays on some devices for some reason:
.slider-mobile-gutter .card__information {
height: 71px;
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
@oscprofessional added it to base.css since we are on Dawn theme, but didn't change anything. Do you think it's something to do with the height?
you have changed the password?
@oscprofessional I fixed the button on that site myself. Only the atc button on CBD24.dk still not working.
share the page URL
I have checked in 2 to 3 mobile devices actually. I did not found issue .
Sorry!
Tell me the issue now!
On which device its is arising ?
There is no "product-card-grid.liquid" under snippet for Crave theme. are there any alternatives?
How do i change the code to stay on the collection page after the product is added to the cart?! Now its sending the visitor to the cart page...
For this you will have to got to customize and then select theme settings and go to cart. there will be a dropdown to select where you want to go after add to cart button click. If you still not able to solve then you can connect me. I will help you. Thanks.
Is there a way to skip the cart and go directly to the checkout?
It's an old solution. Most the modern themes have this feature built in. You can watch this video https://www.youtube.com/watch?v=s98l1bUZe6k to turn on add to cart in your collection pages.
How to edit this code to made the add to cart change to sold out when the stock is 0 ?
We've fixed this as of March 28th, 2020. You need to add a few more tags to align and space the quantity picker and button correctly. Note: this works with the Brooklyn theme.
This code should be inserted in the middle of the product-grid-item.liquid Snippet file. We inserted it at line 82, before this code:
<a href="{{ product.url | within: collection }}" class="grid-product__meta">
Inserted code:
{% comment %} Next bit of code has been added to include "Add to Cart" button below every product in a grid, with the quantity displayed {% endcomment %} <form method="post" action="/cart/add"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> <br /> <center><input min="1" type="number" id="quantity" name="quantity" value="1"/></center> <input type="submit" value="Add to cart" class="btn" /> </form>
Let me know if this works.
Hey @artisan-meats I tried this out but it goes straight to the cart page rather than adding it! Any chance you could help with this?
Hi @rosewilkmu , we ended up using this solution to stay on the same page: https://community.shopify.com/c/Shopify-Design/Product-pages-Stay-on-the-product-page-after-adding-p...
It works well and is a nice user experience too!
Glad to hear you got it. Had the same issue
Great thank you !
Hi!
I ended up doing like you said, and it all works except the quantity selector. Upon clicking it, it takes me to the product page and asks me to select the quantity from there, I'm unable to increase quantity from the collections page itself.
Please do help me
Hey!
Brooklyn them: I have added the ATC button on my collections page, but I failed to stop it from redirecting it to the cart.
Any help in coding would be appreciated.
Thanks.
THANKYOU SO MUCH MAN !! been 3 days and you saved me another day thank u!!
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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024