Solved

Filter customization -- Removing unselected options -- in theme Dawn

steffenrg
Tourist
3 0 1

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:

 

Skjermbilde (58).png

 

I would also like to remove the number of products displayed in parenthesis:

 

Skjermbilde (59).png

 

 

Accepted Solution (1)
PaulNewton
Shopify Partner
6274 572 1311

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

 

 

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


View solution in original post

Replies 4 (4)

made4Uo
Shopify Partner
3803 713 1114

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. 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
steffenrg
Tourist
3 0 1

Thank you for your reply. But it's really important that this be removed.

PaulNewton
Shopify Partner
6274 572 1311

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

 

 

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


Dunacase
Visitor
3 0 0

May I ask where should I exactly paste this code?