Custom Storefront
Quick Definition
A Custom Storefront is a headless frontend built using frameworks like React or Next.js (often hosted on Shopify Oxygen) that connects to Shopify's backend via the Storefront API.
Table of Contents
What is a Shopify Custom Storefront?
A Shopify Custom Storefront (often called a headless storefront) is an e-commerce architecture where Shopify's backend commerce database is completely decoupled from its visual frontend layout. In a standard setup, Shopify serves page templates using its proprietary Liquid template engine. In a custom storefront setup, developers build the frontend website using modern JavaScript frameworks like React, Next.js, or Remix, and fetch product data via the Shopify Storefront API.
This allows brands to run custom storefront experiences on external hosting environments (like Vercel, Netlify, or Shopify's native hosting platform Oxygen), using Shopify only for customer accounts, cart management, checkout processing, and inventory control.
Standard Liquid Theme vs. Custom Headless Storefront
Deciding between a traditional theme and a headless storefront involves trade-offs between customization freedom and cost:
| Feature | Standard Liquid Theme | Custom Headless Storefront |
|---|---|---|
| Frontend Stack | Shopify Liquid, HTML, CSS, vanilla Javascript. | React, Remix (Hydrogen), Next.js, Vue, etc. |
| App Installation | Instant. Apps inject code blocks into the editor. | Complex. Requires developers to integrate app APIs manually via frontend code. |
| Page Speed (LCP) | Dependent on theme optimization and active app scripts. | Extremely fast. Utilizes static-site generation (SSG) and edge hosting. |
| Development Cost | Low to Moderate. Easy to maintain. | High. Requires specialized React developers. |
Pros and Cons of Going Headless
Headless custom storefronts are popular among high-growth brands due to their performance advantages. Because the page is pre-rendered static HTML served from edge servers, page load times are extremely fast. Additionally, developers can integrate content from multiple CMS platforms (like Contentful or Sanity) alongside Shopify products.
However, going headless disables the standard Shopify Theme Editor. Marketing teams cannot drag and drop banners or edit page content without developer assistance unless a Headless CMS is integrated. Third-party apps that modify the frontend (like product reviews or sizing charts) will also fail to work out-of-the-box and must be re-engineered using their APIs.
Shopify Hydrogen and Oxygen
To reduce headless development friction, Shopify launched Hydrogen - a React-based framework built on Remix optimized for e-commerce - and Oxygen, a global hosting platform built on Cloudflare Workers to host Hydrogen sites at the edge. This provides developers with pre-built components for carts, variants, and product lists, and offers merchants a secure, scalable hosting environment included in their Shopify plan. Learn how user logins are managed in our Customer Account guide.