Filters

The Collection Filter Overlap offers visitors an intuitive way to refine your assortment without leaving the page. This section appears as a panel that slides into the screen from the left side as soon as a customer clicks the filter button on a collection or search page.

Because this section is part of the Overlay group, it ensures a clean and organized mobile experience where filters only become visible when the customer needs them.

General Settings

• Color scheme: Determine the background and text color of the filter panel. You can align this scheme with your collection page for a seamless transition.
• Section ID: This panel is automatically activated on all pages of the type collection (collections) and search (search results).

Functionality & Filters

The content of this panel is dynamically generated based on the filters you have configured in your Shopify Search & Discovery app (or the standard Shopify filter settings):

• Dynamic Filters: Customers can filter by attributes such as availability, price, product type, vendor, and variant options (such as color or size).
• Clear Active Filters: A handy link is displayed at the top of the panel to remove all applied filters in one click.
• Live Results: The panel takes current search terms and sorting into account, ensuring the filters always show relevant results.

User-Friendly Conclusion

At the bottom of the panel is a fixed 'footer' with a primary action button:

• View Results: This button directly displays the number of products found (e.g., "View 24 results").
• Immediate Update: As soon as the customer clicks this button, the panel closes, and the product list in the background refreshes with the new selection.

Tip: Use a color scheme for the 'Filter Sidebar' that provides sufficient contrast with the product cards, ensuring the filter options are easily readable on both desktop and mobile devices.