Breaking the Liquid Barrier: Why Shopify Brands Are Migrating to Hydrogen and Oxygen for Performance, Flexibility, and Growth

Written by Raymond Lim, Software Engineer at TrackIt

Is it Time to Rethink Your Shopify Stack?

Shopify has done wonders for e-commerce. With its built-in tools, slick admin interface, and Liquid-powered themes, launching an online store became accessible to just about anyone. And for a long time, that was more than enough.

But as brands grow, so do customer expectations. Faster load times. Personalized content. A seamless, app-like shopping experience that feels tailor-made—because it should be. That’s when many merchants start to feel the limitations of the traditional Shopify theme setup.

When there’s a need for more control over a storefront’s design, performance, or customer experience—or when developers want to work with modern tools like React, Tailwind, and Vite — Hydrogen and Oxygen offer a new path forward.

Hydrogen is Shopify’s React-based framework for building custom storefronts using a headless approach. Oxygen is an edge-hosting platform that delivers blazing-fast performance around the world. Together, they give brands the freedom to move beyond theme constraints and build next-generation shopping experiences, without giving up Shopify as the backend.

What follows is a look at why teams are moving from Liquid to Hydrogen and Oxygen, how the two approaches differ, and how to decide whether the switch makes sense for a growing brand.

What Are Liquid, Hydrogen, and Oxygen?

Before diving into the technical details, it’s helpful to clarify two key terms that will come up frequently in the following sections: Storefront and Headless.

What is a Storefront?

In Shopify terms, the storefront is the part of the online store that customers actually engage with. It’s the visual and interactive layer—the homepage, product pages, collections, search results, cart, and even portions of the checkout experience.

Think of it this way: if an online store were a house, the storefront is everything a guest sees when they walk in — the layout, the decor, and how easily they can move from room to room. The backend (Shopify’s admin, product data, inventory, etc.) is the plumbing and wiring behind the walls.

With that foundation in place, it becomes easier to understand how Shopify has traditionally powered the storefront—and how that model is changing with newer tools like Hydrogen and Oxygen.

What Does “Headless” Mean?

In a traditional Shopify setup, the frontend (your theme) and the backend (products, inventory, checkout, etc.) are tightly coupled. Shopify uses Liquid, its templating language, to generate the HTML for each page on the server before sending it to the customer’s browser. This is known as server-side rendering, and it means Shopify handles both the data and the visual presentation in one tightly integrated system.

Headless e-commerce breaks that connection. The backend still runs on Shopify, but the frontend is built independently using a custom tech stack, such as Hydrogen with React. The two communicate through the Storefront API, offering complete creative freedom on the presentation layer.

This approach unlocks:

• 💡 Greater flexibility
• 🚀 Improved performance
• 🧩 Easier integrations (CMS, search, personalization, etc.)

That said, one common question arises: Is Hydrogen truly headless?

The answer depends on how “headless” is defined.

Technically, yes — Hydrogen qualifies as a headless framework. It decouples the frontend from the backend, relies on the Storefront API, and gives developers full control over the customer experience.

However, if “headless” is taken to mean platform-agnostic and entirely detached from any vendor-specific tooling, then Hydrogen doesn’t fully meet that definition. It’s built specifically for Shopify, by design.

This isn’t necessarily a drawback. It’s Shopify’s way of offering the benefits of headless architecture—flexibility, speed, and control—without requiring teams to rebuild core systems or leave the platform’s ecosystem. It strikes a balance between creative freedom and operational continuity.

How Liquid and Hydrogen approach storefronts differently (liquid = tightly coupled frontend + backend vs Headless = decoupled frontend + API layer )

Liquid – The Classic Shopify Template

Liquid is Shopify’s in-house templating language and has powered most Shopify themes for over a decade. If a theme has ever been installed, .liquid files tweaked, or Shopify’s drag-and-drop editor used, Liquid was at work behind the scenes—whether users realized it or not.

