# Filters and sort options

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 <a href="#manual-filters" id="manual-filters"></a>

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**

1. Give your filter a _Title_ - The title will be shown in the sidebar if the filter is of type _List_ or _Select_.
2. Choose a _Type_ - Choose between _Tabs_ (displayed horizontally above the results), _List_ or _Select_ filters.
3. 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.

![](https://3882858970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVeIbtsTcQaqaNeKzLbbU%2Fuploads%2FQ8SwLzxsYTifSCrR2Cve%2Fimage.png?alt=media\&token=526ca660-3e93-42ef-a824-647188e02b18)

### Smart filters <a href="#smart-filters" id="smart-filters"></a>

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 smart filter <a href="#setting-up-a-smart-filter" id="setting-up-a-smart-filter"></a>

Setting up a new filters can be done in 3 simple steps:

1. 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.
2. 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.
3. 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](https://react.docs.search.io/search-ui/filter#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](https://react.docs.search.io/search-ui/filter#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](https://react.docs.search.io/search-ui/filter#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](https://react.docs.search.io/search-ui/filter#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](https://react.docs.search.io/search-ui/filter#color) - Color swatches allow filtering by color
* [Rating](https://react.docs.search.io/search-ui/filter#rating) - Display a star rating filter between 1 and 5

#### Filter options <a href="#filter-options" id="filter-options"></a>

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.

#### Advanced settings <a href="#advanced-settings" id="advanced-settings"></a>

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'

### Sort options <a href="#sort-options" id="sort-options"></a>

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.

![](https://3882858970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVeIbtsTcQaqaNeKzLbbU%2Fuploads%2F0JwxdHyCTnCyKOcxRSw2%2Fimage.png?alt=media\&token=0b930413-10bf-4f6d-85f9-47373c417d54)

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.
