---
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/mobile-apps"
        >
          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/headless/mobile-apps"
      >
        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/headless/mobile-apps#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>