pratapdd/shopify-hydrogen-algolia

Shopify hydrogen demo store using Algolia search & browse

Algolia Shopify integration

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

Check out the docs

Configuration

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

Hydrogen & Algolia

Demo site

Configuration for Hydrogen & Algolia

• Algolia

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

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

• Hydrogen

Update hydrogen.config.js with your shop's domain and Storefront API token.

What's in this template

• Algolia InstantSearch & Autocomplete libraries
• Styling with Tailwind
• End-to-end testing with Playwright
• Unit testing with Vitest and Testing Library
• Code formatting with Prettier
• Javascript linting with ESLint and the Hydrogen ESLint plugin

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

Running tests

This project contains basic end-to-end (E2E) tests in the /tests/e2e folder powered by Vitest.

You can run tests in development, and they will automatically reload when you make changes to the component you provide to hydrogen.watchForUpdates():

yarn test

To run tests in a continuous-integration (CI) environment like GitHub Actions:

yarn test:ci