Guides / Building Search UI / UI & UX patterns

You can configure and order facets and their values in your front end, using the Algolia dashboard.

Make sure that your UI is compatible with the Facet Display and Facet Merchandising features.

Standard and Premium plans give you access to the Facet Display feature. Please reach out to the Algolia Success Team if you have any problems accessing Facet Display.

Managing facet display from the Algolia Dashboard

The ability to control the facets to display and their order works by sending a dedicated renderingContent parameter alongside search results. This setting needs to be interpreted by the UI your users use to interact with the index.

There are three main implementation steps:

  1. Building a UI capable of interpreting the “renderingContent” setting. For this step, you can use the InstantSearch library which has widgets preconfigured. You can also build your UI using any other tools or platform, but you will need to rebuild this interpretation logic yourself.
  2. On your search index, configuring the attributes to use for faceting.
  3. Configuring your facet display.

Configuring facet display using the Dashboard

  • Go to your dashboard and select your index.
  • Click the Configuration tab.
  • Under the Filtering and Faceting category, click on Facet display.
  • Click on the Add facet to display button to add the facets you want to display in your UI.
  • Use the = icon next to each facet to drag them into the right position. The facets in your UI are displayed in the same order as the order you define here.
  • For each facet, click on the pen icon to configure how the values of this facet should be displayed. You can:
    • Pin some values at the top of the list if you want them to always display first.
    • Configure if the remaining values should be ordered by count, alphabetically, or if you want to only display the values pinned.
  • To remove a facet from the list and stop displaying it in your UI, just click on the trash icon.
  • Don’t forget to save your changes.

Imagine you want to display only the facets “brand”, “size”, and “color” on your UI. The first step is to add those three facets to the list of facets to display. They need to have been configured as attributes for faceting before hand to be displayed in the list.

With those three facets added, you want to ensure that users can easily browse through brands by displaying them alphabetically. But since you have a specific partnership with a the brand “Uniqlo”, you want the brand to always display on top.

Sizes need to be in a specific order: S, M, L, XL. You may have sizes in different formats in your data, but for the sake of clarity consider that you only want to display those 4. You pin them at the top in the right order, and choose not to display subsequent values.

For colors, you want to display them by count, and not pin any specific value.

You save the changes, and the UI adapts immediately to this new configuration.

This option enables to configure the display of facets in a static manner. It’s possible to have a more dynamic approach and to customize the display of the facets and their values for a specific query or category. To do this, see the Facet Merchandising guide.

Configuring facet display using the API

To apply the same configuration as in the preceding example, you need to apply the following setting:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$index->setSettings([
  'renderingContent' => [
    'facetOrdering' => [
      'facets' => [
        'order' => ['brand', 'size', 'color']
      ],
      'values' => [
        'brand'=> [
          'order' => ['Uniqlo'],
          'sortRemainingBy' => 'alpha'
        ],
        'size'=> [
          'order' => ['S', 'M', 'L','XL'],
          'sortRemainingBy' => 'hidden'
        ],
        'color'=> [
          'sortRemainingBy' => 'count'
        ]
      ]
    ]
  ]
]);

Did you find this page helpful?