Collapse or Scroll Groups on Collection Pages

New Member
2 0 0

Hello! I use groups as sidebar navigation in my store. The problem I'm facing is that on larger collections, the page continues to run until all values within all groups are displayed (screenshot 1). Even more troubling, the next page/back page is after that. Take a look at: https://livezippy.com/collections/home

We're looking to consolidate some of the values, but even so, it will still extend further than we want. Can anyone recommend either an app or some code to either collpase or force scrolling of these groups? See screenshots 2&3 for examples on other platforms. Thanks again!

screenshot 1   screenshot 2   screenshot 3

https://livezippy.com
0 Likes
Highlighted
Shopify Expert
488 5 89

You don't need an app. The easiest solution would be to do a quick CSS modification. Open the timber.scss.liquid file under your theme Assets. Do a search for '.advanced-filters' and add this:

max-height: 200px;
overflow: auto;

So it looks like this:

.advanced-filters {
  margin-bottom: $gutter;
  max-height: 200px;
  overflow: auto;
}

 

2 Likes
Highlighted
New Member
2 0 0

This is PERFECT. Exactly what I was looking for. Thank you so much!

https://livezippy.com
0 Likes
Highlighted
Tourist
3 0 0

hello gina! I want to add these , but when I try to search for .advanced-filters, doesn't appear at all. You know where I can find it, or put it if its the case?

0 Likes
Highlighted
New Member
1 0 1

Crisanverasa, I found mine under "Grouping Content" - I am using Prestige theme. This is what my code looked like:

ul,
ol {
margin: 0;
padding: 0;
}

1 Like
Highlighted
Tourist
3 0 0

can i see how it looks afterwards? I tried to look at it, and i have it the same as you, but still can´t get any results... help plss

0 Likes