How to show and expand all filters on collection pages by default?

Store Design
, , ,
1

On a collections page, I want to show ALL of the filters and expand all accordions. (Dawn theme)

I have tried the solutions previously given but I can’t get them working or I can’t find where to add the code.

Screenshot 2024-07-17 at 5.07.06 PM.png
Screenshot 2024-07-17 at 5.07.06 PM.png352×138 667 Bytes

2

Hi, @Platypyrus

I can help you with it. So I need to access your store as a collaborator if possible.

3

Hi @Platypyrus ,

Step - 1: Go to your store admin > Sale channels > Online store

Step - 2: Navigation to Themes > click “…” in Trade theme > Edit code

Sweans_0-1721276032384.png
Sweans_0-1721276032384.png697×422 35.8 KB

Step - 3: In the edit code, search for “facets.liquid” and open the file

Step - 4: In “facets.liquid” file, you can find the following code: (line - 367, which can vary depending on the version of the theme)


Step - 5: In the above-mentioned code, replace the “if” condition with the “open” attribute to expand all filters. (You can remove the above code and paste the below-mentioned instead) Eg:

```ruby

Step 6: Save the file and reload your collection page, you’ll see all filters expanded on the collection page.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans
1 Like
4

Ok, facets.liquid was helpful but I didn’t have a “details id”. I was however, able to search the page for “forloop.index” and I found some similar code and was able to figure it out from there.

To finish this up, I would just need to get rid of the “Show More / Show Less” link since it will be useless now.

5

Hi @Platypyrus ,

Great to hear that you were able to figure it out by searching for forloop.index on the page and using the similar code you found!

To display all the options without Show More/Show Less and to remove these links, you’ll need to remove certain code from the facets.liquid file.

  1. To display all options:

You can search for the following code in the file and remove it from the code:

{% if forloop.index > show_more_number and filter_type ==
 'vertical' %} show-more-item hidden{% endif %}

Note: removing these class names will let you display all options of the filter menu

  1. To remove all Show More/Show Less links:

You can search for following code in the file and remove it from the code:

{%- if filter.values.size > show_more_number and filter_type == 'vertical' -%}

{%- endif %}

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

1 Like
6

It worked perfectly, thanks for the help!!!