Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello,
Is there a way to remove unselected options in filter? I want to be as economical as possible and display as little information as I possibly can on the webshop I'm creating. Please take a look at the picture below:
I would also like to remove the number of products displayed in parenthesis:
Solved! Go to the solution
This is an accepted solution.
There's a easy line to cross between having a minimal aesthetic and creating a reductive poor user experience.
Have any customers complained about to many options or they have too much information .
If not that's an indication this is a poor use of time just to apply personal views to a business feature that will impact customers with no actual use case or testing.
If you still must do this and if using a dawn based theme see the CSS bandaid below for hiding disabled filters to add to the themes custom css settings or file.
To not render such things as the match count, i.e. (1) , that's possibly an advanced customization whose specifics will vary wildly between themes. Some themes may wrap such things in a CSS targetable <span> or other tag; currently dawn themes do not though.
If you do not know how to code seek professional services, avoid using javascript for things like this unless doing ab testing..
If it's a dawn theme you could open an issue on the dawn repo to make the filter count wrapped in an html element so it's more easy for merchants to customize.
If it's a shopify made theme you may also be able to contact support and use your accounts free courtesy design time (~60minutes) to have them adjust this behavior.
Learn about storefront filtering internals here:
https://shopify.dev/docs/themes/navigation-search/filtering/storefront-filtering
/* for OS2.0 Dawn Based themes hide inapplicable(disabled) product filters */
/*
By using this you are removing information customers may need to make navigation decisions
When in doubt a/b test.
*/
.facet-checkbox--disabled {
display: none;
}
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
Hi @steffenrg,
I do not think it is a user friendly to remove the unselected options, unless you have other way for you customer to select the options if they want it.
Thank you for your reply. But it's really important that this be removed.
This is an accepted solution.
There's a easy line to cross between having a minimal aesthetic and creating a reductive poor user experience.
Have any customers complained about to many options or they have too much information .
If not that's an indication this is a poor use of time just to apply personal views to a business feature that will impact customers with no actual use case or testing.
If you still must do this and if using a dawn based theme see the CSS bandaid below for hiding disabled filters to add to the themes custom css settings or file.
To not render such things as the match count, i.e. (1) , that's possibly an advanced customization whose specifics will vary wildly between themes. Some themes may wrap such things in a CSS targetable <span> or other tag; currently dawn themes do not though.
If you do not know how to code seek professional services, avoid using javascript for things like this unless doing ab testing..
If it's a dawn theme you could open an issue on the dawn repo to make the filter count wrapped in an html element so it's more easy for merchants to customize.
If it's a shopify made theme you may also be able to contact support and use your accounts free courtesy design time (~60minutes) to have them adjust this behavior.
Learn about storefront filtering internals here:
https://shopify.dev/docs/themes/navigation-search/filtering/storefront-filtering
/* for OS2.0 Dawn Based themes hide inapplicable(disabled) product filters */
/*
By using this you are removing information customers may need to make navigation decisions
When in doubt a/b test.
*/
.facet-checkbox--disabled {
display: none;
}
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
May I ask where should I exactly paste this code?
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025