---
gid: c774c2e7-234a-443e-b922-ea532564eb6c
title: Storefronts
description: Storefronts on Shopify give you the power to sell the way you want. Use the tools you already know to reach your customers wherever they are.
template: landing_page
hidden: true
---

<HeroSection
  title="Build and customize storefronts"
  lightImage="/assets/landing-pages/storefronts/index/storefronts-hero-light.png"
  darkImage="/assets/landing-pages/storefronts/index/storefronts-hero-dark.png"
>
  Storefronts on Shopify give you the power to sell the way you want. Use the tools you already know to reach your customers wherever they are.
</HeroSection>

<Spacer />

<Surface backgroundColor="cyan">
  <Section>
    <SectionLayout columns={3}>
      <SectionLayout.Column span={2}>
        <Kicker>THEMES</Kicker>
        <h2>Complete customization, on Shopify’s fully managed platform</h2>
        <p>Shopify themes let you tailor the look and feel of your storefront—without having to worry about servers, security, or scaling. Tweak an existing theme, or build your own from the ground up.</p>
        <Spacer />
        <Grid columns={2}>
          <IconCard
            heading="h4"
            iconSize="small"
            variant="elevated"
            iconLocation="left"
            linkVariant="header"
            title="Create a new theme"
            paragraph="body"
            image="/assets/icons/32/clicode.png"
            darkImage="/assets/icons/32/clicode-dark.png"
            padding="small"
            href="/docs/storefronts/themes/getting-started/create"
          >
            Create and preview a starter theme in minutes, using real store data
          </IconCard>
          <IconCard
            heading="h4"
            iconSize="small"
            variant="elevated"
            iconLocation="left"
            linkVariant="header"
            title="Customize an existing theme"
            paragraph="body"
            image="/assets/icons/32/themes.png"
            darkImage="/assets/icons/32/themes-dark.png"
            padding="small"
            href="/docs/storefronts/themes/getting-started/customize"
          >
            Connect an existing theme codebase to start making updates
          </IconCard>
        </Grid>
      </SectionLayout.Column>
    </SectionLayout>

    <Spacer />
    <HorizontalLine color="cyan" />
    <Spacer />

    <h3>A flexible theming system that works for your whole team</h3>
    <Grid columns={2}>
      <ImageCard
        heading="h3"
        variant="elevated"
        imageLocation="top"
        paragraph="body"
        title="Powered by Liquid"
        image="/assets/landing-pages/storefronts/index/card-image-liquid.png"
        darkImage="/assets/landing-pages/storefronts/index/card-image-liquid.png"
        href="/docs/api/liquid"
      >
        Liquid is Shopify’s simple and expressive templating language. Mix it with standard HTML, CSS, and JavaScript to create fully bespoke storefronts.
      </ImageCard>
      <ImageCard
        heading="h3"
        variant="elevated"
        imageLocation="top"
        paragraph="body"
        title="No-code editor, with low-code configuration"
        image="/assets/landing-pages/storefronts/index/card-image-nocode.png"
        darkImage="/assets/landing-pages/storefronts/index/card-image-nocode.png"
        href="/docs/storefronts/themes/tools/online-editor"
      >
        Define composable blocks and sections with a simple JSON schema and let merchants make edits without needing to touch your code.
      </ImageCard>
    </Grid>
  <Spacer />
    <Grid columns={3}>
      <div>
        <h3>Integrate seamlessly into <br />merchant workflows</h3>
      </div>
      <IconCard
        heading="h4"
        iconSize="extraLarge"
        variant="elevated"
        iconLocation="left"
        title="Build for the Theme Store"
        image="/assets/landing-pages/storefronts/index/thumbnail-themestore.png"
        darkImage="/assets/landing-pages/storefronts/index/thumbnail-themestore-dark.png"
        href="/docs/storefronts/themes/store"
      >
        Create premium themes that work off the shelf, then sell to millions of merchants.
      </IconCard>
      <IconCard
        heading="h4"
        iconSize="extraLarge"
        variant="elevated"
        iconLocation="left"
        title="Theme app extensions"
        image="/assets/landing-pages/apps/build-page/theme-extensions.png"
        darkImage="/assets/landing-pages/apps/build-page/theme-extensions-dark.png"
        href="/docs/apps/online-store/theme-app-extensions"
      >
        Build custom apps to augment storefront functionality, or install from the Shopify App Store.
      </IconCard>
    </Grid>

  </Section>
</Surface>

<Spacer />

