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

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

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

PaulNewton
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


naesmac
Tourist
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;}