<div class=”grid gap-4”>  {% for product in collections.all.products limit: 3 %}   <div class=”product-card”>   {% if product.featured_image %}    <img     src=””{{ product.featured_image | img_url: ‘200x’ }}”     alt=”{{ product.featured_image.alt | escape }}”     width=”200”    />    {% endif %}    <h2>{{ product.title }}</h2>    <p>{{ product.price | money }}</p>   </div>   {% endfor %} </div>

An example of a basic product loop in Liquid. Liquid is simple and declarative—it pulls data directly from Shopify and renders it as HTML.

Strengths

• Simple and secure — Liquid’s syntax is beginner-friendly and safe.
• Theme-based — Launching a store without writing a single line of code is possible.
• Ecosystem-friendly — It works seamlessly with Shopify apps, checkout, and admin.

However, despite these strengths, Liquid begins to show its limitations as a store—and its ambitions—grow.

Weaknesses

• Storefronts are mostly confined to the theme’s structure and what Shopify permits via the Theme API.
• Personalization and dynamic interactivity often rely on third-party apps or complex JavaScript workarounds.
• It’s not built for modern developer workflows—lacking components, state management, or build tools like Vite or Webpack.

While Liquid remains an excellent starting point, brands seeking enhanced performance, design flexibility, or React-native workflows will eventually encounter its constraints.

Hydrogen – Custom Storefronts with React

Hydrogen is a React-based framework designed for building custom storefronts powered by Shopify’s Storefront API. It’s built on top of React Router (formerly Remix), a modern full-stack web framework focused on speed, routing, server-side rendering, and nested layouts—features available out of the box.

import {json} from ‘@shopify/remix-oxygen’; import {useLoaderData} from ‘@remix-run/react’; export async function loader({context}) {   const {storefront} = context;     const {products} = await storefront.query(`     query {       products(first: 3) {         nodes {           id           title           handle           featuredImage {             url             altText           }           priceRange {             minVariantPrice {               amount               currencyCode             }           }         }       }     }   `);     return json({products: products.nodes}); } export default function ProductHighlights() {   const {products} = useLoaderData();     return (     <div className=”grid gap-4″>       {products.map((product) => (         <div key={product.id} className=”product-card”>           <img src={product.featuredImage?.url} alt={product.featuredImage?.altText} width={200} />           <h2>{product.title}</h2>           <p>${parseFloat(product.priceRange.minVariantPrice.amount).toFixed(2)}</p>         </div>       ))}     </div>   ); }

Hydrogen leverages React and GraphQL to fetch and render data dynamically.

While it’s possible to use the REST API since Hydrogen is built on React Router, it primarily relies on Shopify’s Storefront API, which is based on GraphQL. This setup gives full control over how content is displayed.

What Makes Hydrogen Exciting (and Easier Than Going Headless From Scratch)

Hydrogen isn’t just another trendy developer toolkit—it’s a Shopify-optimized framework designed to save significant time and reduce headaches when building a custom storefront.

Built-in Shopify Components & Cart Logic

Hydrogen comes with ready-made components and utilities deeply integrated with Shopify’s Storefront API, including:

• Product variant selectors
• Cart forms and checkout buttons
• Smart <Image /> and <Money /> components
• SEO helpers, analytics hooks, and localization tools

Without Hydrogen, developers would need to build all of this from scratch—fetching raw data from the API and manually constructing every element.

Seamless Storefront API Access

Hydrogen comes pre-configured with everything needed to interact smoothly with Shopify’s backend:

• Shopify’s GraphQL client
• Context for storefront sessions, including cart, customer, and localization data
• Type-safe queries with easy-to-use gql templates

There’s no need to build a custom API layer, write authentication logic, or manage tokens—Hydrogen takes care of all that.

Built on React Router — Routing, Data Loading, and Error Handling Done Right

Built on React Router (formerly Remix), Hydrogen offers:

