Awesome
Algolia + Shopify Hydrogen
Lightning fast search experiences on Shopify’s headless architecture.
Now supporting Remixing Hydrogen v2 and full server-side rendering 🚀🚀🚀
Algolia Shopify integration
Build Search and Discovery experience with Algolia, a Shopify Plus Certified Partner
Hydrogen App
Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.
Tutoriel
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.
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
andapp/styles/autocomplete.css
Build your own hydrogen storefront with Algolia
Install Algolia related libraries
yarn add algoliasearch react-instantsearch-hooks-web react-instantsearch-hooks-server @algolia/requester-fetch
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.
Implement Autocomplete for federated search bar
Autocomplete is client-side only and needs to be mounted when the page renders.