Quickstart

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.

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.

Install Algolia AI Search & Discovery in your store

To install Algolia AI Search & Discovery:

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.

   

Link your Algolia account

Click Get Started to continue with 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.

   

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

4. An Autocomplete block appears in the Theme Customizer. Click Save in the top-right corner.

   

5. Click Next
6. Click Enable InstantSearch to add Algolia InstantSearch to your theme.
7. An InstantSearch block appears in the Theme Customizer.

8. Click the eye icon to turn off the default Shopify search results.

   

9. Click Save

10. By default, search results show matching records for each indexed attribute. To hide some attributes, click Configure unretrievable attributes.

    

11. Optional: click Edit to change the CSS selector. This is the CSS selector that Algolia uses to inject the Autocomplete block. By default, it’s form[action="/search"]. If your CSS selector is different, update it here.

    

12. Click Try Algolia Search to try your new search experience.

Automatic setup

1. Sign in to your Algolia account or create a new one.

   After signing in, the Credentials page of the Algolia Search and Discovery app opens in your Shopify admin.

   

2. 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.
   1. The Search API key generated during automatic setup imposes a rate limit of 100,000 requests per IP address per hour. This aids in blocking large volumes of bot traffic without affecting actual 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.
5. Continue setup in the Configure a live store section.

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.

   

3. From the API Keys page, copy the following credentials:

   • Application ID
   • Search-Only API Key
   • Admin API Key

   

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

   

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.
7. Continue setup in the Configure a live store section.

Configure a live store

If you want to add the Algolia AI Search & Discovery app to a live store, you should 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.

   

2. When the duplication completes, select the duplicate theme and click Customize.

   

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 the Embed apps icon.

   

2. Switch on Algolia Search to enable Algolia for the theme.

   

3. Click Save

4. To preview the theme, click the three dots and then Preview.

   

An Algolia Autocomplete has now replaced the default search box.

Enable InstantSearch

1. In the theme customizer, click the Home page drop-down menu.

   

2. In the input field, type “search” so that it finds the search page, and then click Search.

   

3. Click the “eye” icon to turn off the theme’s default Search results.

   

4. Add the InstantSearch app block

Add the InstantSearch app block

1. To add the Algolia InstantSearch app block to your theme, click Add section, Apps, and then Algolia InstantSearch.

   

2. Optional. To remove extra padding, click Apps and then clear Make section margins the same as theme.

Compare Algolia search with and without extra padding

Without extra padding:

With extra padding:

Enable InstantSearch for collection pages

1. In the theme customizer, click the Home page drop-down menu and then click Collections.

   

2. Click the collection template to which you want to add Algolia InstantSearch: Default collection in the screenshot.

   

3. Click the “eye” icon to turn off the theme’s default Product grid.

   

4. Add the InstantSearch app block

Enable Algolia InstantSearch for collection list page

1. In the theme customizer, click the Home page drop-down menu and then click Collections list.

   

2. Click the “eye” icon to turn off the theme’s default Collections list page.

   

3. 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.

   

Algolia search is now live on your store.