Controlling Expanded State for Filters

This documentation explains how to control the expanded state of filters in the new Findify app for Shopify. By default, all filters are initially open. You can configure the filters to be collapsed either globally or individually for desktop or mobile views.

Global Control: Collapse All Filters for BOTH Desktop and Mobile

To set all filters to be initially collapsed for both desktop and mobile views, follow these steps:

1. Open the findify-filter-group.liquid File:

   • In Shopify, navigate to Online Store → Themes → Edit Code.
   • Locate and open the findify-filter-group.liquid file.

2. Update the aria-expanded Attribute:

   • Find the aria-expanded attribute for the .findify-filters-body element.
   • Change the value from true to false.

   <div class="findify-filters-body" aria-expanded="false">
     <!-- Filter content -->
   </div>
   
   

Controlling Filters for EITHER Desktop or Mobile

To control the expanded state of filters separately for desktop and mobile, you need to add code inside the <script> tag within the findify-filter-group.liquid file.

1. Open the findify-filter-group.liquid File:

   • In Shopify, navigate to Online Store → Themes → Edit Code.
   • Locate and open the findify-filter-group.liquid file.

2. Add Code:

   if (window.innerWidth < 768) { // you can use the breakpoint(s) you need 
   	body.setAttribute('aria-expanded', 'false');
   }
   

For further assistance or inquiries, feel free to contact us on [email protected].