Issue: Users need to hide the “Add to Cart” button from specific collection pages and their associated product pages in Shopify, without affecting other collections.
Initial Solution (Moeed):
theme.liquid file</body> tag that targets specific collection by handle (e.g., “weightlifting”).product-grid-item .btn-wrapper { display: none; }Alternative Approach (WL101):
theme.liquid, added CSS directly to the Custom CSS field of a duplicated collection templateOngoing Issues:
theme.liquid method isn’t working for their “bespoke” collection, despite following the same steps (already has CSS hiding prices on that collection)Status: Partially resolved with multiple approaches suggested, but implementation challenges persist for some users.
Hi,
I am having trouble removing the Add to Cart button from a collection page and from the product pages of the product in this collection. I ONLY want to remove the button from a specific collection and not all collections. I created a new collection template and thought the Custom CSS field would allow me do achieve this, but I can’t seem to find the right selector to remove the button. Does anyone know what selector/code to use or have a different solution that could work?
Theme: Palo Alto
Hey @WL101
Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!
Best Regards,
Moeed
Hi @WL101
Could you send that page link?
Hi,
This is the current collection page: https://weightlifting101.com/collections/weightlifting
I created a copy of that collection template for the collection from which I want to remove the button, but I as I haven’t found a solution to this, that collection page has not been published. Apart from the button, the structure of these collections would be the exact same.
Is that what you need to take a further look into it?
Hey @WL101
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
{% for c in product.collections %}
{% if c.handle == "weightlifting" %}
{% endif %}
{% endfor %}
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi Moeed,
Thank you for your help. Rather than editing the theme.liquid file, I added the code to the Custom CSS field:
.product-grid-item .btn-wrapper {
display: none;
}
Editing the theme.liquid file would have changed the collection page that I wanted to keep as is, wouldn’t it? In this way, I was able to remove the button from only the new template which is what I wanted to do.
Hi,
I’m having a similar issue. Where did you enter the Custom CSS? And how did you get it to only work on the collection page?
https://thegoddessgardenaustralia.com.au/collections/temples
Hi Moeed,
I tried to apply what you wrote above … but it didnt work… still showing add to cart option… (note that I applied already a CSS code for no price either on that collection)
could you try to help me ?
See screenshot of the collection page and what I followed
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
{% for c in product.collections %}
{% if c.handle == “bespoke” %}
{% endif %}
{% endfor %}
