I have a webshop for cats and dogs, I have some specific supplement products that go for both animals, so I need them to show in 2 different collections. It was kinda tricky with the meta categories but I managed to sort that out. So now some products have a meta category of “diet dogs” (it shows options such as puppy, junior, adult, senoir) and also a meta category for “diet cat” (it show options such as kitten, adult, senior). The problem now is that on the collection page of the cat supplements, it shows in the filters the “diet cat” filter and the “diet dog” filter… I only want it to show the “diet cat” filter. I have tried to use CSS “visibility: hidden” on that specific filter box but I can’t find what ID or class to use to hide it.
(BTW: I add a lot of CSS through the customization page, maybe that is not the best way, maybe it’s better to change the CSS in the actual code of the theme but it works great for me to locate exactly where I want the changes to happen. I have basically customized my whole theme with this method.)
To hide the “Diet Dog” filter on the specific “Cat Supplements” collection page, you can use a combination of CSS and Shopify’s unique body class system. Shopify adds unique classes to the tag based on the collection being viewed, so you can target styles to a specific collection.
Steps to Fix:1. Identify the Collection’s Body Class:
Go to the collection page in your browser.
Right-click anywhere on the page and select Inspect.
In the tag, look for a unique class like collection-katten-supplementen or something similar. This class is specific to that collection.
Add CSS Code:
Open your Shopify admin and navigate to Online Store > Themes.
Click Actions > Edit Code next to your active theme.
Locate and open your CSS file, often named base.css, theme.css, or similar.
Insert the CSS Code:
At the bottom of the CSS file, add the following code:
/* Hide the Diet Dog filter on the Cat Supplements collection page */
body.collection-katten-supplementen .filter-diet-dog {
display: none;
}
Replace .filter-diet-dog with the actual class or ID of the “Diet Dog” filter. Use the Inspect Element tool to identify the class or ID of that specific filter.
Save and Test:
Click Save in the editor.
Refresh the “Cat Supplements” collection page to see if the “Diet Dog” filter is hidden.
Alternative: Using Liquid Code
If you want to ensure that the filter doesn’t load at all (rather than just hiding it with CSS), you can modify the Liquid code for the filters:
Locate the file that controls the filters, often named collection-filters.liquid or something similar.
Add a condition to exclude the “Diet Dog” filter when on the “Cat Supplements” collection:
{% if collection.handle != 'katten-supplementen' %}
<!-- Code for Diet Dog Filter -->
{% endif %}
This ensures the filter doesn’t appear at all on the specific collection page.
No-Code Alternative
If you’re not comfortable with code changes, consider using EasyEdits. It allows you to visually hide or customize elements on specific pages without needing to write CSS or Liquid code.
This does help!