Filter Widget

Help customers find the right material fast in large collections. Learn how to create filters, tag your options and set up the Filter Widget.

The Filter Widget lets customers narrow down configurator options when browsing large collections of materials, fabrics or other customisation choices. It is especially useful for extensive option sets that would otherwise need long scrolling.

Filter Widget in the configurator option panel with filter icon and search

---

How to create and use filters

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

1. Create filter categories (like "Colour" or "Material").

2. Connect these filters to your configurator options.

If you skip this step, the filter button 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 the Filter Widget uses these tags to help customers find what they want.

1

Create filters

1. Go to Settings → Widgets → Filter Widget → Filter Lists.

2. Click Add Filter to create a filter.

   

   Filter Lists page with the Add Filter button
3. Add a name (for example, "Fabric Colour").

4. Select a position (Parent or Assigned to Parent). This helps you group your filters under categories.

5. If it's a Parent filter, click Save Changes.

6. If it's Assigned to Parent, select a parent filter, then select a preview type: No Preview, Colour or Thumbnail.

7. Click Save Changes.

   

   Filter assigned to a parent with a colour preview

Preview type helps users identify filters visually. With Colour, you choose a colour from the colour picker to display a swatch next to the filter name. With Thumbnail, you upload a custom image or icon (such as a material texture or category indicator) that appears next to the filter name.

Filters can be used both in Filter Widgets and in Rules as Triggers and Actions, allowing for powerful and dynamic logic. Turn on Hide from Filter Widget only if you want to use this filter exclusively for Rules.

Filter category ideas:

• Colour

• Price Groups

• Manufacturer

• Range

• Purpose

• ECO Friendly

2

Assign filters to options

1. Go to your Option Set and select the Option Set you want to assign filters to.

2. Open each option (or bulk select) in the set for editing.

3. Find the Filters column.

4. On hover, you will see an Add button. Click it to open a drawer with a list of all available filters.

5. Check all boxes that apply to that specific material. For example, a Blue Leather material might have Colour: Blue and Material Type: Leather.

6. Save your changes. Repeat for all materials in your option sets.

   

   Filters column in an option set with the drawer of available filters open

Time-saving tip: select multiple options in bulk and assign the same filters to all of them at once. This is especially helpful when groups of materials share the same properties.

3

Create the Filter Widget

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

1. Navigate to the configurator you want to edit, open the Options tab and click New.

2. Select Linked or Manual as the Mode type.

3. Select the Filter Widget type.

4. Configure the widget according to your preferences (see the table below).

---

Filter Widget settings

#	Configuration option	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.

Filter Widget settings in the configurator Options tab

---

How the Filter Widget appears with different configurations

Filter Widget types

There are two Filter Widget types:

#	Type	How it displays	Best for
1	Expanded	Shows all options directly inside the option panel	Fewer options
2	Compact	Creates a collapsible menu that, when clicked, opens another drawer with all available options	Many option sets and options within them

If the filter indicator doesn't appear on your configurator page, it almost always means you haven't 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.

Expanded Filter Widget with search (1) and without search (2)

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

Compact Filter Widget in the option panel (1) and opened with search and personal filter bar (2)

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, you can show or hide the personal filter bar. When it's on, selected filters appear as chips under the filter icon and a search input inside the filter widget, either Compact or Expanded.

• Clear one filter: click the X on a chip without opening the filter modal.

• Clear all filters: click the Reset Filters button at the end to reset all filters without opening the filter modal.

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

Option panel without (1) and with (2) the personal filter bar

Filter modal options

Inside the filter modal, you can show a search bar to search by filter name. Filters can be either always visible or expandable. Expandable filters can be collapsed and hidden, which makes navigation easier when there are many options.

The shape of the filter pill and preview follows the filter's Image Style setting:

• Square: the filter pill appears as a square shape with slightly rounded corners, and the preview keeps a square format.

• Round: the filter pill becomes fully rounded.

This consistent styling keeps your interface visually coherent.

In the image, example 1 shows a modal without search, with always visible filters in square style. Example 2 shows a modal with search and collapsible filters in round style. By default, the first one is open.

Filter modal with always visible square filters (1) and searchable collapsible round filters (2)

---

Best practices

• 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 understand what they're filtering by.

• Add search 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 articles

Local & Global Templates

Share widget settings across configurators or customise them per product.

Thumbnail Widget

Display option sets as a visual grid of swatches or images.

Hiding Options

Control which options appear in the option panel and specifications.