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