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! I am having trouble with customers clicking "Add to Cart" on our gifts collection, which bypasses the product page and adds the item directly to their shopping cart. While this is fantastic for most items on our site, our "gifts" collection needs more information from the customer, so bypassing this page creates a lot more work for me as I then have to contact the customer to get the details I need. Additionally, some of our products have a variant for a rush fee and bypassing the product page means that they aren't paying that fee, so it's really important that I get this resolved. I'm using the Supply theme. Any help with clear directions is hugely appreciated. Thanks in advance. Cheers!
https://tipsytruckdelivery.com/collections/gifts
Solved! Go to the solution
This is an accepted solution.
Hi @TipsyTruck
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Assets/theme.scss.css
3. Copy code below to bottom of file
.collection-template-section .grid-uniform .grid-item form {
display: none!important;
}
Hope can help
If you find my reply helpful, please hit Like and Mark as Solution
EBOOST
This is an accepted solution.
Hi @TipsyTruck
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Assets/theme.scss.css
3. Copy code below to bottom of file
.collection-template-section .grid-uniform .grid-item form {
display: none!important;
}
Hope can help
If you find my reply helpful, please hit Like and Mark as Solution
EBOOST
Oh My Gosh! @EBOOST is my HERO!!!
Thank you, thank you, thank you!!
Cheers!
Jo 🥂
Hey there!
How do we use this to remove ADD TO CART button from one specific collection page?
There's a neater way to remove from either all collections or just specific ones, and that's using the Custom CSS box within the Product Grid Section. The code to use is:
.card-product-actions {
display: none !important;
}
To get here, within your admin panel select:
Sales channels > Online Store > Themes > Customize
Within the theme customizer, use the drop down at the top to navigate to Collections, and select the Collection template from which you wish to remove the Add to Cart buttons.
Within the template, on the left hand select the Product grid Section. Bottom right of this is a Custom CSS box, into which you can put the above code.
Then, make sure you apply this template to any Collections you want to remove the button from, while leaving the rest as default and the button in place.
For example in our store we offer custom guitar headstock decals, so on the collection pages for these we have removed the button: https://rothkoandfrost.com/collections/pursuit-luthiery-headstock-decals
Whereas on collections with standard non-customised items the button remains: https://rothkoandfrost.com/collections/pursuit-luthiery-guitar-finishing-guitar-spray-paint
Hope this helps!
Simon
Hi there... this solution didn't work for me, but I really need it to as I only need the "add to cart" option removed from my gifting collection. When I add the custom css code as listed, the button is still there. Help is so so so very appreciated!
Did you get the issue resolved? I have You exact same issue and could not find a solution.
It would be great if You could share the solution.
Thanks in advance.
Hi @Afeefa ,
You need add a tag to this collection after that use liquid code check & hide add to cart button.
There's a neater way to remove from either all collections or just specific ones, and that's using the Custom CSS box within the Product Grid Section. The code to use is:
.card-product-actions {
display: none !important;
}
To get here, within your admin panel select:
Sales channels > Online Store > Themes > Customize
Within the theme customizer, use the drop down at the top to navigate to Collections, and select the Collection template from which you wish to remove the Add to Cart buttons.
Within the template, on the left hand select the Product grid Section. Bottom right of this is a Custom CSS box, into which you can put the above code.
Then, make sure you apply this template to any Collections you want to remove the button from, while leaving the rest as default and the button in place.
For example in our store we offer custom guitar headstock decals, so on the collection pages for these we have removed the button: https://rothkoandfrost.com/collections/pursuit-luthiery-headstock-decals
Whereas on collections with standard non-customised items the button remains: https://rothkoandfrost.com/collections/pursuit-luthiery-guitar-finishing-guitar-spray-paint
Hope this helps!
Simon