Home / Widgets

Ecommerce Product Filter Widget

Tech Writers Team @ Ucraft

Last updated on Nov 22, 2024

The Product Filter widget allows your customers to narrow down the selection of products based on specific criteria and attributes. These criteria include price range, brand, size, color, category, and other relevant product features.

Adding a Product Filter Widget

To add a Product Filter widget:

  1. Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
  2. Navigate to the corresponding page.
  3. Open the Widgets list on the left panel.
  4. Type the widget name in the search bar, or expand the Ecommerce > General Widgets grouping and select the Product Filter widget.
  5. Drag and drop the Product Filter widget from the list onto the desired crafting area of the Layout Canvas.
    Note: Before adding a Product Filter widget make sure to add and modify the Ecommerce Product List widget on the Category page.

The widget reverts all the filterable fields you have created in your project Dashboard and displays filtering criteria for the customers in the public mode.

Tip: To have filterable fields, create a Select field type with its options (see Product Fields).

Configuring the Product Filter Widget

Once you have added the Product Filter widget, click the widget to activate the Property Panel where you can customize its Style and Settings according to your preferences.

To configure the Product Filter widget:

  1. Go to Styles to modify the widget styling features (see Global Styles).
  2. Go to Settings to modify the settings of the widget:
  • Enable/disable the Expand View toggle to reveal more detailed information or hide it providing a more compact view of the filter.
  • Enable/disable the Category and Price toggles to display or hide the default filters as needed.
  • Select the category from the Data Source dropdown from which the filter options are derived.
  • Expand Visibility to select who can view the Product Filter widget according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).

💡 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.