Guides / Building Search UI / UI & UX patterns

This guide describes how to configure and order facets and their values using the dashboard and API. For details of how to process the information retrieved from your facets, see the Make sure that your facet display UI guide.

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 must rebuild the interpretation logic yourself.
  2. Configuring the attributes to use for faceting on your search index.
  3. Configuring your facet display.

Configuring your facet display using the dashboard

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

Imagine you want to only display 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. To be displayed in the list, they need to have already been configured as attributes for faceting.

With those three facets added, you want to ensure that users can easily browse through brands by displaying them alphabetically.

  • Since you have a specific partnership with 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, you only want to display those four. You pin them at the top in the correct order and choose not to display subsequent values
  • For colors, you want to display them by count and not pin any specific value.

As soon as you save the changes, the UI adapts to this new configuration.

This approach allows you to configure a static facet display. If, however, you want a more dynamic approach that customizes the display of the facets and values for a specific query or category, see the facet merchandising guide.

Configuring your facet display using the API

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

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?