Make Sidebar Collapsible - Supply Theme

[JSHaunters]

Hey there,

Really hoping someone can help! Using the Supply Theme and have the sidebar filtering by group. We've already significantly narrowed down our tags as it is but some of our pages are still running too long because of the sidebar. Is there any way to customize the sidebar to make it collapsible or toggle more or less so this doesn't happen?

Thank you in advance!

[Hyde]

Hi, @JSHaunters,

Hyde here from Shopify. Great question!

If you are referring to the filter tags on a collection page, then I may be able to escalate your request to our theme team to help you out with that by possibly creating a collapsible feature like this:

If this is what you're looking for then I will send you a direct email about this to get the ball rolling. I look forward to hearing from you.

All the best, Hyde.

[JSHaunters]

Hey Hyde,

Just responded to your PM, thanks!

[KalM]

Hi! Piggybacking here since similar threads elsewhere are abandoned. Instead of making filter groups collapsible, I'd like them to scroll. Where and how do I make overflow tweaks to handle this?

Thank you.

[Ninthony]

If you're using supply you can go into your theme.scss.liquid file in your Assets folder and add this to the bottom:

.sidebar.collection-filters {
    height: 300px;
    overflow-y: scroll;
}

Just set the height to however tall you want it to be. 

[KalM]

Thank you for the fast response. This lets me scroll the entire sidebar. How do I separate by filter group?

[Ninthony]

I don't know what you mean when you say separate by filter group.

[Ninthony]

Nevermind, figured it out. Here's the code you would need for that:

ul.advanced-filters {
    height: 100px;
    overflow-y: scroll;
}

Again, just set the height to whatever you want it to be. 

[IvanTodorov]

Hey @Hyde , 

Can you reach out to me in this regard as well? I am also trying to make my supply theme collapsible/drop-down-able. 

Thank you in advance!