Keep Collection Page Filters Open - Focal Theme

Store Design
1

Hello, we are looking for a code we can add so all filters on the collection pages are open at all times. Currently our theme only allows us to keep the first filter open. I’ve attached a photo to show how it should look, thank you!

Here is a link to the site: https://pondstream.com/collections/pond-fountain-timers

Screenshot 2024-02-01 172106.png
Screenshot 2024-02-01 172106.png1704×505 123 KB

2

Hi, HDkingy, I don’t know what theme you are using, but there is this element in the structure of the filters:

the closed ones will have aria-expanded=“false”, you can force that in the code to always be aria-expanded=“true”, such as the following code
3

Hello @hdkingy :waving_hand:

In Shopify Admin, you can go to Edit theme code, open file custom.js and add this code at the bottom

let filters = document.querySelectorAll('.product-facet__filter-item')
filters.forEach(filter => {
    filter.querySelector('button').setAttribute('aria-expanded', true)
    filter.querySelector('collapsible-content').style.overflow = 'visible'
})

Hope that helps!

4

Worked perfect, thanks!

5

You are welcome :slightly_smiling_face: