How can I make the sidebar collapsible in the Supply Theme?

Store Design
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!

2

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.

3

Hey Hyde,

Just responded to your PM, thanks!

4

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.

5

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.

6

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

7

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

8

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.

1 Like
9

Hey @Andrew_8 ,

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!

10

Hi @Andrew_8

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

11

I used this tutorial from the pipeline theme and modyfied it a bit: https://help.groupthought.com/article/956-collection-sidebar-collapse-and-expand-filter-options

In bottom of collection-sidebar.liquid after the last endif:

In scss:

.sidebar .h3:hover{cursor: pointer;}
.sidebar .h3:after {
    content: "\2796";
    font-size: 13px;
    float: right;
    margin-right: 7px;
}

.sidebar .h3.active:after {
    content: '\02795';
}

.sidebar .h3 {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
2 Likes
12

Hey @Andrew_8

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

Thanks

13

Hi @51NBoutique ,

Sorry for the late reply. While I cannot post the information here, I would recommend that you contact us through live chat, email, or callback through our help center. Since this is the next step I’ve marked this reply as the solution for the benefit of others who may discover this topic. Thanks! -Hyde

14

Hi, @Godottidotcom ,

We’re not currently able to provide account-specific support via the Shopify Community, but we’d be happy to continue assisting you through live chat, email, or callback. Please visit our help center and log in to your account to create a support request. Once you are talking to a support advisor and verified your account they can assist you with this. Thanks! -Hyde

15

Hi @Andrew_8 ,

If you don’t mind me asking, could you please teach me how to create a collapsible feature you mention it on the above? Is there have any code or purchase an app?

Thank you in advance for your help!

Seong

16

Hi @Seong ,

As we are not coders in Support I can not teach you how to create or build a collapsible menu. It would probably be easier and simpler for you to simply pick a theme that already has a collapsible menu in it from our theme store.

The Supply theme is one of our vintage themes and as such is no longer available in our theme store. This means that our support is further limited moving forward, which is all the more reason to consider one of our Online Store 2.0 themes. Alternatively, you could look at some of the enhanced menu options available in our app store.

What kind of store are you creating? And what are you selling? Perhaps if I got a sense of why you want this feature I could help give you more specific tips and advice, and possible workarounds.