Builder's headless CMS integrates with Shopify's Hydrogen framework for creating performant, SEO-optimized e-commerce sites. This combination enables rapid development of scalable storefronts with efficient content management.
WHY
Hydrogen provides a React-based, Shopify-optimized framework with server-side rendering and API abstraction for high-performance e-commerce. Builder's headless CMS complements this by offering AI visual editing for dynamic storefront content, enabling rapid iterations without compromising Hydrogen's performance benefits.
Get more done with less effort
Enable everyone to get experiences to market. Let anyone drag and drop to compose experiences with your React components.
Scale content efficiently. Create flexible data models for content that needs to scale across experiences or channels.
Store and manage optimized assets. Upload, optimize, organize, and search for images and videos.
Auto-generate content and sections. Use AI to generate content or entire visual sections with chat prompts.
Explore our setup docs and code examples to integrate Builder's content API with Hydrogen apps. Our React SDK facilitates rapid development of Hydrogen applications using our CMS capabilities.
npm install @builder.io/sdk-react
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>
);
}
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.
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 fast web development with advanced optimization, content delivery at the edge, and more.
Builder's visual editor integrates with Shopify's e-commerce infrastructure, enabling rapid creation of customizable storefronts with optimized conversion potential.
Explore our documentation to learn how Hydrogen's e-commerce features integrate with Builder's visual editing capabilities. Find resources on optimizing performance, customizing designs, and streamlining team workflows in our Hydrogen-Builder integration guides.
Launching Projects Faster With
Design to Code AI Automation
A pragmatic guide for engineering leaders and development teams
Read the guide
