<HeroSection
title="Build headless commerce"
lightImage="/assets/landing-pages/storefronts/headless/headless-hero.png"
darkImage="/assets/landing-pages/storefronts/headless/headless-hero-dark.png"
ctaButtons={(
<>
<IconCard
iconSize="small"
variant="elevated"
iconLocation="left"
title="Hydrogen and Oxygen"
image="/assets/icons/32/hydrogen-2.png"
darkImage="/assets/icons/32/hydrogen-2-dark.png"
padding="small"
maxWidth
href="/docs/storefronts/headless/hydrogen/getting-started"
>
Build fast with Shopify's all-in-one solution for custom commerce. Hosting included.
</IconCard>
<IconCard
iconSize="small"
variant="elevated"
iconLocation="left"
title="Build your own stack"
image="/assets/icons/32/pickaxe-2.png"
padding="small"
maxWidth
href="/docs/storefronts/headless/bring-your-own-stack"
>
Build custom experiences with any language and any framework. Host anywhere.
</IconCard>
</>
)}
>
Get all the power of Shopify under the hood, with complete control over the frontend.
Start building quickly with [Hydrogen](/docs/storefronts/headless/hydrogen/getting-started), Shopify's official headless framework, or add Shopify APIs to your existing tech stack.
</HeroSection>
<Spacer />
<Surface
backgroundColor="none"
backgroundImage="/assets/landing-pages/storefronts/headless/gradient.png"
backgroundPosition="top right"
>
<Section>
<SectionLayout columns={2}>
<SectionLayout.Column span={1} alignment="center">
<IconCard
iconSize="small"
variant="ghost"
iconLocation="left"
linkVariant="secondary"
title="Hydrogen and Oxygen"
heading="h2"
padding="none"
hrefLabel="View the hydrogen docs"
href="/docs/storefronts/headless/hydrogen/getting-started"
>
Get started fast with Shopify's batteries-included framework for headless commerce. Build with off-the-shelf components, then deploy for free.
<Codeblock terminal>
```bash
npm create @shopify/hydrogen@latest
```
</Codeblock>
</IconCard>
</SectionLayout.Column>
<SectionLayout.Column span={1}>
<Grid>
<Image src="/assets/landing-pages/storefronts/headless/snowboard.png" width="357px" justifySelf="center" />
</Grid>
</SectionLayout.Column>
</SectionLayout>
<Spacer />
<Grid columns={3}>
<div>
<h3>Build-ready components</h3>
Hydrogen includes a suite of components and utilities pre-wired for Shopify APIs. Skip writing boilerplate code and focus on creating high-performance storefronts tailored to your unique brand.
</div>
<div>
<h3>Free hosting</h3>
Deploy your Hydrogen app to Oxygen, Shopify's global edge hosting platform. Get continuous deployment, push-to-preview, and instant rollbacks included at no extra cost.
</div>
<div>
<h3>Fast by default</h3>
Hydrogen is built on Remix, so speed comes standard. Server-side rendering, progressive enhancement, and nested routes ensure that your storefront always feels fast.
</div>
</Grid>
</Section>
</Surface>
<Surface backgroundColor="cyan" >
<Section>
<SectionLayout columns={2}>
<SectionLayout.Column span={1} alignment="center">
<h2>Bring your own stack</h2>
Use any framework, tooling, or hosting — Shopify's composable APIs can integrate into your existing infrastructure and workflows. Install the Headless channel to create storefronts and manage API tokens and permissions quickly.
<IconCard
iconSize="small"
variant="elevated"
iconLocation="left"
title="Get started with the Headless channel"
image="/assets/icons/32/custom-storefronts.png"
padding="small"
maxWidth
href="/docs/storefronts/headless/bring-your-own-stack"
>Set up storefronts, tokens, and permissions in minutes.</IconCard>
</SectionLayout.Column>
<SectionLayout.Column span={1}>
<Image src="/assets/landing-pages/storefronts/headless/stack.png" darkSrc="/assets/landing-pages/storefronts/headless/stack-dark.png"/>
</SectionLayout.Column>
</SectionLayout>
</Section>
</Surface>
<Section>
<ImageCard
variant="flat"
imageLocation="right"
paragraph="body"
title="Get headless apps for your custom storefront"
image="/assets/landing-pages/storefronts/headless/storefront.png"
darkImage="/assets/landing-pages/storefronts/headless/storefront-dark.png"
href="https://apps.shopify.com/collections/custom-storefront-apps"
hrefLabel="Explore apps"
linkVariant="primary"
>Integrate the latest apps and platforms with your custom storefront, so you can focus on building what's unique to your experience.</ImageCard>
</Section>