Skip to main content
As of December 31, 2023, Shopify no longer allows apps to modify theme code. To integrate Autocomplete and InstantSearch, use the Algolia AI Search & Discovery app’s App Embed and App Blocks. To get started, see Quickstart and Algolia configuration.
The Algolia AI Search & Discovery app comes with an autocomplete menu, which is powered by the Autocomplete UI library.

​
Enable the autocomplete menu

Algolia uses Shopify’s App Embed to provide an autocomplete menu. To enable the autocomplete menu, see Enable Algolia on your theme.

​
Configuration

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

​
Advanced customization

You can use custom 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. To create a redirect rule, see Redirects. If you customized the autocomplete menu’s main template with beforeAutocompleteMainTemplate, preserve the redirect behavior by including the elements.redirectUrlPlugin variable.
⌘I