Headless CMS for Shopify's Hydrogen
Builder's Visual CMS works seamlessly with Shopify's Hydrogen framework to create fast, SEO-friendly websites. The combination allows content editors to build scalable sites in minutes with fewer engineering ticket dependencies.
WHY
Builder and Hydrogen?
Hydrogen and Builder.io complement each other well for building ecommerce sites. Hydrogen offers a React-based ecommerce framework optimized for Shopify, providing a solid backend and excellent performance. Builder.io specializes in customizable storefront design and drag-and-drop CMS, enabling faster and more collaborative updates.
Visual CMS Features
Get more done with less effort
Visual Editor
Enable everyone to get experiences to market. Let anyone drag and drop to compose experiences with your React components.
Structured Content
Scale content efficiently. Create flexible data models for content that needs to scale across experiences or channels.
Asset Library
Store and manage optimized assets. Upload, optimize, organize, and search for images and videos.
AI
Auto-generate content and sections. Use AI to generate content or entire visual sections with chat prompts.
Create a new Hydrogen project using our React SDK
Get started quickly with our step-by-step setup docs or dive right into code examples in this repo to see how the SDK is applied in practice. With explicit guides and hands-on samples, we aim to empower Hydrogen developers to easily connect their apps to Builder.io's content management API. Our React SDK enables you to build stellar Hydrogen applications faster by leveraging the strength of our CMS infrastructure.
npm install @builder.io/react
Start building
Check out Builder.io's integration guide for detailed, step-by-step instructions on using our React SDK. The docs walkthrough page building while also covering sections, components, and data integration. Follow the guide to connect your Hydrogen project and Builder's Headless CMS capabilities.
Leverage a range of scalable built-in tools
Utilize Builder however you need with powerful server-side and static optimization tools.
Roles and permissions
Determine who can input content, who can use your approved design system, and who can create fully bespoke experiences.
Localization
Deliver highly personalized and localized experiences at scale.
Environments
Create pre-production environments to test updates and functionality
Performance
Build blazing-fast web development with advanced optimization, content delivery at the edge, and more.
Build using your Hydrogen components
Here's an example of code that uses Builder for a component-driven page.
const MODEL_NAME = 'page';
export default function Page(props: any) {
const content = useQuery([MODEL_NAME, props.pathname], async () => {
return await builder
.get(MODEL_NAME, {
userAttributes: {
urlPath: props.pathname,
},
})
.promise();
});
const params = new URLSearchParams(props.search);
const isPreviewing = params.has('builder.preview');
return (
<div>
{!content.data && !isPreviewing ? (
<NotFound></NotFound>
) : (
<Layout>
<PageHeader heading={content?.data?.data?.title}>
<BuilderComponent model={MODEL_NAME} content={content?.data} />
</PageHeader>
</Layout>
)}
</div>
);
}Quick Code Reference
builder.init()
Each project you build in Builder has a Public API key that you can use to request your Builder content. Pass your key here to tell Builder where to look.
builder.get()
Fetches your content from Builder as JSON. You can add parameters and queries to get the right result.
<BuilderComponent/>
Pass the JSON you got from builder.get() to render a Builder page or section.
Builder.registerComponent()
Register any code component in your app to Builder. Then, it can be used for drag-and-drop page building.
Builder for Shopify
Builder.io's drag-and-drop storefront creation and Shopify's ecommerce data and infrastructure combine seamlessly to create customizable, high-converting ecommerce sites faster and more cost-effectively than possible with Shopify alone.
Learn more about Builder.io + Hydrogen
Using the two together leverages Hydrogen's ecommerce strengths and Builder.io's front-end flexibility. This allows for great performance and speed while also providing complete design control and efficiency for teams. The integration and complementary abilities make Hydrogen and Builder.io a powerful pairing.
Partof
a
Compose content and iterate fast without sacrificing what you love.
BETA
Introducing
Visual Copilot
Visual Copilot saves developers time by using AI to turn Figma designs into code that looks like yours.
Learn more
Get started with Builder
Use what you already have, or build a future-proof Hydrogen app
Lastly, Builder’s Visual CMS can be incrementally adopted for a better user experience. You don't have to rebuild your frontend from scratch—you can build on top of what you already have. And if you decide to replatform, it's easy: content created will seamlessly migrate to your new platform.
