This documentation explains how to control the expanded state of filters in the Maropost Merchandising Cloud (formerly 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.
Collapsed filters for Mobile
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:
- 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.
- <div class="findify-filters-body" aria-expanded="false"> <!-- Filter content --></div>
- Find the
aria-expanded attribute for the .findify-filters-body element. - Change the value from
true to false.
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.
- 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.
- 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 YourFriends@Findify .io