---
gid: c774c2e7-234a-443e-b922-ea532564eb6c
title: Headless
description: 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.
template: landing_page
hidden: true
---

<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>