---
gid: c774c2e7-234a-443e-b922-ea532564eb6c
title: Themes
description: Build and customize themes
template: landing_page
hidden: true
---

<HeroSection
  title="Build Shopify themes"
  lightImage="/assets/landing-pages/storefronts/themes-mdx/themes.png"
  darkImage="/assets/landing-pages/storefronts/themes-mdx/themes-dark.png"
  ctaButtons={(
    <>
      <IconCard
        iconSize="small"
        variant="elevated"
        iconLocation="left"
        title="Build a new theme"
        image="/assets/icons/32/pickaxe-2x.png"
        padding="small"
        maxWidth
        href="/docs/storefronts/themes/getting-started/create"
      >
        Create a new theme based on Shopify’s reference theme, Dawn
      </IconCard>
      <IconCard
        iconSize="small"
        variant="elevated"
        iconLocation="left"
        title="Customize a theme"
        image="/assets/icons/32/themes.png"
        padding="small"
        maxWidth
        href="/docs/storefronts/themes/getting-started/customize"
      >
        Update the look and feel of an existing theme to tailor it to a merchant’s unique needs
      </IconCard>
    </>
  )}
>
  Themes shape the online store experience for merchants and their customers. Build fast, flexible themes at scale using Liquid, Shopify's theme templating language, along with HTML, CSS, JavaScript, and JSON.
</HeroSection>

<Section>
  <Grid columns={3}>
    <IconCard
    iconSize="medium"
    variant="flat"
    iconLocation="top"
    title="Key Concepts"
    paragraph="body"
    image="/assets/icons/48/blocks.png"
    hrefLabel="Learn about key theme concepts"
    backgroundColor="azure"
    href="/docs/storefronts/themes/architecture"
    >
      Shopify themes are a package of template files, building blocks, and supporting assets. Use these building blocks to create modular, customizable themes.
    </IconCard>
    <IconCard
    iconSize="medium"
    variant="flat"
    iconLocation="top"
    title="Liquid"
    paragraph="body"
    hrefLabel="View the Liquid reference"
    backgroundColor="azure"
    image="/assets/icons/48/liquid.png"
    href="/docs/api/liquid"
    >
      The Liquid templating language is the backbone of Shopify themes, and is used to load dynamic content on storefronts. Extend Liquid objects to store and present custom data using metafields.
    </IconCard>
    <IconCard
    iconSize="medium"
    variant="flat"
    iconLocation="top"
    title="Best Practices"
    paragraph="body"
    hrefLabel="Follow Best Practices"
    backgroundColor="azure"
    image="/assets/icons/48/key.png"
    href="/docs/api/liquid"
    >
      To optimize your theme development experience, Shopify has established a set of best practices that you can refer to when developing your theme and setting up your toolchains and processes.
    </IconCard>
  </Grid>
</Section>

<Section>
  <Grid columns={4}>
    <IconCard
      heading="h4"
      iconSize="small"
      variant="elevated"
      iconLocation="top"
      title="Ajax API for themes"
      image="/assets/icons/48/terminal.png"
      darkImage="/assets/icons/48/terminal.png"
      href="/docs/api/ajax"
    >
      Learn about the endpoints that Shopify provides to interact with your theme.
    </IconCard>
    <IconCard
      heading="h4"
      iconSize="small"
      variant="elevated"
      iconLocation="top"
      title="Section rendering API"
      image="/assets/icons/48/terminal.png"
      darkImage="/assets/icons/48/terminal.png"
      href="/docs/api/ajax/section-rendering"
    >
      Review our AJAX API that lets you update page content without reloading an entire page.
    </IconCard>
    <IconCard
      heading="h4"
      iconSize="small"
      variant="elevated"
      iconLocation="top"
      title="Liquid cheat sheet"
      image="/assets/icons/48/liquid.png"
      darkImage="/assets/icons/48/liquid-dark.png"
      href="https://www.shopify.ca/partners/shopify-cheat-sheet"
    >
      Consult this interactive reference guide to the Liquid template language.
    </IconCard>
    <IconCard
      heading="h4"
      iconSize="small"
      variant="elevated"
      iconLocation="top"
      title="Liquid code examples"
      image="/assets/icons/48/liquid.png"
      darkImage="/assets/icons/48/liquid-dark.png"
      href="https://shopify.github.io/liquid-code-examples/"
    >
      Build Shopify themes faster with this library of ready-to-use Liquid components.
    </IconCard>
  </Grid>
