Autocomplete menu

Since December 31, 2023, apps can’t modify the code of Shopify themes. For more information, see The Asset API resource in the Shopify documentation. As an alternative, the Algolia AI Search and Discovery app comes with Shopify App Embed and App Blocks to integrate Autocomplete and InstantSearch. To get started, see Quickstart and Algolia configuration.

Algolia AI Search & Discovery includes an autocomplete menu that replaces the default Shopify search box and provides results as-you-type. The menu is powered by the Autocomplete UI library.

Enabling the Autocomplete menu

Algolia uses Shopify’s App Embed to provide an Autocomplete menu. To enable the Autocomplete menu, add the Algolia Search App Embed to 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 drop-down menu isn’t displaying 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, you can add multiple CSS selectors, separated by a comma. 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 by default. You can create a redirect rule that’s triggered when users search for a specific term.

If you’ve customized the Autocomplete menu’s main template with beforeAutocompleteMainTemplate, preserve redirect behavior by including the elements.redirectUrlPlugin variable.