--- title: Storefronts description: The three ways to build a storefront on Shopify, and where to start with each. source_url: html: https://shopify.dev/docs/storefronts md: https://shopify.dev/docs/storefronts.md --- # Build and customize storefronts A storefront is the part of Shopify buyers see. Build one with a theme that runs entirely on Shopify, go headless with your own frontend on Shopify's APIs, or bring shopping into a native mobile app. [Create a theme\ \ ](https://shopify.dev/docs/storefronts/themes/getting-started/create) [Use Shopify CLI to create a starter theme and preview it with real store data.](https://shopify.dev/docs/storefronts/themes/getting-started/create) [Build a Hydrogen storefront\ \ ](https://shopify.dev/docs/storefronts/headless/hydrogen/getting-started) [Create a Hydrogen app, connect it to your store, and deploy it to Oxygen.](https://shopify.dev/docs/storefronts/headless/hydrogen/getting-started) Themes ## Build your first theme A theme is the storefront most stores run: Liquid templates that Shopify renders and hosts, so there's no server for you to operate. Both tutorials start you from a working theme rather than an empty directory. * [Create a theme](https://shopify.dev/docs/storefronts/themes/getting-started/create) generates a starter theme with Shopify CLI and previews your changes against real store data as you edit. * [Customize a merchant theme](https://shopify.dev/docs/storefronts/themes/getting-started/customize) connects the theme a store already runs, for when you're changing an existing storefront rather than building a new one. * [Architecture](https://shopify.dev/docs/storefronts/themes/architecture) explains what you've generated: how layouts, templates, sections, and blocks fit together. [Liquid](https://shopify.dev/docs/api/liquid) is the templating language they're written in. ![A storefront product page for a plant beside the Liquid template code that renders its title, price, and description.](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/production/assets/assets/images/storefronts/index/card-image-liquid-C561uygs.png) *** Best practices and tools ## Build themes merchants can edit You own the code, and merchants change content in the theme editor without touching it. Keeping that split clean is most of what separates a good theme from a frustrating one. * [Best practices](https://shopify.dev/docs/storefronts/themes/best-practices) cover how to structure templates, sections, and blocks so the editor stays flexible, along with performance and accessibility. * [Developer tools](https://shopify.dev/docs/storefronts/themes/tools) run the workflow: Shopify CLI for local development, Theme Check and the VS Code extension for catching Liquid errors, and the GitHub integration for keeping the live theme in version control. * [Theme features](https://shopify.dev/docs/storefronts/themes/theme-features) are guides to the jobs a storefront does, from product merchandising and search to markets and SEO. ![The no-code theme editor beside the JSON section schema that configures its blocks and settings.](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/production/assets/assets/images/storefronts/index/card-image-nocode-C7gZs_Kg.png) *** Sell themes ## Sell themes on the Theme Store Build a theme that works off the shelf and the [Theme Store](https://shopify.dev/docs/storefronts/themes/store) puts it in front of every merchant on Shopify. * [Requirements](https://shopify.dev/docs/storefronts/themes/store/requirements) set the bar for what gets accepted. Read them before you design, because they shape the theme itself, not just the listing. * [Revenue share](https://shopify.dev/docs/storefronts/themes/store/revenue-share) covers the money: there's no fee to list, and Shopify takes 15% of sales. ![A selection of purpose-built themes featured on the Shopify Theme Store.](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/production/assets/assets/images/storefronts/themes-mdx/theme-store-wip878L9.png) *** Headless ## Take the storefront headless Headless means you build and host the frontend while Shopify's APIs handle the commerce underneath. It's the most control you can have over a storefront, and the most work, so [Getting started](https://shopify.dev/docs/storefronts/headless/getting-started) walks through choosing a build option first. * [Hydrogen and Oxygen](https://shopify.dev/docs/storefronts/headless/hydrogen/getting-started) is the fastest path: Hydrogen is Shopify's React framework for headless storefronts, and Oxygen hosts what you build at no extra charge. * [Bring your own stack](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack) uses the same APIs from whatever framework you already run. * The [Storefront API](https://shopify.dev/docs/api/storefront) serves products, carts, and checkout, and the [Customer Account API](https://shopify.dev/docs/api/customer) handles login, orders, and buyer profiles. [Storefront Web Components](https://shopify.dev/docs/api/storefront-web-components) embed buying into any HTML page. ![A Hydrogen storefront collection page annotated with the components that render it, including CartForm, Money, and Pagination.](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/production/assets/assets/images/storefronts/index/card-image-hydrogen-Bhz3weW4.png) *** Mobile ## Sell inside native mobile apps Mobile brings the storefront into your iOS and Android apps, with Shopify handling the part you least want to rebuild: checkout. * [Checkout Kit](https://shopify.dev/docs/storefronts/mobile/checkout-kit) embeds Shopify checkout in your app, preloaded and themed to match, so buyers never leave for a browser. * [Accelerated checkouts](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview) add Shop Pay and Apple Pay buttons to product and cart pages, so buyers can pay without opening checkout at all. * [Mobile storefronts](https://shopify.dev/docs/storefronts/mobile/about-mobile-storefronts) covers building the browsing experience itself, with Buy SDKs for iOS and Android. ![A product card in a native mobile app connected to a Shopify checkout sheet with a Pay now button.](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/production/assets/assets/images/agents/checkout-kit-landing-light-Cf543G_1.png) ***