Hide 1 specific filter on 1 specific collection page

oihanevr · ‎01-27-2025

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.)

Could anyone help me with this? with the right CSS code to make that specific filter hidden? Or by adding code to the theme code, or another way...?

https://www.peonypets.be/collections/katten-supplementen password: oihane

pawankumar · ‎01-29-2025

Hi @oihanevr
If that's not working then you can put it in theme.liquid before body closing tag

<style>
:has([rel="canonical"][href*="katten"]) [id*="dog-age-group-template"] {
    display: none;
}
</style>

Thanks!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan

View solution in original post

pawankumar · ‎01-27-2025

Hi @oihanevr
You can target a css like this

:has([rel="canonical"][href*="katten"]) [id*="dog-age-group-template"] {
    display: none;
}

It is checking if katten is in the URL and then hiding dog filter
Please check if it is helpful to you

Thanks!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan

oihanevr · ‎01-29-2025

I pasted this in the CSS box but nothing changes

pawankumar · ‎01-29-2025

Hi @oihanevr
If that's not working then you can put it in theme.liquid before body closing tag

<style>
:has([rel="canonical"][href*="katten"]) [id*="dog-age-group-template"] {
    display: none;
}
</style>

Thanks!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan

oihanevr · ‎01-30-2025

.

oihanevr · ‎01-30-2025

Thank you 🙂 This does help!

mt686 · ‎01-27-2025

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 <body> tag based on the collection being viewed, so you can target styles to a specific collection.

Steps to Fix:

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 <body> 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.

Let me know if you need further clarification! 😊

oihanevr · ‎01-29-2025

1) I can't find any liquid with "filter" in it.

2) I did find a liquid "facets.liquid" is it that one? If so, where should I paste it...? I don't know after which <div> or whatever I should paste this code.

With the CSS option, my initial problem was locating that specific class or ID of the filter. So I can't do that

Hide 1 specific filter on 1 specific collection page