Guides / Building Search UI / Ecommerce ui template / Customize

Configuring the Ecommerce UI Template

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