• Intelligent server-side data loading through loader() functions
• Nested routing and layouts for organized structure
• Error boundaries and suspense support
• Performance-optimized defaults that enhance SEO

React Router manages complex server rendering and data-fetching patterns, allowing Hydrogen to seamlessly integrate these features with Shopify’s ecosystem.

Streaming SSR, Optimized for Shopify’s Edge

Hydrogen supports server-side rendering (SSR) with streaming out of the box and is designed to deploy directly to Shopify Oxygen, powered by Fastly. This delivers:

• Faster Time to First Byte (TTFB)
• Improved perceived performance
• Progressive page streaming into the browser, ideal for mobile users and slower networks

If hosting React elsewhere, this would require custom setup and configuration, but Hydrogen makes it native.

First-Class Developer Experience

While it uses modern tools like Vite, Tailwind, React, and GraphQL, what truly stands out is how ready-to-go the developer experience is. Hydrogen offers built-in structure, performance optimizations, and seamless Shopify integration, allowing teams to focus on building exceptional storefronts—not the plumbing.

The real magic is that Hydrogen enables React-driven experiences without sacrificing what makes Shopify powerful: the admin panel, checkout process, and robust APIs. The backend remains intact, while full control is gained over the frontend.

 Real-World Use Cases

• Building storytelling-focused homepages with animated sections, interactive sliders, and embedded video—all powered by React
• Implementing geo-based personalization using session data
• Integrating headless CMS, live search, product configurators, or custom cart logic

Hydrogen is ideal for teams seeking freedom, performance, and total control over their brand’s online presentation.

But… It Has Its Trade-Offs

Hydrogen and Oxygen open up a world of possibilities—but they’re not the right fit for every brand. Like any modern tech stack, they come with trade-offs, especially for teams accustomed to the simplicity of traditional Shopify themes.

Here’s what to consider:

Dev Skills Required

Hydrogen isn’t plug-and-play. It assumes familiarity with React, Remix, and GraphQL—or a willingness to learn quickly. Teams without a solid grasp of modern frontend development may find the learning curve steep, and the initial setup slower than expected.

Need to Rebuild Core Features

Hydrogen skips Shopify’s theme layer, which means many built-in features and apps won’t work out of the box. Flexibility comes at the cost of convenience—especially early on.

That includes:

• Theme app extensions
• The drag-and-drop editor (Sections Everywhere)
• Pre-built UI components from existing themes

More Setup, More Responsibility

Liquid themes let Shopify handle much of the heavy lifting. Hydrogen hands control to the dev team—which also means more ownership. Everything from performance tuning to SEO needs to be handled directly.

Be prepared to manage:

• Accessibility
• Meta tags and structured data
• Responsive layouts and UI states
• Localization and translation logic

Still Evolving

Hydrogen is powerful but still maturing:

• Some advanced features are under active development
• The ecosystem (plugins, tutorials, community support) is still catching up
• Fewer live production examples compared to the Liquid ecosystem

Shopify continues to invest heavily in Hydrogen and Oxygen, but the pace of innovation means staying current with frequent updates and best practices.

Oxygen – Hosting That Moves at the Speed of the Customer

Once a Hydrogen storefront is built, the next question is: where should it live?

That’s where Oxygen comes in.

