Solved

Customizing Filter List using Craft 12.0.0??

dannye770
Excursionist
20 1 9

Hello! I'm currently customizing my shop to use the Craft 12.0.0 theme. Out of the box, filters aren't included, so I'm using the "Search & Discovery" app to add filters based on my tags. Quick and easy to add. Super cool. 

 

But I don't want ALL of my tags to show up in the filter list. I only want certain tags to be filter options for customers. How can I limit this list?

 

When I preview on developer tools, it looks like the filter component is called "facets-layout-list  facets__list" and the list items are called "list-menu__item  facets__item" -- but I can't seem to find these referenced anywhere in any of the template code. 

 

Any help would be appreciated!

Accepted Solutions (2)
ThePrimeWeb
Shopify Partner
1035 268 212

This is an accepted solution.

Hey @dannye770,

You could use the value selector to hide exactly what you need
see the part "value="Art / Books"

 

li.list-menu__item.facets__item:has(input[value="Art / Books"]) {
    display:none;
}

 

 

Within the li tag you can find this

 

ThePrimeWeb_0-1706388086976.png

 

And you can just comma seperate and keep stacking them to hide exactly what you need

 

li.list-menu__item.facets__item:has(input[value="Art / Books"]),
li.list-menu__item.facets__item:has(input[value="baby"]) {
    display:none;
}

 

 

To apply, just to your theme.liquid file and right after the <head> tag paste them within two style tags as such

<style>
li.list-menu__item.facets__item:has(input[value="Art / Books"]),
li.list-menu__item.facets__item:has(input[value="baby"]) {
    display:none;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here

View solution in original post

dannye770
Excursionist
20 1 9

This is an accepted solution.

This is awesome!! 

 

I actually ended up stripping out the <style> tags and put it in the "Custom CSS" section of my theme editor, rather than messing with the theme.liquid file. And it works like a charm! This is exactly what I was hoping to do and just couldn't figure out the correct syntax. 

 

Thank you so much for the assistance!! 

View solution in original post

Replies 11 (11)

ThePrimeWeb
Shopify Partner
1035 268 212

Hey @dannye770,

Can I have the link to your store?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here
dannye770
Excursionist
20 1 9

Hi there - we're at https://haustheory.com -- but I'm still on a very old theme right now, so it doesn't show what I'm trying to work on. I'm currently customizing the new one and want to switch it over soonish. 🙂

ThePrimeWeb
Shopify Partner
1035 268 212

I see, could you share the preview link to the new store along with the password (if any). I can't work on the old store, I need to see the new one.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here
dannye770
Excursionist
20 1 9

https://num5a183wo4z5mb9-28589981741.shopifypreview.com

Thanks for taking a look! No pw needed 🙂

ThePrimeWeb
Shopify Partner
1035 268 212

This is an accepted solution.

Hey @dannye770,

You could use the value selector to hide exactly what you need
see the part "value="Art / Books"

 

li.list-menu__item.facets__item:has(input[value="Art / Books"]) {
    display:none;
}

 

 

Within the li tag you can find this

 

ThePrimeWeb_0-1706388086976.png

 

And you can just comma seperate and keep stacking them to hide exactly what you need

 

li.list-menu__item.facets__item:has(input[value="Art / Books"]),
li.list-menu__item.facets__item:has(input[value="baby"]) {
    display:none;
}

 

 

To apply, just to your theme.liquid file and right after the <head> tag paste them within two style tags as such

<style>
li.list-menu__item.facets__item:has(input[value="Art / Books"]),
li.list-menu__item.facets__item:has(input[value="baby"]) {
    display:none;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here
dannye770
Excursionist
20 1 9

This is an accepted solution.

This is awesome!! 

 

I actually ended up stripping out the <style> tags and put it in the "Custom CSS" section of my theme editor, rather than messing with the theme.liquid file. And it works like a charm! This is exactly what I was hoping to do and just couldn't figure out the correct syntax. 

 

Thank you so much for the assistance!! 

ThePrimeWeb
Shopify Partner
1035 268 212

Hey @dannye770,

Glad I could help. Good luck with the store redesign. I hope you do well 😊

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here

SomeUsernameHe
Shopify Partner
450 49 81

Hmmm, well you could go the cheap and dirty route and just use "display:none" on the tag's you do not want to be displayed on the frontend. Then you wouldn't have to dig through code. 

Also, if you are using an app, you might not even have direct access to the theme files for the "Search & Discovery" app.

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
dannye770
Excursionist
20 1 9

Thanks - this is what I was trying to find how to do -- but you're right, I don't seem to have access to the app's code. 

 

In other themes, which have filters built in, the filters can be controlled through the facets.liquid file. I have that file, but it only seems to reference sorting, not filters. Although, the facets.liquid file DOES seem to be controlling how the filters display. 

 

So I was trying to identify where I should even try to add a display:none type statement... I'm totally a novice, too. I generally get how it works and have some experience in other coding languages, but very little with websites. Thanks!

SomeUsernameHe
Shopify Partner
450 49 81

Well, I am not too familiar with your theme, but most themes have a "Custom CSS" section in the theme settings inside your theme customizer. 

You should be able to use something like this to hide the list item you want. Remember the number represents the list item number BEFORE any are hidden.

<style>
.facets__item:nth-child(2) {
    display: none;
}
</style>

 
If you do not have a "Custom CSS" option with your theme, you can add this code right before the closing </head> tag in theme.liquid. 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
dannye770
Excursionist
20 1 9

Thanks for the reply! This is the type of thing I was expecting/hoping to be able to do. With this code on its own, it isn't hiding the second item in the list. Do I need to also specify the ID of the specific filter? I have multiple. And if so, how does that affect this css? 

It seems like I might need to specify "Details-3-template--16994395521256__main-collection-product-grid" somewhere to make sure it is hiding the second item on the correct filter, but I'm way too much of a noob to know how to actually do that. 

dannye770_0-1706388711847.png