> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Autocomplete menu

> Replace the default Shopify search box with an Algolia Autocomplete menu that updates results as-you-type.

<Info>
  Shopify apps can't modify theme code directly.
  To integrate Autocomplete and InstantSearch,
  use the Algolia AI Search & Discovery app's **App Embed** and **App Blocks**.

  For more information, see:

  * [Manual theme configuration](/doc/integration/shopify/getting-started/quick-start#manual-theme-configuration)
  * [Shopify Algolia configuration](/doc/integration/shopify/sending-and-managing-data/algolia-config)
</Info>

The Algolia AI Search & Discovery app comes with an autocomplete menu,
which is powered by the [Autocomplete UI library](/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete).

## Enable the Autocomplete menu

Algolia uses [Shopify's App Embed](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps)
to [enable an Autocomplete menu](/doc/integration/shopify/getting-started/quick-start#enable-autoconplete).

## Configuration

To configure the Autocomplete menu, go to the **Search options** tab in your Shopify admin.

### Advanced customization

You can use [custom hooks](/doc/integration/shopify/building-search-ui/autocomplete-hooks)
for advanced customization.

### Autocomplete version 1

If your autocomplete menu isn't showing with Autocomplete version 1,
check that you're using the appropriate CSS selectors for Autocomplete:

* Autocomplete version 1 adds the menu to a container element,
  such as a `div` or a `form`
* Autocomplete version 0 adds the menu to an `input` element.

To make the menu work with both Autocomplete versions 1 and 0,
add multiple CSS selectors, separated by commas.
In your Algolia for Shopify app, open the **Search options** tab.
In the **CSS selector** field, enter the CSS selectors for adding the menu.

For example, in the **Dawn** theme,
enter: `form[action="/search"] input[type="text"], form[action="/search"] input[type="/search"], form[action="/search"]`.

## Redirects

The autocomplete menu includes the [redirect plugin](/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-redirect-url/createRedirectUrlPlugin).
To create a redirect rule, see [Redirects](/doc/guides/managing-results/rules/merchandising-and-promoting/how-to/redirects#algolia-out-of-the-box-redirect-solution).

If you customized the autocomplete menu's main template with [`beforeAutocompleteMainTemplate`](doc/integration/shopify/building-search-ui/autocomplete-hooks#beforeautocompletemaintemplate),
preserve the redirect behavior by including the `elements.redirectUrlPlugin` variable.