Hide filters if 0 products - Prestige Thème / Shopify 2.0

Hide filters if 0 products - Prestige Thème / Shopify 2.0

New Member
8 0 0

Hi guys, 


I'm using the storefront filtering on Prestige 2.0, and I would like to hide the elements with no products (= 0) on the filters (on Collection Page). 


Capture d’écran 2022-01-10 à 16.44.10.png


For exemple, in this case, if I select "In stock", I would like to hide automatically "Out of stock" as there are no products available. 

Then, if I unselect "In stock", I would the "Out of stock" back again (if there is a more than 1 product corresponding). 


I don't know if someone already does it and have some code to share ? 🙂


Thanks a lot! 

Replies 2 (2)

Shopify Partner
6350 582 1356

That is an advanced customization,

  • first check theme for any settings to disable certain filters or contexts
  • reach out to the themes developers to make the feature request that filters that are binary(off/on , instock/outofstock ) either only show 1 state at a time or behave like a toggle.
  • hire someone for the customization after reading and understanding the below User Experience warning to be sure it fits the context of the themes design:

Just because a road is closed doesn't mean you have to remove the asphalt , at some point people need to still know what the possible path is  BEFORE they need it.

Though yes if such a thing is unusable the argument is only available options should be viewable and unavailable options it shouldn't be seen at all .


Deleting/hiding an option may be against the themes design intent of informational permanency  overview awareness versus removing|truncating information; you don't want to keep customers unaware of options they may be able to change too regardless if the current set of filters means that option isn't usable (note how I do not say the option is irrelevant).

Irrelevant options would be say a gender filter when the entire collection is women, or color for a collection of products that only ever come in 1 color.

The other thing displaying disabled choices can do is help highlight options that are selected by contrast; when not using things like checkbox toggles.


Save time & money ,Ask Questions The Smart Way

Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com

Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org

8 0 2

If it's a 2.0 template, I just added a single line in the base.css file. 

.facet-checkbox--disabled {display:none!important;}