Integrations / Shopify

From December 31, 2023, Algolia’s Search and Discovery application can’t modify the coding of Shopify themes. For more information, refer to Shopify’s Asset API documentation. As an alternative, Algolia offers Shopify’s App Embed and App Blocks features for Autocomplete and InstantSearch interfaces. For more information, refer to the Quick start and Shopify Algolia configuration documentation.

The Algolia Search and 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 immediately find results thanks to Algolia’s autocomplete menu 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 videos in the Algolia Academy

Install Algolia Search and Discovery in your store

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

For more information, see Installing apps.

Optional: in the sidebar of your Shopify admin, click Pin to your navigation for the Algolia Search and 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 Search and Discovery app

Get started dialog in the Shopify admin. 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 to continue with the manual setup.

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.

    Configuration dialog for the Algolia app in Shopify with a menu to select your Algolia application and fields for your API keys and index prefix.

  2. Select the Algolia application for your Shopify store. The Algolia Search and discovery app creates new API keys in your Algolia account and automatically adds them to this page.

  3. Optional: change the prefix for your indices (default: shopify_). This is useful, if you want to connect multiple Shopify stores to the same Algolia application. This prefix is added to your index names, such as shopify_products.

  4. Click Save.

Continue with the setup in the Configure a live store section.

Manual setup

  1. Open 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 app in Shopify.

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

    Credentials page in the Algolia app in Shopify. Paste your Algolia credentials into the fields.

  5. Optional: change the prefix for your indices (default: shopify_). This is useful, if you want to connect multiple Shopify stores to the same Algolia application. This prefix is added to your index names, such as shopify_products.

  6. Click Save.

Continue in the Configure a live store section.

Configure a live store

If you want to add the Algolia Search and 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 is working correctly.

Duplicate your theme

  1. Duplicate your theme. The copy is added to your Theme library.

    Theme settings page of your online store with open action dialog to select the duplicate theme action

  2. When the duplication is completed, go to the duplicate theme and click Customize.

    The theme library section in your theme settings with a customize button

Enable Algolia on your theme

To enable Algolia in your theme, you must add the Algolia Search theme extension to your store.

Algolia Autocomplete embedded blocks are required to use Algolia InstantSearch: they contain necessary configurations and scripts.

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

    The Embed apps icon in the theme customizer

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

    The Algolia Search switch

  3. Click Save

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

    The Preview option in the theme customizer

The default search box is now replaced with an Algolia autocomplete search box.

Configure the Algolia settings and test them with your preview theme.

Enable InstantSearch

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

    The Home page in the theme customizer

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

    The Search page in the theme customizer

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

    Eye icon to turn off the default search results

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

    The Algolia InstantSearch app block

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

Check Box to remove extra padding

Theme customizer

Compare Algolia search with and without extra padding

Without extra padding:

Algolia search without extra padding

With extra padding:

Algolia search with extra padding

Enable InstantSearch for collection pages

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

    Dropdown menu in the theme customizer

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

    Collection template in the theme customizer

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

    Eye icon to turn off the default product grid

  4. Follow the instructions from step 4 forwards in the Enable InstantSearch guidance.

Enable Algolia InstantSearch for collection list page

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

    Dropdown menu in the theme customizer

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

    Turn off the default Collections list page

  3. Follow the instructions from step 4 forwards in the Enable InstantSearch guidance.

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

Your live store now uses a version of your theme with Algolia providing your search experience.

Did you find this page helpful?