Guides
/
Building Search UI
/
Ecommerce ui template
/
Customize
Jan. 20, 2022
Configuring the Ecommerce UI Template
On this page
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 configuration to provide raw parameters to the Algolia API.
- Autocomplete configuration to configure how Autocomplete should behave.
Search parameters
To configure the search parameters, edit the variable searchParameters
in the config.tsx
file:
Copy
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.
API Reference
Search API Parameters
Autocomplete
To configure Autocomplete, edit the variable autocomplete
in the config.tsx
file:
Copy
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?