Algolia + Shopify Hydrogen

Lightning fast search experiences on Shopify’s headless architecture.

Now supporting Remixing Hydrogen v2 and full server-side rendering 🚀🚀🚀

Details

Demo site

Algolia Shopify integration

Build Search and Discovery experience with Algolia, a Shopify Plus Certified Partner

Quick Start

Configuration steps

Hydrogen App

Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.

Check out the docs

Tutorial

What's in this template

• Algolia React InstantSearch Hooks for search and collection pages

• Algolia Autocomplete for federated search bar

• Hydrogen demo store

Getting started to index your data

Algolia for Shopify is a Shopify Plus certified app.

To index your data, the extension calls the Shopify API and uses Shopify webhooks.

Quick Start

Generating Query Sugguestion index for autocomplete

The template supports Query Suggestion in search bar.

Check out the tutoriel to generate a query sugguestion index (optional)

Update the configuration file

algolia.config.json contains Algolia related configuration

Update algolia.config.json with your Algolia APP ID & API KEY.

Update algolia.config.json with your shopify extension prefix ("shopify_" for example) and query sugguestion index name.

Getting started

Requirements:

• Node.js version 16.5.0 or higher

• Yarn

yarn

yarn dev

Previewing a production build

To run a local preview of your Hydrogen app in an environment similar to Oxygen, build your Hydrogen app and then run yarn preview:

yarn build

yarn preview

Building for production

yarn build

Algolia related codes

• app/routes/($locale).search.jsx using Algolia React InstantSearch Hooks to power Hydrogen's search page with Algolia

• app/routes/($locale).collections.$collectionHandle.jsx using Algolia React InstantSearch Hooks to power Hydrogen's collection pages with Algolia

• app/components/Autocomplete.jsx creates federated search bar component using Algolia Autocomplete

• app/styles/search.css and app/styles/autocomplete.css

Build your own hydrogen storefront with Algolia

Install Algolia related libraries

React InstantSearch Hooks

yarn add algoliasearch react-instantsearch-hooks-web react-instantsearch-hooks-server @algolia/requester-fetch

Autocomplete

yarn add algoliasearch @algolia/autocomplete-js @algolia/autocomplete-plugin-query-suggestions @algolia/autocomplete-plugin-recent-searches

Implement InstantSearch for search and browse

Server-side rendering InstantSearch can be integrated in Hydrogen Remix.

The implementation is possible for any Hydrogen pages.

Tutoriel

Implement Autocomplete for federated search bar

Autocomplete is client-side only and needs to be mounted when the page renders.

Mount Autocomplete with React