Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

How to change the Filters facets from a dropdown to normal list?

How to change the Filters facets from a dropdown to normal list?

vishwa-spbx
Visitor
2 0 0

I'm using dawn theme and the provided filters in collection page is displayed as dropdowns. I'd like to have them always open and in the sidebar area. How can I do this?

I tried to do it with css but no luck.

This is how the container div looks like after the page load

<details class="disclosure-has-popup facets__disclosure js-filter" data-index="1">

And after I click on any of the filter name/label, it expands with open="" attribute added.

<details class="disclosure-has-popup facets__disclosure js-filter" data-index="1" open="">

 

What can I do to change this behavior?

Replies 3 (3)

devcutstudio
Tourist
6 0 1

Hi, may be you need to look like this 

likhonsds_0-1636374596909.png

if yes then you need to add custom code
change: 

  • component-facets.css code 
  • add padding on body content
  • <details id="Details-{{ forloop.index }}-{{ section.id }}" class="disclosure-has-popup facets__disclosure js-filter" data-index="{{ forloop.index }}" open>Hope you get idea from here thank you
vishwa-spbx
Visitor
2 0 0

I'd like it to look like this,

Untitled.png

 

 

husseiny
Shopify Partner
9 0 3

hello,

i was wondering if you got this working, as i'm trying to accomplish the same thing on my theme.