Front End (UI/UX)
The Algolia extension for Magento Open Source and Adobe Commerce comes with an Autocomplete search-as-you-type menu and an instant search results page. This page explains how you can configure both components in your Magento Admin panel.
Autocomplete menu
The Algolia extension uses the autocomplete InstantSearch widget. By default, this Autocomplete menu suggests products, categories, and pages when a user is searching.
To configure which and how many items are displayed, go to Stores > Algolia Search > Autocomplete Menu.
For deeper customization of the Autocomplete menu, you can edit the template.
Results page
For displaying search results, the Algolia extension uses InstantSearch.js.
By default, the results page isn’t shown.
If you want to use the results page, your theme must provide a top.search and a content block.
You may have to adjust the design of your theme to integrate the results page.
To enable the results page, go to Stores > Algolia Search > Instant Search Results Page.
Check out all InstantSearch widgets in the interactive showcase.
By default, the following widgets are enabled:
- Hits. A list of products matching the users’ query
- Pagination. Navigation links between the results pages
- Sorting. A switch to toggle between different ways of sorting products
- Price Range Slider. A slider to refine the price range of the products
- Hierarchical Menu. A menu to refine the category of the products
To add other widgets to the results page, edit the template.
To configure the displayed data and refinements, go to Stores > Algolia Search > Instant Search Results Page.
On this page, you can configure the attributes used as facets. These determine which filters are available to the user. You can also configure the attributes available for sorting on this page but be aware that each such attribute creates a new standard replica index.
