Make Sidebar Collapsible - Supply Theme

Solved
JSHaunters
Tourist
7 0 1

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
Hyde
Shopify Staff
Shopify Staff
852 96 155

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
JSHaunters
Tourist
7 0 1

Hey Hyde,

 

Just responded to your PM, thanks!

0 Likes
KalM
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
Ninthony
Shopify Partner
1783 256 695

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
KalM
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
Ninthony
Shopify Partner
1783 256 695

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
Ninthony
Shopify Partner
1783 256 695

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
IvanTodorov
New Member
4 0 0

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! 

0 Likes
51NBoutique
New Member
1 0 0

Hi @Hyde 

 

Would you be able to post here how to create the drop down/collapsible group filters? 

I would also like to know if we can add filters for Product Type?

Lastly, how do you re-order filters?

 

Thank you in advance for your help!

Michelle & Leslie

0 Likes