Hi I want to remove prices off of some of my collectio pages- not all of them. IS there a CSS i can add to each collection section ?
url: https://www.sarahhoodstudio.com/collections/landscape
password: sarahhoodjewelry
Topic summary
A user wants to hide product prices on specific collection pages, not all of them, on their Shopify store.
Two main solutions were provided:
1. Liquid code approach:
- Add conditional code to the theme.liquid file before the
</head>tag - Uses
{% if collection.handle == "landscape" %}to target specific collections - Can be extended with
orstatements to hide prices on multiple collections - Targets
.thumbnail .pricewithdisplay: none !important
2. Template-based approach:
- Create a custom collection template in the theme editor (e.g., “no-prices”)
- Add CSS code
.price { display: none; }to the product grid in that template - Apply the template to specific collections through the collection settings
- More scalable for managing multiple collections without editing code repeatedly
Important note: The CSS selector may vary by theme—one user found .product-grid--price worked instead of .price on their site. Users should verify the correct selector for their specific theme.
You can do that by adding this code in theme.liquid file, before tag
{% if collection.handle == "landscape" %}
.thumbnail .price { display: none !important }
{% endif %}
If you want to hide price for another collection, please add code like this
{% if collection.handle == "landscape" or collection.handle =="your collection handle" %}
.thumbnail .price { display: none !important }
{% endif %}
Here is the CSS code you can use to hide the prices:
.price {
display: none;
}
Adding this will hide the prices on all collections if you do not use templates.
https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates
If you do not use templates here is how you can create one and apply to collections.
- While on the theme editor. Click Default Collection > Collections > Create Template
- write your template name. I used no-prices and create
-
Add the CSS Code aboove to the product grid
-
Edit the collection that you want to hide the prices on. Under Products on the left menu
-
Change the Theme Template to no-prices (or whatever you created) and Save
Hope this helps.
5 Likes
The above code/solution does work. I just want to note that, depending on your theme, “.price” may not be a recognized item. On my site, it ended up being “.product-grid–price”
You’re on the right track already. For hiding prices on only some collections, the cleanest option is using a separate collection template (like a “no-price” template) and removing the price block there, then assigning that template only to those collections. It avoids pagination issues and won’t affect other collections or the homepage.
If you don’t want to maintain CSS selectors or touch theme code every time the theme updates, some merchants handle this with a simple hide-price tool instead. This app, lets you hide prices per collection directly from the admin without editing Liquid or CSS, which can be easier long-term