> ## Documentation Index > Fetch the complete documentation index at: https://algolia.com/llms.txt > Use this file to discover all available pages before exploring further. # Frontend (UI/UX) > Learn how the frontend code works in Algolia extension for Magento Open Source and Adobe Commerce. The Algolia extension for Magento Open Source and Adobe Commerce comes with an Autocomplete search-as-you-type menu and an InstantSearch results page. This guide explains how you can configure both components in your Magento Admin panel. ## Autocomplete menu The Algolia extension uses the [`autocomplete`](/doc/api-reference/widgets/autocomplete/js) 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**. Configure what's displayed in the Autocomplete menu. For deeper customization of the Autocomplete menu, see [Customize the Autocomplete menu](/doc/integration/magento-2/customize/autocomplete-menu). ## Results page For displaying search results, the Algolia extension uses [InstantSearch.js](/doc/api-reference/widgets/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 > InstantSearch Results Page**. By default, the following widgets are enabled: * **Hits**. A list of products matching user queries * **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, see [Customize the InstantSearch results page](/doc/integration/magento-2/customize/instant-search-page). To configure the displayed data and refinements, go to **Stores > Algolia Search > InstantSearch Results Page**. On this page, you can configure the **attributes used as facets**: Screenshot of a faceting table with attributes 'categories', 'price', 'color', 'size' and columns for 'Facet type', 'Label', 'Options', 'Create Query rule', 'Action'. These determine which filters are available for users. You can also configure the **attributes available for sorting** on this page: Screenshot of a sorting table with three options: 'price' (Asc/Desc) and a timestamp attribute (Desc), all with 'Enable Virtual Replica?' set to 'Yes.' Each sorting attribute in Magento generates either a standard or virtual [replica index](/doc/guides/managing-results/refine-results/sorting/in-depth/replicas) in Algolia, based on whether the **Enable Virtual Replica?** setting is selected. If you want search-engine crawlers and non-JavaScript clients to see your search results, you can enable server-side rendering with the [backend search adapter](/doc/integration/magento-2/how-it-works/search-adapter). It works alongside InstantSearch or on its own. For more information, see: * [Filter results](/doc/guides/managing-results/refine-results/filtering) * [Sort results](/doc/guides/managing-results/refine-results/sorting)