Guide

You can integrate Algolia search into Catalyst storefronts to help shoppers search all products, categories, and more.

This guide demonstrates a basic integration and provides example code for global product search that you can add to the core code of your Catalyst storefront, or to apps/core in the Catalyst monorepo.

For a working demo of an Algolia integration with Catalyst, see the following example:

https://catalyst-algolia.vercel.app/

To follow this guide, you need the following:

• Node.js 18+
• A Node.js package manager, such as npm, pnpm, or yarn
• Working knowledge of Next.js
• An Algolia account
• A BigCommerce store or sandbox store

1. Configure the core codebase for the Catalyst storefront and get it running in dev mode. See CLI setup for quickstart instructions. If you configure Catalyst using the Monorepo, make sure the storefront is associated with a BigCommerce store channel.

2. At the top of your Algolia dashboard, create an Algolia app that you intend to associate exclusively with your Catalyst storefront channel.

3. Install the BigCommerce Algolia app and associate it with your Catalyst channel. Add the following Algolia-specific environment variables to the existing .env.local file in your Catalyst storefront. For more about other Catalyst environment variables, see Environment variables.

4. Install the following dependencies in your Catalyst storefront:

  npm i react-instantsearch
  npm i -S algoliasearch

5. Update the files in your Catalyst /components/quick-search directory to include the code from the Algolia example repo /components/quick-search directory

• Add the algoliaSearchBox.tsx and algoliaSearchHits.tsx files
• Update the index.tsx file

Your storefront's file tree will mirror the following screenshot.

6. In components/quick-search/index.tsx, update the value of algoliaClient to use your correct indexName. By default, the BigCommerce Algolia app names the search index BigCommerce.

7. Start your Catalyst storefront app in dev mode. Check the QuickSearch box to see the data supplied by the Algolia app index.

pnpm run dev

• Catalyst core docs
• Algolia search widget docs