Make Sidebar Collapsible - Supply Theme

Highlighted
New Member
2 0 0

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!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
444 49 97

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:

 

20-08-ske8b-sdzbb

 

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.

Hyde | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
2 0 0

Hey Hyde,

 

Just responded to your PM, thanks!

0 Likes
Highlighted
New Member
3 0 0

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.

0 Likes
Highlighted
Shopify Partner
1432 193 482

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. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
3 0 0

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

0 Likes
Highlighted
Shopify Partner
1432 193 482

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

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Shopify Partner
1432 193 482

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. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like