Skip to main content
As of December 31, 2023, Shopify no longer allows apps to modify theme code. To integrate Autocomplete and InstantSearch, use the Algolia AI Search & Discovery app’s App Embed and App Blocks. To get started, see Quickstart and Algolia configuration.
The facets are configured within the Algolia AI Search & Discovery app for Shopify, 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.
JavaScript
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,
        },
      };
    },
  );
});
⌘I