</Section>

<Section>
  <ImageCard
    variant="flat"
    imageLocation="right"
    paragraph="body"
    title="Dawn starter theme"
    image="/assets/landing-pages/storefronts/themes-mdx/dawn.png"
    darkImage="/assets/landing-pages/storefronts/themes-mdx/dawn-dark.png"
    href="/docs/storefronts/themes/tools/dawn"
    hrefLabel="Learn more about Dawn"
    linkVariant="primary"
  >
    Dawn is our vision for the next generation of Shopify themes. Browse the code on GitHub, then use it as a starting point to build your own theme.
  </ImageCard>
</Section>

<Surface backgroundColor="cyan" >
  <Section>
    <Grid columns={2}>
      <IconCard
        iconSize="small"
        variant="flat"
        iconLocation="top"
        padding="none"
        title="Migrate your theme to Online Store 2.0"
        paragraph="body"
        image="/assets/icons/48/flag.png"
        darkImage="/assets/icons/48/flag-dark.png"
        hrefLabel="Learn more about Online Store 2.0"
        linkVariant="primary"
        backgroundColor="cyan"
        href="/docs/storefronts/themes/os20"
      >
        Make your theme more flexible and easier to maintain by migrating it to the new architecture. Using Online Store 2.0, you can add and remove sections from any template, and prepare your theme for [app blocks](/docs/apps/build/online-store/theme-app-extensions).
      </IconCard>
      <IconCard
        iconSize="small"
        variant="flat"
        iconLocation="top"
        padding="none"
        title="Build fast with Shopify tools"
        paragraph="body"
        hrefLabel="Learn more about Shopify’s tools for themes"
        linkVariant="primary"
        backgroundColor="cyan"
        image="/assets/icons/48/pickaxe-2.png"
        darkImage="/assets/icons/48/pickaxe-2-dark.png"
        href="/docs/storefronts/themes/tools"
      >
        Shopify provides a range of tools to help you to collaborate and build themes faster.
      </IconCard>
    </Grid>
  </Section>
</Surface>

<Section>
<Grid columns={3}>
<IconCard
iconSize="medium"
variant="flat"
iconLocation="left"
title="Shopify CLI"
image="/assets/icons/48/cli.png"
darkImage="/assets/icons/48/cli-dark.png"
linkVariant="header"
href="/docs/storefronts/themes/tools/cli"
hrefLabel="Learn more"
>Initialize, preview, test and share themes in your local development environment.</IconCard>
<IconCard
iconSize="medium"
variant="flat"
iconLocation="left"
title="Shopify GitHub integrations"
image="/assets/icons/48/github.png"
darkImage="/assets/icons/48/github-dark.png"
linkVariant="header"
href="/docs/storefronts/themes/tools/github"
hrefLabel="Learn more"
>Integrate GitHub into your Shopify admin to manage your theme code.</IconCard>
<IconCard
iconSize="medium"
variant="flat"
iconLocation="left"
title="Theme Check"
image="/assets/icons/48/check.png"
darkImage="/assets/icons/48/check-dark.png"
linkVariant="header"
href="/docs/storefronts/themes/tools/theme-check"
hrefLabel="Learn more"
>Detect errors and enforce best practices as you code, or as part of your CI pipeline.</IconCard>
</Grid>
</Section>

<Section>
  <ImageCard
variant="flat"
imageLocation="right"
paragraph="body"
title="Shopify Theme Store"
image="/assets/landing-pages/storefronts/themes-mdx/theme-store.png"
darkImage="/assets/landing-pages/storefronts/themes-mdx/theme-store-dark.png"
href="/docs/storefronts/themes/store"
hrefLabel="Learn how to start selling"
linkVariant="primary"
>Design beautiful, purpose-built themes for different markets, and sell them to millions of merchants on the Shopify Theme Store.</ImageCard>
</Section>