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

[Platypyrus]

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.

[AnneLuo]

Hi, @Platypyrus 

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

[Sweans]

Hi @Platypyrus,

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

Step - 2: Navigation to Themes > click "..." in Trade theme > Edit code

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)

<details id="Details-{{ forloop.index }}-{{ section.id }}" class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter" data-index="{{ forloop.index }}" {% if filter_type == 'vertical' and forloop.index == 1 %} open {% endif %}>

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:

<details id="Details-{{ forloop.index }}-{{ section.id }}" class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter" data-index="{{ forloop.index }}" open>

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

[Platypyrus]

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. 

[Sweans · Accepted solution]

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

2. 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' -%}
<show-more-button>
<button
class="button-show-more link underlined-link no-js-hidden"
id="Show-More-{{ forloop.index }}-{{ section.id }}"
type="button">
<span class="label-show-more label-text"
><span aria-hidden="true">+ </span>{{ 'products.facets.show_more' | t -}}
</span>
<span class="label-show-less label-text hidden"
><span aria-hidden="true">- </span>{{ 'products.facets.show_less' | t -}}
</span>
</button>
</show-more-button>
{%- 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

[Platypyrus]

It worked perfectly, thanks for the help!!!