Guides / Building Search UI / Ecommerce ui template / Customize

Configuring the Ecommerce UI Template

We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.

The configuration file allows you to customize some parts of the Ecommerce UI template. Use the:

Search parameters

To configure the search parameters, edit the variable searchParameters in the config.tsx file:

1
2
3
4
5
6
7
8
const searchParameters = {
  hitsPerPage: 10,
  maxValuesPerFacet: 50,
  attributesToSnippet: ['description:30'],
  snippetEllipsisText: '',
  analytics: true,
  clickAnalytics: true
}

Some search parameters are applied by default.

Autocomplete

To configure Autocomplete, edit the variable autocomplete in the config.tsx file:

1
2
3
4
5
const autocomplete = {
  placeholders: ['products', 'articles', 'faq'], // Animated input placeholders.
  debouncing: 800, // Debouncing delay for a search in in milliseconds.
  detachedMediaQuery: '(max-width: 1439px)' // Media query used to toggle the detached mode.
}
Did you find this page helpful?
React InstantSearch v6