{"id":28434419,"url":"https://github.com/builderio/builder-shopify-hydrogen","last_synced_at":"2025-07-21T16:32:05.964Z","repository":{"id":53379896,"uuid":"457128191","full_name":"BuilderIO/builder-shopify-hydrogen","owner":"BuilderIO","description":"Builder.io Visual CMS + page builder example with Shopify Hydrogen","archived":false,"fork":false,"pushed_at":"2023-04-10T18:45:51.000Z","size":1435,"stargazers_count":80,"open_issues_count":2,"forks_count":33,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-06-30T09:42:13.212Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/BuilderIO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-08T22:42:27.000Z","updated_at":"2025-04-08T01:48:17.000Z","dependencies_parsed_at":"2023-01-20T00:47:16.742Z","dependency_job_id":null,"html_url":"https://github.com/BuilderIO/builder-shopify-hydrogen","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BuilderIO/builder-shopify-hydrogen","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fbuilder-shopify-hydrogen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fbuilder-shopify-hydrogen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fbuilder-shopify-hydrogen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fbuilder-shopify-hydrogen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BuilderIO","download_url":"https://codeload.github.com/BuilderIO/builder-shopify-hydrogen/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fbuilder-shopify-hydrogen/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266334068,"owners_count":23912883,"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","status":"online","status_checked_at":"2025-07-21T11:47:31.412Z","response_time":64,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-06-05T19:08:54.034Z","updated_at":"2025-07-21T16:32:05.952Z","avatar_url":"https://github.com/BuilderIO.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Builder.io + Shopify Hydrogen - headless visual page building example\n\n###  🚧 🚧 🚧\n## This starter is deprecated.\n\n## This starter works for *Hydrogen v1* only. For Hydrogen V2, visit our [integration guide](https://www.builder.io/c/docs/integrating-builder-pages) and click on the Remix tab in the example code box. There is also a Remix example project that can be found [here](https://github.com/BuilderIO/builder/tree/main/examples/remix-minimal-starter)\n\nExample repo using Builder.io for drag and drop page building with Shopify hydrogen\n\n- [Check out the hydrogen docs](https://shopify.dev/custom-storefronts/hydrogen)\n- See [./src/routes/builder/[handle].server.tsx](./src/routes/builder/[handle].server.tsx) for where we integrate Builder.io\n- [Learn more about Builder.io](https://github.com/builderio/builder)\n\n![Demo](https://user-images.githubusercontent.com/844291/153227170-93e82c34-c2a4-43f9-a858-2c32753dd085.gif)\n\n## Get Started\n\n- Clone this project: `git clone https://github.com/BuilderIO/builder-shopify-hydrogen`\n- Install dependencies: `cd builder-shopify-hydrogen; yarn`\n- Replace any `builder.init` calls with your API key: https://www.builder.io/c/docs/using-your-api-key#finding-your-public-api-key\n- Run the server: `yarn dev`\n- Create a free account at [builder.io](https://www.builder.io)\n- Go to [builder.io/models](https://builder.io/models), choose the `page` model and change the Editing URL to `http://localhost:3000`\n- Create a new page with url `/builder/testing`\n- Explore the drag and drop editor\n- Hit publish, then go to `http://localhost:3000/builder/testing` and see your page!\n\nExplore more in the [Builder.io developer docs](https://www.builder.io/c/docs/developers)\n\n## Why Builder.io?\n\nHardcoding layouts for frequently changing content bottlenecks your team and makes releases messy\n\nUsing an API-driven UI allows you to:\n\n- Decouple page updates from deploys\n- Schedule, a/b test, and personalize via APIs\n- Reduce code + increase composability\n\n\u003cbr /\u003e\n\u003cimg src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F5b4fb32baace4475b993f6361e75e1b2\" /\u003e\n\n\n## Who uses Builder.io?\n\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"600\" src=\"https://user-images.githubusercontent.com/844291/143297932-686144d0-598c-49ad-8493-0bffdf45aec8.png\" /\u003e\n\u003c/p\u003e\n\n## How is the content structured?\n\nIn Builder, content is structured in [models](https://www.builder.io/c/docs/guides/getting-started-with-models), and customized with [custom fields](https://www.builder.io/c/docs/custom-fields) and [targeting](https://www.builder.io/c/docs/guides/targeting-and-scheduling)\n\n- **Builder pages** - full drag and drop control between your site's header and footer. [Try it out](https://builder.io/fiddle/fb98adf93ad5467180329fdaa9711f27)\n- **Builder sections** - make a part of a page visually editable in Builder and use our [targeting and scheduling](https://www.builder.io/c/docs/guides/targeting-and-scheduling) to decide who sees what. [Try it out](https://builder.io/fiddle/81b6a689f6c74c82bbd982497cf08e34)\n- **Builder data** - fetch structured data from Builder and use it anywhere in your application (e.g. menu items, structured pages). [Try it out](https://builder.io/fiddle/193e3e3128b84c80b1a9c4ba19612244)\n\n\u003cimg src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fe809eac6ae7140beab81ce4c3ee75e20\" /\u003e\n\nRead more about how builder works [here](https://www.builder.io/c/docs/how-builder-works)\n\nSee [here](#structuring-your-site) for examples on how to structure a site with Builder\n\n## Getting started\n\n**Requirements:**\n\n- Node v14+\n- Yarn\n\n```bash\nyarn\nyarn dev\n```\n\nRemember to update `shopify.config.js` with your shop's domain and Storefront API token!\n\n## Previewing a production build\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```bash\nyarn build\nyarn preview\n```\n\n## Building for production\n\n```bash\nyarn build\n```\n\nThen, you can run a local `server.js` using the production build with:\n\n```bash\nyarn serve\n```\n\n### Structuring your site\n\nThere are a lot of ways you can use Builder for your site. Some of the main questions you'll want to ask yourselves - what on your site should be in your code vs in Builder.\n\nAs a general rule, parts of your site that should be managed by non developers should probably be in Builder. Parts that are complex with a lot of code, should probably be in your codebase. Using [custom components](https://www.builder.io/c/docs/custom-react-components) in your Builder content can help you strike a good balance here as well\n\nHere are some examples we recommend for how to structure various pages on your site, for instance for a headless commerce site:\n\n![examples on how to structure your site](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fc811a87f916f4e37990b1afc9df25721)\n\n## How the Builder.io platform works\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"How it works\" src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F1cae534290f54294a7b7b279ebda89fb\" width=\"800\" /\u003e\n\u003c/p\u003e\n\n### Data models, components, SEO, and more\n\n\u003cimg src=\"https://cdn.builder.io/api/v1/image/assets%2F444142b2cae54a19aeb8b5ba245feffe%2F8c2699f47fea48b296b43dbb422336e8\" /\u003e\n\nBuilder.io gives you a ton more power and control than just page building. Check our guides on\n\n- [Custom models](https://builder.io/c/docs/guides/getting-started-with-models)\n- [Custom design systems in Builder.io](https://github.com/BuilderIO/builder/tree/master/examples/react-design-system)\n- [SEO optimizing Builder.io content](https://builder.io/c/docs/seo)\n- [Custom React components in the visual editor](https://www.builder.io/c/docs/custom-react-components)\n- [Components only mode](https://www.builder.io/c/docs/guides/components-only-mode)\n\nAdditional framework support:\n\n- [Gatsby](https://github.com/BuilderIO/builder/tree/master/examples/gatsby)\n- [Next.js](https://github.com/BuilderIO/builder/tree/master/examples/next-js)\n- [Angular](https://github.com/BuilderIO/builder/tree/master/packages/angular)\n- [HTML API (for any framework)](https://builder.io/c/docs/html-api)\n\nAs well as some handy power features like:\n\n- [Symbols](https://builder.io/c/docs/guides/symbols)\n- [Dynamic data fetching and binding](https://builder.io/c/docs/guides/advanced-data)\n- [State handling](https://builder.io/c/docs/guides/state-and-actions)\n- [Content API](https://builder.io/c/docs/query-api)\n- [GraphQL API](https://builder.io/c/docs/graphql-api)\n- [Webhooks](https://builder.io/c/docs/webhooks)\n- [Targeting and scheduling content](https://builder.io/c/docs/guides/targeting-and-scheduling)\n- [Extending Builder.io with plugins](https://github.com/BuilderIO/builder/tree/master/plugins)\n\n## Join the community!\n\nQuestions? Requests? Feedback? Chat with us in our [Discord](https://discord.gg/eAvjGf4T)!\n\n## Troubleshooting and feedback\n\nProblems? Requests? Open an [issue](https://github.com/BuilderIO/builder/issues). We always want to hear feedback and interesting new use cases and are happy to help.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuilderio%2Fbuilder-shopify-hydrogen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuilderio%2Fbuilder-shopify-hydrogen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuilderio%2Fbuilder-shopify-hydrogen/lists"}