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 replaces Shopify’s built-in search with Algolia’s fast and configurable search. Algolia connects to your Shopify store and indexes your products and collections. Your users can then find results using an Algolia search on every page. For more filtering options, you can add full search results pages. Algolia Search and Discovery is a Shopify Plus certified app. You can use it with your Shopify Plus or Shopify stores.

Explore related content in the Algolia Academy

Algolia for Shopify

​
Install Algolia AI Search & Discovery in your store

  1. Install the app in Shopify
  2. Link your Algolia account
  3. Configure the app

​
Install the app in Shopify

  1. Go to https://shopify.algolia.com/install, enter your Shopify domain, and click Install app. For more information, see Shopify’s Installing apps documentation.
  2. Optional: in the sidebar of your Shopify admin, click Pin to your navigation for the Algolia AI Search & Discovery app to always have quick access to your search settings. Sidebar in the Shopify admin with the Pin to your navigation button for the Algolia AI Search & Discovery app
Click Get Started to link your Algolia account. Click Get Started to continue with the automatic setup.
If the automatic setup fails, click Use manual setup instead.

​
Configure the app

  • Click Let’s get started! to continue with the quickstart setup.
  • Click Take me to the Dashboard! to configure manually.

​
Quickstart setup

  1. Select a theme from your library using the drop-down menu. Use a duplicated version of your theme and click Next. Select a theme from the drop-down menu
  2. Click Enable Algolia Search to add Algolia Autocomplete to your theme.
  3. An Autocomplete block appears in the Theme Customizer. Click Save and then Next. Click Save in the Theme Customizer to continue
  4. Click Enable InstantSearch to add Algolia InstantSearch to your theme.
  5. An InstantSearch block appears in the Theme Customizer.
  6. Click Search results to turn off the default Shopify search results. Click Save. Click the eye icon to turn off the default Shopify search results
  7. By default, search results show matching records for each indexed attribute. To hide some attributes, click Configure unretrievable attributes. Configure unretrievable attributes
  8. Optional: click Edit to change the CSS selector if it’s different from form[action="/search"] (default). This is the CSS selector that Algolia uses to add the Autocomplete block.
  9. Click Try Algolia Search to try your new search experience. Success screen for the Shopify quickstart

​
Automatic setup

  1. Sign in to your Algolia account or create a new one. Configuration dialog for Algolia AI Search & Discovery with a menu to select your Algolia application and fields for your API keys and index prefix
  2. On the Credentials page of the Algolia Search and Discovery app, select the Algolia application for your Shopify store. The Algolia AI Search & Discovery app creates new API keys in your Algolia account and automatically adds them to this page.
    The Search API key generated during automatic setup has a rate limit of 100,000 requests per IP address per hour. This helps blocking bot traffic without affecting real users.
  3. Optional: change the prefix for your indices (default: shopify_). For example, shopify_products. Use the prefix to connect several Shopify stores to a single Algolia application.
  4. Click Save and continue with Configure a live store.

​
Manual setup

  1. Go to the API Keys page in the Algolia dashboard.
  2. Select the Algolia application where you want to store the indices from your Shopify store. Application selection menu in the Algolia dashboard
  3. From the API Keys page, copy the following credentials:
    • Application ID
    • Search-Only API Key
    • Admin API Key
    The API Keys page in the Algolia dashboard with fields for your application ID, search-only API key, and Admin API key. Copy these credentials to the Algolia AI Search & Discovery app
  4. On the Credentials page in the Algolia AI Search & Discovery app, paste the credentials you copied from the Algolia dashboard. Credentials page in the Algolia AI Search & Discovery app. Paste your Algolia credentials into the fields.
  5. Optional: change the prefix for your indices (default: shopify_). For example, shopify_products. Use the prefix to connect several Shopify stores to a single Algolia application.
  6. Click Save and continue with Configure a live store.

​
Configure a live store

If you want to add the Algolia AI Search & Discovery app to a live store, duplicate your theme, and add Algolia to the copy of the theme instead. This lets you preview changes, tweak your site’s CSS, and test that everything works as expected.
  1. Duplicate your theme. This process adds the duplicate to your Theme library. Theme settings page of your online store
  2. When the duplication completes, select the duplicate theme and click Customize. The theme library section in your theme settings with a customize button

​
Enable Algolia

To enable Algolia, add the Algolia Search theme extension to your store.
  • Algolia Autocomplete uses embedded blocks to replace the default search box.
  • Algolia InstantSearch uses app blocks to add a full search results page to your store.

​
Enable Autocomplete

  1. In the theme customizer, click Embed apps. The Embed apps icon in the theme customizer
  2. Select Algolia Search to enable Algolia for the theme and click Save. The Algolia Search switch
  3. To preview the theme, select Options > Preview. The Preview option in the theme customizer The default search box is now replaced by an Algolia Autocomplete.

​
Enable InstantSearch

  1. In the theme customizer, open the Home page menu. The Home page in the theme customizer
  2. In the Search online store box, enter “search” to the search page, and select Search. The Search page in the theme customizer
  3. Under Template, click Search results to turn off the theme’s default search results. Eye icon to turn off the default search results
  4. Continue with Add the InstantSearch app block.

​
Add the InstantSearch app block

  1. Under Template, click Add section. Open the Apps tab and select Algolia InstantSearch. The Algolia InstantSearch app block
  2. Optional: to remove extra padding, click Apps. Check Box to remove extra padding Clear the Make section margins the same as theme option. Theme customizer

​
Enable InstantSearch for collection pages

  1. In the theme customizer, open the Home page menu and select Collections. Dropdown menu in the theme customizer
  2. Select the collection template to which you want to add Algolia InstantSearch. For example: Default collection. Collection template in the theme customizer
  3. Under Template, click Product grid to turn off the theme’s default product grid. Eye icon to turn off the default product grid
  4. Continue with Add the InstantSearch app block.

​
Enable Algolia InstantSearch for collection list page

  1. In the theme customizer, open the Home page menu and select Collections list. Dropdown menu in the theme customizer
  2. Under Template, click Collections list page to turn off the theme’s default collections list page. Turn off the default Collections list page
  3. Continue with Add the InstantSearch app block.

​
Configure app behavior and UI

You can change the InstantSearch configuration to change behaviors such as number of hits, sort order, and facets. For more advanced control of the UI, use Autocomplete or InstantSearch custom hooks.

​
Publish your theme

  1. After testing your changes, go back to Online Stores > Themes in your Shopify admin.
  2. Select the theme with Algolia and click Publish. The theme library section in your theme settings with a publish button
Algolia search is now live on your store.
⌘I