Your Shopify theme is the bottleneck. It controls your page speed, your rendering pipeline, and what agent crawlers see when they visit your store. Running Shopify headless means keeping Shopify for what it does best: inventory, checkout, and payments, while replacing the frontend with something you fully control.
The Architecture Split
In a traditional Shopify setup, the storefront and backend are tightly coupled. Shopify's Liquid templating engine renders every page, and you work within its constraints. Going headless means decoupling those two layers so that Shopify becomes a pure commerce backend. A separate frontend application handles the storefront, pulling data through Shopify's Storefront API[1].
Why Brands Go Headless
- Performance: Liquid themes render on Shopify's infrastructure with limited control over caching and code splitting. A headless frontend gives you full control over streaming SSR, edge caching, and selective hydration.
- Core Web Vitals: You can optimize LCP, CLS, and INP at every level of the stack.
- Agent discoverability: Server-rendering all product data ensures that agent crawlers can read it. You can add JSON-LD structured data per product and publish an llms.txt file.
- Frontend flexibility: Use any framework, any component library, and build any experience you need.
How It Works
The architecture has three layers: Shopify Admin for products, inventory, and orders; the Storefront API as a GraphQL bridge[1]; and your custom frontend built with Next.js or Hydrogen[2]. The Admin layer stays exactly as it is. Your frontend queries the Storefront API for product data, cart state, and customer information, then renders the pages however you choose.
Performance Impact
Well-built headless storefronts routinely score 90+ on Lighthouse because you control the entire rendering pipeline[3]. There is no theme JavaScript bundle fighting with Shopify's app scripts and no Liquid rendering bottleneck. You choose the framework, the bundler, and the caching strategy, which means you can apply techniques like edge caching and selective hydration that are impossible within the theme system.
Agent Discoverability Impact
With headless, you control exactly what agents see: fully server-rendered HTML, JSON-LD per product, llms.txt, clean semantic markup, and full catalog exposure. Agents visiting a headless store with proper structured data can extract product information in a single pass. There is no client-side rendering wall blocking access, so every product page is readable the moment a crawler fetches it.
Trade-offs
Going headless introduces real costs that should factor into your decision:
- You are building and maintaining a separate frontend, which requires dedicated engineering capacity.
- You lose access to the Shopify theme ecosystem and its library of ready-made templates.
- Checkout still lives on Shopify, so you need to manage the handoff carefully via Checkout Extensions[4].
- Many Shopify apps assume a Liquid storefront and may need API-based alternatives.
- Shopify API versions evolve on a regular cadence, and your frontend must keep up.
When to Go Headless vs Stay on Themes
Stay on themes if you have a small catalog, no frontend engineering team, an early-stage business, or adequate performance with your current setup.
Go headless if conversion rates are performance-sensitive, agent visibility matters to your growth strategy, your catalog exceeds 1,000 products, you have frontend engineering capacity, or you need experiences that themes cannot support.
How Site Scanner Helps
Site Scanner audits the exact metrics that headless is designed to improve. Scan your current store to establish a baseline before migrating, then scan again afterward to measure the difference.