Home / Widgets

Collection Filter Widget

Tech Writers Team @ Ucraft

Last updated on Sep 02, 2024

The Collection Filter widget is a UI component you can use on your website to improve the user experience when browsing and interacting with collections of items, such as articles, products, or images. Its primary purpose is to allow users to narrow down the displayed content according to their preferences. The widget presents various filter options that users can choose from. These options derive from the selection-type fields associated with the collection items.

Important: The Collection Filter widget is based on the created Fields of the Select type, and if the Filterable switcher is enabled (see Collection Fields), those Fields will be displayed within the widget.

Adding a Collection Filter

To add a Collection Filter widget:

  1. Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
  2. Navigate to the required category page (template).

3. Go to the Widgets list on the Visual Editor Left Panel.

4. Type the widget name in the search bar, or expand the Collections grouping to access the Collection Filter widget.
Note: You can use the Collection Filter widget only on a category page (template).

5. Drag and drop the widget onto the Layout Canvas.
Upon dropping the widget on the Layout Canvas, it is displayed with the default styling, which you can later customize per your needs.

Configuring the Collection Filter Widget

To design the appearance and behavior of the Collection Filter widget, activate the Property Panel by clicking it to access the widget Styles and Settings.

  1. Go to the widget Styles to configure the required general styling features (see Global Styles) to achieve the desired visual and functional outcomes.
  2. Access the widget Settings to:
    • enable the expanded filter view, if required, to allow the users to access and apply multiple filter options in one view, reducing the need for multiple interactions.
    • set its visibility (see Visibility Settings) on the website based on criteria such as your customers' location, session status, device type, browser, language preference, etc., to tailor it to specific user segments or conditions.

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.