Skip to content

Customizing the search UI

Jump to bottom
Sarah Dayan edited this page Jul 24, 2020 · 4 revisions

You can customize the search UI to your needs and use case: what refinements to display, what sorting strategy to use, what each hit looks like, etc.

Refinements

Refinements act as a search filters, and let you refine your query by narrowing down the results. They are on the left panel of the UI.

Unified InstantSearch E-Commerce offers four types of refinements:

  • List
  • Category
  • Hierarchical
  • Slider

The src/config/index.js file lets you set the refinements. See Refinements.

Sorting

Algolia sorts search results by relevance, using its ranking formula. Yet, you can provide several sorting options based on a specific attribute (e.g., descending price) using replica indices.

The sorting option displays a list of indices, allowing a user to change the way hits are sorted.

The src/config/index.js file lets you set the sorting options. See Sort-by.

Hits

When Algolia returns results, the search UI displays them as a list of hits, as a grid or a list. Each hit displays detail about the search result, leveraging the attributes of its record.

The src/config/index.js file lets you customize the hits. See hitComponent.

Clone this wiki locally