Filter Widget Setup Guide

Content:

Introduction
How to Create and Use Filters
How to Create Filter Widget
How Filter Widget Appears with Different Configurations
Best Practices

Introduction

Filter Widget provide an intuitive way to narrow down configurator options when browsing through large collections of materials, fabrics, or other customization choices. They're especially useful when you have extensive option sets that would otherwise require users to scroll through long lists.

This guide will walk you through how to set up and effectively use Filter Widget.

How to Create and Use Filters

Before creating a Filter Widget, you need to set up two things:

Create filter categories (like "Color" or "Material")
Connect these filters to your configurator options

If you skip this step, the filter button simply won't show up on your configurator page, and customers won't be able to filter anything.

Think of it this way: you're creating tags for your materials, and then the filter widget uses these tags to help customers find what they want.

To create filters:

Go to Settings → Widgets → Filter Widget → Filter Lists
Click "Add Filter" to create a filter



Add a name (e.g., "Fabric Colour")
If it's a color filter, select the color from the color picker
Select the parent:
For main categories select "No Parent"
For sub-categories select their parent category (like "Red", "Blue" under "Color")
Click "Save Changes"

Filters can be used both in Filter Widgets and in Rules as Triggers and Actions, allowing for powerful and dynamic logic. Select "Don't show in Filter Widget" only if you want to use this filter exclusively for Rules.

Filter Category Ideas:

Colour
Price Groups
Manufacturer
Range
Purpose
ECO Friendly

Assigning Filters to Options

Go to your Option Set → Select the Option Set you want to assign filters to
Open each option (or bulk select) in the set for editing
Find column "Filters"
On hover, you will see an "Add" button. Click this button to open a drawer with a list of all available filters
Check all boxes that apply to that specific material For example, a Blue Leather material might have:
Color: Blue
Material Type: Leather
Save Your Changes. Repeat for all materials in your option sets

Time-saving tip: To speed up the process, you can select multiple options in bulk and assign the same filters to all of them at once. This is especially helpful when you have groups of materials that share the same properties.

How to Create Filter Widget

Now that you've created your filters and assigned them to your option sets, you're ready to create a Filter Widget.

Navigate to the configurator you want to edit, open Options tab and click "New"
Select Linked or Manual as the Mode type
Select Filter Widget Type
Configure the widget according to your preferences

Below is a table detailing various options for the Filter Widget and their descriptions:

No.	Configuration Options	Description
1.	Name	The Option Block Name that will be visible to customers.
2.	Mode	Select either "Linked" or "Manual". "Linked" means it will be connected to an existing Option Set or Collection. "Manual" means you will create an Option Set specifically for this configurator only.
3.	Option Set Source	Select either "Collection" or "Option Set" to define where the thumbnail options will come from.
4.	Widget Type	Select "Thumbnail" to create a visual, grid-based display of options.
5.	Widget Source	Define if settings come from Global Template or Local Settings.
6.	Number of columns	Define how many thumbnails will appear in each row on desktop.
7.	Number of columns on mobile	Define how many thumbnails will appear in each row on mobile devices.
8.	Show Caption	If enabled, shows the name of each individual option as a text caption beneath its thumbnail.
9.	Filter Widget Type	Expanded (shows all options directly) or Compact (creates a collapsible menu).
10.	Show Keyline	Adds a border around each thumbnail. This is useful when thumbnails might blend with the background.
11.	Image Style	Choose between "Square" or "Round" thumbnails depending on your preferred design.
12.	Show Thumbnails Search	Adds a search input field near the filter icon. By default, allows searching options by name, code, option set name, or filter name.
13.	Show Search Field in Modal	Adds a search input to the Filter Modal allowing users to search by filter name.
14.	Show Personal Filter Bar	Displays selected filters as chips under the filter icon. This feature is available only for desktop view.
15.	Filter Display Mode	Defines how filters will be presented in the Modal: either "Always Visible" or "Expandable".
16.	Default state	Available only when "Expandable" Filter Display Mode is selected. Defines the default state for filter lists: "First Open", "All Open", or "All Closed".
17.	Add Option Set	After configuring the widget settings, click the Add button to add an Option Set to this widget.

How Filter Widget Appears with Different Configurations

Filter Widget Types

There are two main types of filter widgets: Expanded and Compact. The expanded widget shows all options directly inside the option panel. The compact widget creates a collapsible menu that, when clicked, opens another drawer with all available options. Compact widgets make sense when you have many option sets and options within those option sets.

If the filter indicator doesn't appear on your configurator page, it almost always means you haven't properly defined filters or assigned them to your materials. This is the most common issue when setting up filter widgets.

Both widget types can be configured with or without a search function. In the first image, example 1 shows the expanded widget with search and example 2 shows the expanded widget without search.



In the images bellow, example 1 shows the compact widget as it appears inside the option panel, and example 2 demonstrates how the compact widget looks once clicked, with search and personal filter bar.

You cannot have two expanded widgets in one group. If you attempt this, they will be presented as compact by default.

Personal Filter Bar Display

On desktop, we have an option to show or hide the personal filter bar. When it's on, the selected filters will appear as chips under the filter icon and a search input inside the filter widget, either Compact or Expanded. Each chip represents a selected filter, and you can clear individual filters by clicking the X on the chip without accessing the filter model. You also have a "Reset Filters" button at the end that allows you to reset all filters without going inside the filter model.

In example 1, we show the option without a personal filter bar. In example 2, we show the option with a filter bar on.

Filter Modal Options

Inside the filter modal, you have an option to show a search bar, which you can search by filter name. You also can have either always visible or expandable filters, which means that if you select expandable filters, they can be collapsed and hidden to make it easy to navigate if there are a lot of options.

In the image, example 1 shows example without search and always visible filters. In the example number 2, we show the example with search and with collapsible filters. By default, the first one is open.

Best Practices

Properly create filter categories and assign them to all materials before setting up the widget.
Use Expanded for fewer options and Compact when you have multiple option sets.
Place the most commonly used filters at the top of your categories list.
Keep filter names intuitive and concise so customers can easily understand what they're filtering by.
Add search functionality when you have large option collections to help customers find specific items quickly.
Consider using the Personal Filter Bar for desktop users to make their selected filters more visible.
Always preview your configurator after setup to verify the filter button appears and works correctly.

Related Help Articles

For more detailed information about configuring specific widgets, please refer to these dedicated help articles:

Filter Thumbnail Setup Guide
How to Configure Widgets Using Local Settings and Global Templates

Updated on: 17/04/2025