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

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
7721 678 1619

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


View solution in original post

Replies 4 (4)

made4Uo
Shopify Partner
3873 718 1213

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. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
steffenrg
Tourist
3 0 1

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

PaulNewton
Shopify Partner
7721 678 1619

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


Dunacase
Visitor
3 0 0

May I ask where should I exactly paste this code?