Get started with Algolia search for Shopify

Add fast, customizable Algolia search to your Shopify or Shopify Plus store.

Algolia AI Search & Discovery replaces the default Shopify search and connects to your Shopify store, indexes your products and collections, and enables fast, relevant search across your site.

Algolia Search & Discovery is a Shopify Plus certified app. You can use it with Shopify Plus and Shopify stores.

Before you begin

Ensure you have the following tools and accounts ready:

• An Algolia account. If you don’t have one, create a new account for free.
• Shopify admin access.
• A duplicate of a Shopify theme.

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.

Quickstart

In this quickstart, you’ll install the Algolia AI Search & Discovery app, connect to Algolia, configure your duplicate theme, enable Autocomplete and InstantSearch, then publish your duplicate theme.

The live theme remains unchanged until you publish the duplicate.

1. Install the Algolia AI Search & Discovery app

   Go to https://shopify.algolia.com/install, enter your Shopify domain, and click Install app.

   To quickly access your search settings from the sidebar of Shopify admin, click Pin to your navigation for the Algolia AI Search & Discovery app.

   
2. Connect to Algolia

   1. In the Algolia AI Search & Discovery app, click Get Started.

      
      If automatic setup fails or your security policy forbids automatic key creation, click Use manual setup instead.

   2. Sign in to your Algolia account.

      

      On the Credentials page of the Algolia Search & Discovery app, select the Algolia application for your Shopify store. Leave Index prefix set to shopify_.

      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 block bot traffic without affecting users.

   3. Click Save.

3. Configure your duplicate theme

   1. Select your duplicated theme using the drop-down menu and click Next.

      

   2. Click Enable Algolia Search to add Algolia Autocomplete to your theme.

   3. Click Save and then Next.

      

   4. Click Enable InstantSearch to add Algolia InstantSearch to your theme.

   5. To turn off the default Shopify search results, click Search results then click Save.

      

   6. Click Try Algolia Search to test your new Algolia-powered search.

      

   This step automatically applies the required theme changes.
   You can manually configure the same settings but that doesn’t add any extra options or give you any extra control.

4. Publish your duplicate theme

   1. Go to Online Store > Themes in your Shopify admin.

   2. Select the duplicate theme with Algolia search enabled and click Publish.

      

Enter credentials manually

Only use this method if your security policy prevents automatic API key creation. Otherwise, follow the process in the Quickstart.

1. Go to the API Keys page in the Algolia dashboard for the application you’ll use and copy:

   • Application ID
   • Search API Key
   • Admin API Key
   

2. On the Credentials page in the Algolia AI Search & Discovery app, paste the credentials you copied from the Algolia dashboard.

   

3. Optional: set your index prefix, for example, my_shopify_. The prefix helps to distinguish indices from multiple stores in your Algolia application.

4. Click Save, then continue with theme configuration.

Advanced customization (optional)

To customize your search experience, you can:

• Hide attributes in search results
• Change your CSS selector to use a non-standard search form
• Add Algolia search to collection pages
• Customize your app’s behavior and UI.

Hide attributes in search results

By default, search results show matching records for each indexed attribute.

To hide attributes, go to the Algolia dashboard: Search > Configuration > Search behavior > Retrieved attributes > Unretrievable attributes and add the attributes you don’t want to retrieve.

Change CSS selector

If you use a non-standard search form, locate the CSS selector in Shopify admin and click Edit to change it from the default: form[action="/search"].

Add Algolia Search to Shopify collection pages

1. In Shopify’s theme customizer, open the Home page menu and select Collections.

   

2. Select the collection template to which you want to add Algolia InstantSearch. For example: Default collection.

   

3. Under Template, click Product grid to turn off the theme’s default product grid.

   

4. In the theme customizer, open the Home page menu and select Collections list.

   

5. Under Template, click Collections list page to turn off the theme’s default collections list page.

   

6. Add the InstantSearch app block.

Customize app behavior and UI

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

Manual theme configuration

This isn’t the recommended process for configuring a theme: instead, follow the process in the Quickstart.

Algolia attaches to your theme with Shopify app embeds and blocks:

• Autocomplete uses Shopify app embeds.
• InstantSearch uses Shopify app blocks.

Enable Autocomplete

1. In Shopify’s theme customizer, click Embed apps.

   

2. Select Algolia Search to enable Algolia for the theme and click Save.

   

3. To preview the theme, select Options > Preview.

   

Enable InstantSearch

1. In the theme customizer, open the Home page menu.

   

2. In the Search online store box, enter search to find the search page, then select Search.

   

3. Under Template, click Search results to turn off the theme’s default search results.

   

4. Add the InstantSearch app block.

Add the InstantSearch app block

1. Under Template, click Add section. Open the Apps tab and select Algolia InstantSearch.

   

2. To remove extra padding, click Apps.

   

   Clear the Make section margins the same as theme option.