Help Needed with Product Filters Display

Store Design
1

Screenshot 2024-12-03 at 11.27.42.png
Screenshot 2024-12-03 at 11.27.42.png3406×1760 375 KB

Hi everyone!

You were all super helpful the last time I asked a question here, so I’m hoping for some guidance again.

In one of my collections (https://www.buyloops.com/collections/frontpage), all the “Product Filters” are displayed at once, which takes up a lot of space. Is there a way to turn them into dropdown menus instead?

For example, the producer names list is especially long and pushes the products further down the page. I’d like to condense the filters into dropdowns so customers can immediately see the products without too much scrolling.

Thanks in advance for your help!

2

I think the word I’m looking for might be a nested menu :grinning_face:

3

Hello @buyloops ,

I think this is not the default of the streamline theme or there is another option in the theme option to align it.

btw if not yes its possible to display these options in dropdown but need theme customization.

Not possible to provide a solution here.
You need to go with a developer.

Thanks

4

Hi @buyloops

Your theme should support the ability to display multiple types of filters on the collection page, such as horizontal, vertical, and others, and enable you to assign different filter styles to different layouts.

To explore this, open the theme customizer in your Shopify admin, select the collection page template, click on the product grid on the left panel, and check the available filter options in the right-hand column - like this: https://screenshots.ablecanyon.com/KSPrntZqZTFSjZc9mmQ1

If you don’t see the desired options, it’s possible that the filters need to be configured in the theme settings or that specific options require enabling through a code update.

You can also examine the theme’s code to understand how the filters are implemented and what types are available. Specifically, look in the templates/collection.liquid file for details.

This file typically contains the logic and structure for the filters used on collection pages, and reviewing it might give you insights into how different filter types are managed or displayed.

Additionally, some advanced filter functionalities might only be accessible by integrating third-party apps or through custom development.

5

Hi @buyloops ,

There will be 2 solutions for you:

1: Add dropdown for filters. This will require a lot of changes to the code and you will need to hire a professional for it.

2: Add scroll for filter. Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.collection-filter__inner .tag-list {
    max-height: 150px;
    overflow-y: auto;
}

I hope it helps!

6

Hey Buyloops,

Has this been resolved? If not, I’d be happy to help you with implementing the dropdown/nested menus as it needs custom coding

7

Hi PaulMartin!

It actually hasn’t been resolved yet, so I would very much love to accept your offer of help! Thanks for that.

You can write me a DM and we can talk further regarding this :blush:

8

Hi @buyloops ,

Have you tried my solutions?

If you want, I can check and add dropdown for you

9

Not the best at coding, but would be very thankful if you could help - thanks!

10

Hi @buyloops ,

Please go to collection-filters.liquid file and change all code:

{%- assign tag_limit = 5 -%}
{%- assign show_button_limit = tag_limit | minus: 1  -%}
{%- assign total_active_filters = 0  -%}

  

    {%- for filter in collection.filters -%}
      {%- assign total_active_filters = total_active_filters | plus: filter.active_values.size -%}

      {%- for filter_value in filter.active_values -%}
        - {{ filter_value.label | escape }}
          
          
        
      {%- endfor -%}
    {%- endfor -%}