%20logo.svg?alt=media&token=8a329413-2638-4c59-9fe9-0dac942ffa3c)
Filters and sort options
Last updated
Last updated
Filters help your customers narrow down the search results, ensuring they can find exactly what they are looking for. The Search UI Designer makes it easy to add filters to your search UI
To add a new filter, simply click on the "Add +" in the Filters section of the Search UI Designer configuration sidebar. The Add filter dialog will present you with two options: Manual and Smart filters.
Manual filters allow users to refine search results based on specific filter expressions. A common use-case for manual filters are website sections (All, Blog, Documentation) that can be defined by URL patterns. But you can use any data stored in the collection to create a filter.
Setting up a manual filter
Give your filter a Title - The title will be shown in the sidebar if the filter is of type List or Select.
Choose a Type - Choose between Tabs (displayed horizontally above the results), List or Select filters.
Click Add filter option - To add an individual filter value.
Each filter option has a Label that's used to display the option in the UI as well as a hardcoded filter.
Example: To add a filter option that only shows products from the "Nike" collection, add the following.
Smart filters, also referred to as facets, allow your users to select multiple filters to refine their search results. For example, on a movie database website, users can filter results by genre, year of production or classification using smart filters.
Smart filters are only displayed if the search results match at least one of the filter options for the filter. For example, in an e-commerce store a search for "shoes" would show the filter for shoe sizes, but not a material filter you might see when searching for jewellery.
Setting up a new filters can be done in 3 simple steps:
Select a field for your filter - Fields could be could be anything from categories, authors, brands, price, size... anything that allows a user to narrow down the result. The filters you can create depend on the fields available in your records.
Enter a Title for the filter - The title will be displayed in the UI, describing the filter. Most commonly you will find titles like "Category", "Price" or "Rating" that describe the filter well.
Choose a filter Type – The available filter type depends on the type of field selected above. For example numerical fields like price can use a Range filter in add to other filter types.
Filter Types
List - A list of options that can be selected. Specify whether you want to allow only one or multiple options to be selectable. This component is one of the most commonly used filters and scales well to large number of options. It supports the ability to search for specific options.
Select – Similar to the list of options above, but the options are displayed in a dropdown component. This component is a good choice when only few options are available.
Tabs - Tabs are shown across the top of the search results. Most commonly tabs are used to search within specific categories of pages or products.
Range – The range filter is available for numerical fields and allows users to define a range of number. Examples here would be price, number of bedrooms, age etc.
Color - Color swatches allow filtering by color
Rating - Display a star rating filter between 1 and 5
Filter options allow for further refining the available options in a filter. For generic fields, like tags, you might not want to show all options if they represent different concepts. For example fields might be used to store size information, sales information or custom data used for rendering. Filter options allow including/excluding only specific options as part of a filter.
Two option modes can be used to narrow down the list of available options. Show all options starts out by displaying all available options and allows for excluding options while Select options starts out with an empty list and allows for selecting specific options to show.
Filter by prefix
Fields like tags are commonly used to store a variety of information in one field. For example 'size', 'color', 'sale', 'cut', 'shape' or 'material'. Filtering by prefix enables you to create a custom filter for specific attributes.
For example, if your products store color information in tags using the prefix 'color:' (for example 'color:orange'), you can set up a color filter by adding the prefix color: in the Filter by prefix field.
Exclude options
As mentioned above, by default all option values are shown. Selecting the Exclude options checkbox reveals a multi-select component allowing you to select specific options to exclude from your list.
Typically this is used if the majority of options are related to a specific filter (like color), but some a few options are unrelated and should not be shown.
Select options
Lastly, to select a dozen or so values manually to display as a filter, use the Select options. Starting from an emtpy list, only options specifically selected will be shown as filter options in the UI.
The majority if smart filters support a number of the following advanced settings. Note that not all settings are available for all filter types.
Sorting
Determines the sort order of the filter options. Available options are:
Count - which sorts by the number of available results for the option. If the result contains 5 blue shirts and 10 red shirts, the red color option will be displayed first. The Sort order defaults to descending.
Alphanumeric - orders the options in alphanumeric order. The blue shirt would be shown above the red shirt.
Formatting
Determines how the options are being formatted. Available formats are:
Default - the option will be displayed as stored
Price - the options will be formatted as prices. To ensure that pricing filters are displayed as prices and not just numbers, please ensure you set this option.
Text transform
The data stored is not always in the right format. This setting transforms the text formatting of the stored option values, resulting in a unified format for all options. The result is a much more polished looking user experience.
Choose between 4 different formatting options:
Capitalize - Capitalizes every word of the option. For example 'Coats & Jackets'
Sentence case - Capitalizes the first word of the option. For example 'Coats & jackets'
Lowercase - All letters are displayed in lower case. For example 'coats & jackets'
Uppercase - All letters are displayed in upper case. For example 'COATS & JACKETS'
In addition to viewing results sorted by relevancy, it is often helpful to browse through results sorted by rating, price or other attributes.
To add a new sort option, simply click on the "Add +" in the Sort options section of the Search UI Designer configuration sidebar. In the Add sort option dialog, specify the field to sort by. For example 'price' or 'rating'.
The field must be an Integer, Float, Timestamp, or a String.
Once a field has been selected, choose whether to include both ascending and descending ordering or either one of them. Lastly, for each of the option you can customise the text that will be displayed in the UI.
Finally, click on the Add sort option button to add the sort option.
