{"id":13805629,"url":"https://github.com/algolia/shopify-hydrogen-algolia","last_synced_at":"2025-06-19T15:42:34.607Z","repository":{"id":37862599,"uuid":"503376461","full_name":"algolia/shopify-hydrogen-algolia","owner":"algolia","description":"Shopify hydrogen demo store using Algolia search \u0026 browse","archived":false,"fork":false,"pushed_at":"2024-10-28T09:52:43.000Z","size":1312,"stargazers_count":27,"open_issues_count":1,"forks_count":12,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-13T19:32:20.295Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/algolia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-14T13:41:23.000Z","updated_at":"2024-11-21T17:56:54.000Z","dependencies_parsed_at":"2024-04-09T23:48:19.551Z","dependency_job_id":"ebafc868-2595-41b2-831b-ac2cd408b559","html_url":"https://github.com/algolia/shopify-hydrogen-algolia","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/algolia/shopify-hydrogen-algolia","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Fshopify-hydrogen-algolia","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Fshopify-hydrogen-algolia/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Fshopify-hydrogen-algolia/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Fshopify-hydrogen-algolia/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/algolia","download_url":"https://codeload.github.com/algolia/shopify-hydrogen-algolia/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Fshopify-hydrogen-algolia/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260781469,"owners_count":23062241,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:03.242Z","updated_at":"2025-06-19T15:42:29.593Z","avatar_url":"https://github.com/algolia.png","language":"JavaScript","funding_links":[],"categories":["Apps \u0026 Integrations"],"sub_categories":[],"readme":"\n# Algolia + Shopify Hydrogen\n\nLightning fast search experiences on Shopify’s headless architecture.   \n  \nNow supporting Remixing Hydrogen v2 and full server-side rendering 🚀🚀🚀    \n  \n[Details](https://www.algolia.com/search-solutions/shopify/hydrogen/)   \n\n[Demo site](https://shopify-hydrogen-algolia-ff7a0d8a34696233bb09.o2.myshopify.dev/)   \n\n  \n\n# Algolia Shopify integration\n\nBuild Search and Discovery experience with Algolia, a Shopify Plus Certified Partner   \n  \n[Quick Start](https://www.algolia.com/doc/integration/shopify/getting-started/quick-start/)   \n  \n[Configuration steps](https://www.algolia.com/doc/integration/shopify/getting-started/configuration/)   \n\n  \n\n# Hydrogen App\n\nHydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.   \n  \n[Check out the docs](https://shopify.dev/custom-storefronts/hydrogen)   \n\n\n# Tutorial\n\n## What's in this template\n\n- Algolia [React InstantSearch Hooks](https://www.algolia.com/doc/api-reference/widgets/react-hooks/) for search and collection pages   \n  \n- Algolia [Autocomplete](https://www.algolia.com/doc/api-reference/widgets/react-hooks/) for federated search bar   \n  \n- Hydrogen [demo store](https://hydrogen.shop/)   \n\n  \n\n## Getting started to index your data\n\nAlgolia for Shopify is a Shopify Plus certified app.  \n  \nTo index your data, the extension calls the Shopify API and uses Shopify webhooks.   \n   \n[Quick Start](https://www.algolia.com/doc/integration/shopify/getting-started/quick-start/)   \n\n  \n\n## Generating Query Sugguestion index for autocomplete\n\nThe template supports Query Suggestion in search bar.   \n   \nCheck out the [tutoriel](https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/query-suggestions/how-to/creating-a-query-suggestions-index/react-hooks/) to generate a query sugguestion index (optional)   \n\n  \n\n## Update the configuration file\n  \n`algolia.config.json` contains Algolia related configuration   \n   \nUpdate `algolia.config.json` with your Algolia APP ID \u0026 API KEY.   \n   \nUpdate `algolia.config.json` with your shopify extension prefix (\"shopify_\" for example) and query sugguestion index name.   \n\n## Getting started\n\n**Requirements:**\n\n  \n\n- Node.js version 16.5.0 or higher\n\n- Yarn\n\n  \n\n```bash\n\nyarn\n\nyarn dev\n\n```\n\n  \n\n## Previewing a production build\n\n  \n\nTo run a local preview of your Hydrogen app in an environment similar to Oxygen, build your Hydrogen app and then run `yarn preview`:\n\n  \n\n```bash\n\nyarn build\n\nyarn preview\n\n```\n\n  \n\n## Building for production\n\n  \n\n```bash\n\nyarn build\n\n```\n\n## Algolia related codes\n  \n-  `app/routes/($locale).search.jsx` using Algolia [React InstantSearch Hooks](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react-hooks/) to power Hydrogen's search page with Algolia   \n   \n-  `app/routes/($locale).collections.$collectionHandle.jsx` using Algolia [React InstantSearch Hooks](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react-hooks/) to power Hydrogen's collection pages with Algolia   \n   \n-  `app/components/Autocomplete.jsx` creates federated search bar component using Algolia [Autocomplete](https://www.algolia.com/doc/api-reference/widgets/react-hooks/)   \n    \n-  `app/styles/search.css` and `app/styles/autocomplete.css`   \n   \n## Build your own hydrogen storefront with Algolia\n   \n### Install Algolia related libraries\n   \n[React InstantSearch Hooks](https://www.algolia.com/doc/api-reference/widgets/react-hooks/)\n      \n```bash\nyarn add algoliasearch react-instantsearch-hooks-web react-instantsearch-hooks-server @algolia/requester-fetch\n```\n   \n[Autocomplete](https://www.algolia.com/doc/api-reference/widgets/react-hooks/)   \n\n```bash\nyarn add algoliasearch @algolia/autocomplete-js @algolia/autocomplete-plugin-query-suggestions @algolia/autocomplete-plugin-recent-searches\n```\n   \n### Implement InstantSearch for search and browse\n   \nServer-side rendering InstantSearch can be integrated in Hydrogen Remix.   \n   \nThe implementation is possible for any Hydrogen pages.   \n   \n[Tutoriel](https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react-hooks/)   \n   \n### Implement Autocomplete for federated search bar\n   \nAutocomplete is client-side only and needs to be mounted when the page renders.   \n\n[Mount Autocomplete with React](https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/using-react/)   \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falgolia%2Fshopify-hydrogen-algolia","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falgolia%2Fshopify-hydrogen-algolia","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falgolia%2Fshopify-hydrogen-algolia/lists"}