Oxygen Overview (Source: https://shopify.engineering/how-we-built-oxygen)

Oxygen is Shopify’s edge hosting platform, purpose-built to deploy and serve Hydrogen storefronts at scale. It’s designed to ensure that a custom frontend loads quickly — regardless of where the customer is located.

What Drives That Speed?

Oxygen is powered by Fastly, the same edge CDN trusted by companies like GitHub, Stripe, and The New York Times. When a storefront is deployed on Oxygen, it’s distributed across Fastly’s global network of edge locations, significantly reducing latency and improving load times.

Oxygen Benefits

Oxygen brings modern hosting capabilities to Hydrogen storefronts—without adding complexity or cost. Here’s what sets it apart:

• Edge Performance by Default: Storefronts are served from Fastly’s ultra-low-latency global infrastructure, resulting in reduced Time to First Byte (TTFB), faster page loads, and a smoother experience across devices and geographies.
• Zero-Config Deployments: Connect a GitHub repository, push changes, and Oxygen handles the rest—no manual setup, CI/CD scripting, or hosting configuration required.
• Included with Shopify: Oxygen is bundled with Shopify plans, eliminating the need to pay separately for bandwidth, usage, team members, or edge functions—an advantage over services like Vercel, Netlify, or AWS.
• Built for Scale: Whether it’s a flash sale or peak holiday traffic, Oxygen is designed to scale without interruption.
• Tightly Integrated: Deployment and management are accessible directly within the Shopify admin, aligning with existing workflows.

Oxygen simplifies frontend hosting by removing the need for additional providers. For teams already invested in Shopify, it centralizes operations and delivers performance at a global scale, powered by Fastly.

Your Next Move: Liquid or Hydrogen?

The choice between Liquid themes and Hydrogen + Oxygen should reflect the business’s current needs—not simply follow trends.

• Liquid remains a strong option for teams prioritizing speed to market, theme-based design, and seamless integration with Shopify apps. It offers a stable, low-maintenance path that requires minimal technical overhead.
• Hydrogen + Oxygen is suited for teams looking to push creative boundaries, prioritize performance, and take full control of the storefront experience. With strong frontend development capabilities, it becomes possible to deliver custom commerce experiences that go far beyond the limitations of pre-built themes.

Hydrogen isn’t just “headless with Shopify”—it’s Shopify’s vision for the future of custom commerce, and Oxygen ensures a high-performance hosting solution is already in place—no need for additional infrastructure or tooling.

The following comparison can help identify the right path based on priorities, capabilities, and goals.

Your Priority	Best Choice
Launching quickly with minimal setup	✅ Liquid
No dev team or no React experience	✅ Liquid
Using Shopify apps and theme blocks	✅ Liquid
Drag-and-drop page editing	✅ Liquid
Full control over UI/UX and performance	✅ Hydrogen + Oxygen
Building immersive, storytelling-first experiences	✅ Hydrogen + Oxygen
Integrating headless CMS, custom search, or APIs	✅ Hydrogen + Oxygen
Want to personalize the storefront by user, region, or logic	✅ Hydrogen + Oxygen
Optimizing for global speed via edge hosting	✅ Hydrogen + Oxygen
Have React developers ready to own the frontend	✅ Hydrogen + Oxygen

How TrackIt Supports the Transition to Headless Shopify

TrackIt recently assisted a large e-commerce customer in transitioning from a traditional Liquid-based storefront to a headless Shopify setup built with Hydrogen and Oxygen. The shift delivered faster load times, improved design flexibility, and smoother integration with third-party services and APIs.

For businesses looking to modernize their Shopify experience, we offer guidance on designing performant storefronts using Hydrogen and deploying them reliably with Oxygen. 

Our team can help you navigate key decisions around data modeling, storefront-server interactions, and integration with third-party services. TrackIt also assists with optimizing infrastructure for scalability and cost-efficiency. Whether you’re starting from scratch or migrating an existing storefront, we can help you ensure a smooth and well-architected path to headless commerce.

About TrackIt

TrackIt is an international AWS cloud consulting, systems integration, and software development firm headquartered in Marina del Rey, CA.

TrackIt delivers tailored cloud-native solutions across multiple industries, including e-commerce and media. The company specializes in designing and implementing scalable, reliable, and cost-effective cloud architectures that support modern business needs – ranging from custom storefronts to order management systems and integrations with third-party APIs.

Cloud-native software development is at the foundation of what we do. We specialize in Application Modernization, Containerization, Infrastructure as Code and event-driven serverless architectures by leveraging the latest AWS services. Alongside managed services providing 24/7 cloud infrastructure maintenance and support, TrackIt offers comprehensive solutions that enable businesses to innovate and scale securely.