Skip to main content
Using replicas with different sorting strategies provides a way for users to change sorting on the frontend. For example, if you have an ecommerce website, and by default, want to sort search results from cheapest to most expensive. You might want to provide a drop-down menu or toggle switch to let users sort from most expensive to cheapest. Because you have one replica index per sorting strategy, you need to change what index Algolia must search into when users change the sorting method. While you could handle it yourself, it’s easier to use the InstantSearch sortBy and relevantSort widgets.

​
Set up replicas

Before you implement the search, you need to have replicas for each sorting strategy you want to provide. For more information, see Sort by attribute.

​
Sorting widget

​
Sort with sortBy

Dropdowns are a familiar widget, common in ecommerce scenarios and power user workflows. InstantSearch provides sorting dropdowns with the sortBy widget. 
search.addWidgets([
  instantsearch.widgets.sortBy({
    container: "#sort-by-container",
    items: [
      { value: "products", label: "Most relevant" },
      { value: "products_price_desc", label: "Highest price" },
    ],
  }),
]);

​
Relevance sort toggle with relevantSort

If you’re using Relevant sort you can use the relevantSort widget to let users toggle between relevant and regular sorting. The relevantSort widget comes with recommended patterns when using Relevant sort, such as displaying the number of sorted results out of the total number of results, and letting users see more results. 
search.addWidgets([
  instantsearch.widgets.relevantSort({
    container: "#relevant-sort",
    templates: {
      button({ isRelevantSorted }) {
        return isRelevantSorted ? "See all results" : "See relevant results";
      },
    },
  }),
]);
⌘I