Customizing Filter List using Craft 12.0.0??

dannye770 · ‎01-27-2024

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!

ThePrimeWeb · ‎01-27-2024

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

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@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

dannye770 · ‎01-27-2024

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

ThePrimeWeb · ‎01-27-2024

Hey @dannye770,

Can I have the link to your store?

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

dannye770 · ‎01-27-2024

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 · ‎01-27-2024

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@theprimeweb.com or check out the website
Check out our interview with Shopify!

dannye770 · ‎01-27-2024

https://num5a183wo4z5mb9-28589981741.shopifypreview.com

Thanks for taking a look! No pw needed 🙂

ThePrimeWeb · ‎01-27-2024

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

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@theprimeweb.com or check out the website
Check out our interview with Shopify!

dannye770 · ‎01-27-2024

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 · ‎01-27-2024

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@theprimeweb.com or check out the website
Check out our interview with Shopify!

SomeUsernameHe · ‎01-27-2024

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 · ‎01-27-2024

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 · ‎01-27-2024

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 · ‎01-27-2024

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.

Customizing Filter List using Craft 12.0.0??