Update the facet configuration in InstantSearch

Since December 31, 2023, apps can’t modify the code of Shopify themes. For more information, see The Asset API resource in the Shopify documentation. As an alternative, the Algolia AI Search and Discovery app comes with Shopify App Embed and App Blocks to integrate Autocomplete and InstantSearch. To get started, see Quickstart and Algolia configuration.

The facets are configured within the Shopify-Algolia integration, but there may be scenarios when you want to configure more advanced options within the relevant facet types that are used.

An example of this could be handling a scenario when there are long lists of facet values.

The refinementList widget is used to lets users refine the search results by facets that are configured as conjunctive or disjunctive facet types within the Shopify search configuration.

By default, the refinementList widget shows 10 items and hides the rest.

While you can change the total number of items shown in a list with the beforeInstantSearchFacetLimitNumber hook, this updates all refinementList widgets which could still end up having some values hidden.

In this scenario, it’s best to show a smaller number of items and to have a Show more button to view the rest of the items.

You can achieve this with the beforeInstantSearchOptions hook.

Example

This example updates the configuration of all refinementList widgets to show only 5 facets, and to display a Show more button for revealing the rest of the facets.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
document.addEventListener('algolia.hooks.initialize', function() {
  algoliaShopify.hooks.registerHook('beforeInstantSearchOptions', function(options) {
    // Loop through the facet widgets.
    const widgets = options.facets.widgets.map(widget => {
      // Only update the refinementList widget params.
      if (widget.name !== 'refinementList') {
        return widget;
      }

      // This updates all `refinementList` widgets.
      // If you only want to update specific facet(s),
      // you can target them by checking the value of `widget.params.container`. 
      
      return {
        ...widget,
        params: {
          ...widget.params,
          limit: 5,
          showMore: true,
        }
      }
    });
    
    return {
      ...options,
      facets: {
        ...options.facets,
        widgets
      }
    };
  });
});