Filter Widget Setup Guide

Content:

1. Introduction
2. How to Create and Use Filters
3. How to Create Filter Widget
4. How Filter Widget Appears with Different Configurations
5. 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:

1. Create filter categories (like "Color" or "Material")
2. 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.

To create filters:

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

3. Add a name (e.g., "Fabric Colour")
4. If it's a color filter, select the color from the color picker
5. Select the parent:

• For main categories select "No Parent"
• For sub-categories select their parent category (like "Red", "Blue" under "Color")

1. Click "Save Changes"

Filter Category Ideas:

• Colour
• Price Groups
• Manufacturer
• Range
• Purpose
• ECO Friendly

Assigning Filters to Options

1. Go to your Option Set → Select the Option Set you want to assign filters to
2. Open each option (or bulk select) in the set for editing
3. Find column "Filters"
4. On hover, you will see an "Add" button. Click this button 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:

• Color: Blue
• Material Type: Leather

6. Save Your Changes. Repeat for all materials in your option sets

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.

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

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

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.

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.

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