Each UI template comes with a set of functional blocks (“components”) and a demo site consisting of pages created with those components.
For example, the Ecommerce UI template’s demo site has:
These pre-packaged components are designed to be as independent as possible,
so you can choose the ones you’re interested in.
They’re typically composed of InstantSearch widgets,
Autocomplete plugins, and non-Algolia components.
The Ecommerce UI template components are cross-platform,
all components are optimized to render well on both iOS and Android.
Data sources
The ecommerce experience requires sources of entity objects.
In this example, there are three entity objects:
products, query suggestions and search.
| Component | Description |
|---|
| Product repository | Repository providing access to products information. |
| Suggestion repository | Repository providing access to query suggestions and queries history.. |
| Search repository | Repository providing access to products indices. |
Home page
| Component | Description |
|---|
| Showcase | Organizes media-rich records into scannable rows |
Product listing page
Display
| Component | Description |
|---|
| Display products | Display multiple products using different layouts (as a grid or list) with infinite scrolling |
| Product card | Map your record structure so that you can display a product card |
| No results | Display different options to users when there are no results for a specific search |
Search
| Component | Description |
|---|
| Autocomplete | Display search autocomplete view with search history and query suggestions |
Filtering
| Component | Description |
|---|
| Filters | Filter results from a sidebar drawer |
| Facets | Filter product results with facets |
| Sort | Sort products according to different criteria |