Grouping filters

[PK2023]

Hello,

We have multiple (11) filters and each and every one of them is separate and important. We keep the filters open on the left side of the screen on desktop and since there are so many filters, the last ones are not visible until the end of the page. Is there a possibility to group filters to have them as for example a collapsible "See more" which would open the not so important filters?

We are using the Shopify search and discovery app.

[PaulNewton]

@PK2023  if a free app does not have an advanced feature seek out a paid app.

Shopify's free apps are introductory marketing-bullet-points.

Double check theme docs as some themes may have a naming conventions to help group info.

Though often if your also using tag filtering the tags are just one big list.

For lots of scrolling due to lots of options there's also grouping-values

https://help.shopify.com/en/manual/online-store/search-and-discovery/filters#grouping-filter-values 

Alternatively give the sidebar it's own ability to scroll free of the rest of the page.

For themes without features custom filter-grouping is advanced theme customization.

If you need this customization then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

The simplest fix is to improve the information architecture of collections so less filters are needed in the first place.

By the time a customer is on a collection page do they really need to be more than 3 clicks away from what they are looking for.

Analytics and ab-testing should be used to inform this.

every one of them is separate and important

...

last ones are not visible until the end of the page

---

 UX problem, recognize that contradiction, If they are all important none of them are it's right up there with slideshows trying to cram disparate content into a smaller space only to dilute the message of everything and overall just adds bloat that insists on itself to the customers detriment.

There is either an actual priority and "important" filters are the firsts ones at the top, or they are further down and not that important.

[PK2023]

Hello, Thank you so much for an extensive answer. I understand your comments totally. As I mentioned I do not want to use a paid app for this an. I do advanced customisations (Liquid, Script etc) myself but was just thinking if someone has done this already and has a code I can implement and not waste too much time 🙂 

[PaulNewton]

If you figure something out do share, even examples outline the process agnostically could help the next merchant but it can be a lot of work to document such things.

Meanwhile liquid isn't flexible enough for drop in features likes since there's no functions( rendered snippets are scoped) , no real dynamic variable naming, and no native support to create our own objects dynamically in liquid to just do simple global overrides from some drop in code.

Though some cases may get away with just wrapping the filter loops internal logic with another forloop and some capture variables, example below.

So implementation varies wildly among themes to integrate with each themes specific html structure; 🤢.

Especially combined with whatever the business specific logic is for deciding which X gets grouped with which Y;  either as hardcoded logic/values, or using metafields ,metaobjects, settings or JSON for some sort of management.

@PK2023 Example approach I agnosticized from an implantation that grouped filter-tags using a metaobject for managing mappings.

💣UNTESTED:

{% assign groups = null %}
{%- for ungrouped_filter in collection.filters -%}
  {% liquid # filters groups, PaulNewton shopify forums
    assign enable_filter_groups = true
  %}
  {%- if enable_filter_groups %}
    {% liquid # config - filters groups
      # this example uses a hypothetical metaobject using JSON to map filters to groups
      assign filter_groups_json = shop.metaobjects.filter_groupings.filters.json.value
      assign filter_groups =  filter_groups_json.groups
    %}
  {% endif %}

  {% for filter_group in filter_groups %}
    {% if ungrouped_filter.label == filter_group.label %}
      {% capture group %}
        {% comment %} filter logic, snippets, or html output here {% endcomment %}
        {% comment %} .... {% endcomment %}
      {% endcapture %}
    {% endif %}
  {% endfor %}

  {% assign groups = groups | append: group %}

{% endfor %}