Merchandising Facets

Depending on the query or category, which facets to display in the UI and how to organize values can vary significantly. For example, for an ecommerce platform selling both clothes and tech products, in the “clothing” category you might want to display the facets “brand”, “size”, and “color”, while for TVs you might want to show “brand”, “screen type”, and “screen size”.

Algolia gives the ability to control which facets to display and how to order their values for a given query or category.

This feature requires a specific UI implementation that relies on the latest version of InstantSearch, or with some custom logic built-in.

Consider the same example as earlier, where an ecommerce platform sells both clothes and tech products.

First, you need to set a default facet display so that if a user lands on anything but tech products, they see the facets “brand”, “size”, and “color”.

With the default order set, you need to set a rule to override this default order for the tech products category.

Select Rules in the Algolia dashboard.
Under the Rules header, select the index you are adding a Rule to.
Select Create your first rule or New rule. In the dropdown, click on the Visual Editor option.
To set the condition, check whether you have category pages configured on your Visual Editor. You would follow separate steps, depending on whether it’s configured or not:
- If category pages are configured on your Visual Editor:
  - Click the “Choose category page”,
  - Select “Tech Products”,
  - Click “Apply”.
- If category pages aren’t configured on your Visual Editor:
  - Click “Set query condition”,
  - Toggle on “Filters” and Toggle off “Query”,
  - In “Filter name” enter “Brand” and in “Filter value” enter “Tech Products”,
  - Click “Apply”.
In the “What do you want to do?” section:
- Click the Order facets button.
- Import the default order defined for your facet display by selecting Import default order.
- Click on the trash icon next to the facets “size” and “color” so they’re not displayed anymore in this category.
- Click on the Add facets button and select “screen type”, and “screen size” to add those two to the list of facets to display.
- Use the = icon to reorder the facets by dragging and dropping them. The order in the UI is the same as the order in the dashboard.
Don’t forget to review and publish your changes.

Selecting which facets to display and in which order is one aspect of facet merchandising. The other aspect is about facets values.

By default, the values within each facet are ordered by count: the values with the highest number of matching results appear at the top. This order can be tweaked in multiple ways:

Some values can be pinned at the top of the list. For example, you might have a partnership with a specific brand that you always want to display at the top of the list.
The non-pinned values can then be ordered either by count, alphabetically, or be hidden so that only pinned values are displayed.

Going back to the earlier example, now on top of displaying the facets “brand”, “screen type”, and “screen size” in the category “tech products”, you also want:

To pin the brand “Sony” at the top of the list of brands,
Have the other brands ordered alphabetically,
Have the “screen type” values ordered by count,
And only display the three most standard values for “screen size”: 32in, 55in, 65in.

Select Rules in the Algolia dashboard.
Under the Rules header, select the index you are adding a Rule to.
Identify the rule created in the earlier example and click on the three dots (ellipsis), and select the option “Edit this Rule”.
In the strategy section, click the pen icon to edit the facet display strategy.
To set the strategy for the “brand” facet:
- Click the pen icon to edit the “brand” facet.
- Click “pin facet value” and select the brand “Sony” to pin it to the top of the list.
- In the dropdown to order subsequent values, select “alphabetically”.
For the “screen type” facet, the order should already be by count so you should have nothing to change here.
To set the strategy for the “screen size” facet:
- Click the pen icon to edit the “screen size” facet.
- Click “pin facet value” and select the values 32in, 55in, 65in to pin them at the top of the list.
- Use the = icon to drag the values into the right order.
- In the dropdown to order subsequent values, select “do not display” to make sure that only the 3 selected values get displayed.
Don’t forget to review and publish your changes.

Merchandising facets and their values is also possible using the Manual Editor of Rules, but requires understanding of the setting renderingContent to then use it to manually set facet values.

Select Rules in the Algolia dashboard.
Under the Rules header, select the index you are adding a Rule to.
Select Create your first rule or New rule. In the dropdown, click on the Manual Editor option.
In the Condition(s) section, toggle Filters to on. Select “screen type” in the attribute name field, and “tech products” in the attribute value field.
Still in the Condition(s) section, toggle Query to off.
In the Consequence(s) section:
- Click the Add consequence button and select Add query parameter.
- In the input field, enter the JSON to customize the renderingContent parameter. For example, to match the same example as described for the Visual Editor, the JSON would look like this:

Copy
  {
    "renderingContent": {
        "facetOrdering": {
            "facets": {
                "order": [
                    "brand",
                    "screen type",
                    "screen size"
                ]
            },
            "values": {
                "brand": {
                    "order": [
                        "Sony"
                    ],
                    "sortRemainingBy": "alpha"
                },
                "screen type": {
                    "sortRemainingBy": "count"
                },
                "screen size": {
                    "order": [
                        "32in",
                        "55in",
                        "65in"
                    ],
               "sortRemainingBy": "hidden"
                }
            }
        }
  }

Don’t forget to save your changes.

Did you find this page helpful?

Merchandising Facets

On this page

Merchandising facets in the Visual Editor

Merchandising facets values in the Visual Editor

Merchandising facets and their values in the Manual Editor

On this page