<Surface backgroundColor="violet">
  <Section>
    <SectionLayout columns={3}>
      <SectionLayout.Column span={2}>
        <Kicker>HEADLESS</Kicker>
        <h2>Full-stack control with the world’s most advanced commerce APIs</h2>
        <p>When you need maximum flexibility, go headless with Shopify’s composable commerce APIs. Get started faster with Hydrogen, our official headless framework, or bring your own stack.</p>
        <Spacer />
        <Grid columns={2}>
          <IconCard
            heading="h4"
            iconSize="small"
            variant="elevated"
            iconLocation="left"
            linkVariant="header"
            title="Storefront API"
            paragraph="body"
            image="/assets/icons/32/graphql.png"
            darkImage="/assets/icons/32/graphql-dark.png"
            padding="small"
            href="/docs/api/storefront"
          >
            Surface product data anywhere, served from the edge with no rate limits
          </IconCard>
          <IconCard
            heading="h4"
            iconSize="small"
            variant="elevated"
            iconLocation="left"
            linkVariant="header"
            title="Customer Account API"
            paragraph="body"
            image="/assets/icons/32/security-check.png"
            darkImage="/assets/icons/32/security-check-dark.png"
            padding="small"
            href="/docs/api/customer"
          >
            Build personalized commerce into any part of your stack
          </IconCard>
        </Grid>
      </SectionLayout.Column>
    </SectionLayout>

    <Spacer />
    <HorizontalLine color="violet" />
    <Spacer />

    <h3>Build faster with headless dev tools</h3>
      <Grid columns={2}>
        <ImageCard
          heading="h3"
          variant="elevated"
          imageLocation="top"
          paragraph="body"
          title="Get a head start with Hydrogen"
          image="/assets/landing-pages/storefronts/index/card-image-hydrogen.png"
          darkImage="/assets/landing-pages/storefronts/index/card-image-hydrogen.png"
          href="/docs/storefronts/headless/hydrogen/getting-started"
        >
          Skip the boilerplate and start building fast with Shopify’s batteries-included headless framework, built on top of Remix.
        </ImageCard>
        <ImageCard
          heading="h3"
          variant="elevated"
          imageLocation="top"
          paragraph="body"
          title="Deploy for free with Oxygen"
          image="/assets/landing-pages/storefronts/index/card-image-oxygen.png"
          darkImage="/assets/landing-pages/storefronts/index/card-image-oxygen.png"
          href="/docs/storefronts/headless/hydrogen/getting-started#step-4-deploy-to-oxygen"
        >
          Host Hydrogen apps on Oxygen, our global serverless edge, and preview every update before deploying to production. All at no extra charge.
        </ImageCard>
      </Grid>
    <Spacer />
    <Grid columns={3}>
      <div>
        <h3>Sell anywhere with <br />mobile commerce</h3>
      </div>
      <IconCard
        heading="h4"
        iconSize="extraLarge"
        variant="elevated"
        iconLocation="left"
        title="Mobile SDKs"
        image="/assets/landing-pages/storefronts/index/thumbnail-mobile.png"
        darkImage="/assets/landing-pages/storefronts/index/thumbnail-mobile-dark.png"
        href="/docs/storefronts/mobile"
      >
        Build native shopping experiences with SDKs for Android and iOS.
      </IconCard>
      <IconCard
        heading="h4"
        iconSize="extraLarge"
        variant="elevated"
        iconLocation="left"
        title="Checkout Sheet Kit"
        image="/assets/landing-pages/apps/build-page/checkout-ui-extensions.png"
        darkImage="/assets/landing-pages/apps/build-page/checkout-ui-extensions-dark.png"
        href="/docs/storefronts/mobile#checkout-sheet-kit"
      >
        Add the world’s best performing checkout to your mobile apps.
      </IconCard>
    </Grid>
  </Section>
</Surface>


<Section>
  <h3>Extend every part of the platform</h3>
  <Grid columns={2}>
    <IconCard
      iconSize="medium"
      variant="flat"
      iconLocation="top"
      title="Customer Account extensions"
      image="/assets/icons/48/blocks.png"
      darkImage="/assets/icons/48/blocks-dark.png"
      linkVariant="secondary"
      href="/docs/api/customer-account-ui-extensions"
      hrefLabel="Learn more"
    >
      Add custom functionality to your customer account experience.
    </IconCard>
    <IconCard
      iconSize="medium"
      variant="flat"
      iconLocation="top"
      title="Checkout UI extensions"
      image="/assets/icons/48/cart.png"
      darkImage="/assets/icons/48/cart-dark.png"
      linkVariant="secondary"
      href="/docs/api/checkout-ui-extensions"
      hrefLabel="Learn more"
    >
      Customize the world’s best-performing checkout.
    </IconCard>
  </Grid>
</Section>