What is Shopify Hydrogen: An Intro to Shopify’s New Headless Solution

Scaling ecommerce brands often find themselves hitting the ceiling of what modern commerce platforms can provide.

Increasingly, they want to build totally custom storefronts that bend to their unique brand vision. And, shopper expectations are higher than ever before (with good reason).

They are looking for a brand experience that spans multiple channels and connects them to the brand identity.

To provide this, you must go far beyond what is possible with a standard (or even custom) theme.

You don’t want your product pages to look like everyone else’s. You want rich merchandising, more personalization, sub-second page loads, and design flexibility.

Luckily for forward-looking brands, the future is already here—you just need to look for it.

Shopify has now hitched its wagon to the headless commerce train, a signal of confidence in this future-proofing technology for ecommerce brands wanting to serve up especially rich customer experiences.

With Hydrogen, Shopify is offering its scaling customers the ability to expand outside of what its traditional frontend is capable of.

If you are considering taking your Shopify store headless, Hydrogen may have come up as an option.

So, what exactly is Hydrogen? Does it help you achieve the benefits of going headless? Is it something you should invest your time into?

We’ll answer all the questions and cover:

• What are Shopify Hydrogen and Oxygen?
• How does Shopify Hydrogen work?
• Pros and cons of Hydrogen for headless
• Other ways to go headless on Shopify
• Shopify Hydrogen FAQs

#cta-visual-fe#<cta-title>Is Headless Right for Your Shopify Store?<cta-title>Learn how our all-in-one Frontend Platform can help you go headless more simply.Learn more

What is Shopify Hydrogen?

Announced at Unite in 2021, Shopify Hydrogen is a React-based framework—or set of developer tools—for building custom Shopify storefronts that are more personalized and performant.

We’re happy to see Shopify, like Shogun, embracing React.js as the future of performant ecommerce storefronts.

The goal of the headless framework is to help you, via your development teams, build especially unique Shopify custom frontend storefronts faster.

Shopify bills Hydrogen as its “opinionated yet flexible” framework solution for building headless commerce sites.

Essentially it’s a very early V3 of Shopify’s theme infrastructure—the future of custom Shopify storefronts.

Ecommerce developers have typically needed to make choices between various tech, each with compromises, to achieve their creative vision.

Up until now, you’ve always needed to choose to prioritize either site speed or how dynamic and rich your experience can be. Headless means there’s no UX or speed tradeoff any longer.

Hydrogen is bringing together a variety of technologies to build especially dynamic shopping experiences without compromising performance.

With a quick-start build environment, smart caching, out-of-the-box components, and built-in cache defaults, it’s no wonder ecommerce developers are excited about this new framework.

It’s aimed to give you the speed you want and the creativity you crave.

Existing Shopify stores simply need to add Hydrogen as a sales channel from their dashboard and connect their GitHub account to get started.

What is Shopify Oxygen?

The aptly named Oxygen is Shopify’s hosting solution for Hydrogen storefronts.

With hosting servers distributed globally, Oxygen enables the loading speeds that brands expect with headless commerce.

Oxygen was built to help your store handle huge volumes of traffic for successful flash sales or really smash-hit social campaigns.

Even large brands can crash their sites when they drum up huge volumes of visitors, so Oxygen aims to help you maintain excellent site performance.

It’s also very easy to add Oxygen within the Hydrogen sales channel on the Shopify dashboard.

How does Shopify Hydrogen work?

Like other headless solutions, Hydrogen uses a React framework to create extremely performant and endlessly customizable online store frontends.

According to Shopify, they built Hydrogen because they found that the JAMStack frameworks weren’t the greatest fit for the platform.

When you move to a Hydrogen React Shopify storefront from your traditional Liquid-based Shopify theme, the frontend of your ecommerce store is only connected to the backend by way of APIs.

Hydrogen has pre-built components and hooks that map straight to your backend for a more seamless transition to headless.

The Storefront API allows brands to connect certain third-party integrations to their new storefront, replacing the Shopify apps they previously relied on.

And it relies on Vite for “server-side rendering (SSR), hydration middleware, and client component code transformations.”

For Shopify stores, Hydrogen (and Oxygen) are simple to add from the dashboard.

Shopify frameworks: Liquid vs React

Moving to the Hydrogen framework means leaving Shopify’s templating language, Liquid, behind in favor of the open-source JavaScript framework, React.js.

Like Shopify, Shogun Frontend has made a bet on React as the future of headless storefronts.

Where Liquid is largely limited to Shopify theme development, React is widely used and only becoming more popular.

This means that brands can more easily find knowledgeable developers when hiring in-house, and there are many expert agencies to help with implementation.

With Hydrogen, your team will no longer use Liquid to build and modify custom Shopify themes.

What is the React framework?

Developed by Facebook, React is a JavaScript UI development library that has become wildly popular in recent years for its reusable components, high-performance capabilities, and ease of development.

The open-source community that built and maintains React describes it as declarative, component-based, and “Learn Once, Write Anywhere.”

As any frontend developer loves to hear, React “makes it painless to create interactive UIs.”

Hydrogen uses React Server Components (RSC), which allows for page rendering from both the browser and the server instead of fetching all data from the server.

This opinionated workflow increases page load by reducing the amount of data necessary for rendering page elements. That said, RSC can also add more complexity to your headless development.

#cta-visual-pb#<cta-title>Empower your team to build your Hydrogen storefront<cta-title>For stores going headless with Shopify Hydrogen, Shogun Page Builder Advanced allows your whole team to create gorgeous store pages faster.Learn more

Pros and cons of going headless with Shopify Hydrogen

As with any technology, there are advantages and disadvantages of using Hydrogen to go headless with Shopify.

Let’s break down these pros and cons one by one.

Advantages of Shopify Hydrogen

Given the amount of work that Shopify puts behind its big projects, there is a lot to love about Hydrogen. It has a few main advantages at this stage of development.

• React.js: Shopify has put a stamp of approval on React.js as the future of dynamic, fast, customized commerce. If Shopify is making an investment in React, this is a big statement for the industry. It lends further credibility to React.js as the next big thing in ecommerce.
• You get a starter kit: Those starting out with Hydrogen get multiple starter templates and a bare-bones demo store right out of the box. You can see here what the starter kit includes (think: buttons, toggles, navigation). While you’ll definitely need to create elements yourself, having pre-built components to start out with is a big bonus.
• Your team can contribute to Hydrogen: Shopify is looking to the ecomm development community to help build Hydrogen. If you have a particularly robust internal development team to work on this, you could help shape the product vision from the very early stages with Shopify’s support.
• You can reuse the components you build: With a starter kit available, once you get going, you’ll create initial elements you can reuse throughout your eventual site on repeat as you need them.

• Some pre-built app connections available: While stores cannot bring many of the Shopify apps they love with them, there are a handful of apps that are integrated with Hydrogen at this time. This includes CMS solutions like Sanity and Contentful, as well as top apps like Klaviyo, Gorgias, Recharge, Nosto, and more.

Disadvantages of Shopify Hydrogen

At this early stage of development, Hydrogen is still far from perfect.

While Shopify will put in the work to improve Hydrogen over time, there are still a few big disadvantages of diving in with it now.

• A developer-heavy workflow you build from scratch: As a code-heavy initiative, while this Shopify framework gets you the benefits of going headless, everything needs to be built by developers in Hydrogen. This means your non-technical team members won’t have access to the frontend layer of the site to make changes. There’s no short or long-term drag-and-drop tooling available on the 2022 roadmap. Ultimately, this solution may be best for ecommerce teams with existing (and considerable) developer resources already available on staff.‍
• ‍There’s no store preview yet: Unless you want to build a preview environment yourself or use one of the new page building solutions, you can’t see a real-time preview of the Hydrogen-powered store you’re building. This can make it tricky to implement with your non-technical ecommerce team members.
• Uses React Server Components: In other words, Hydrogen’s output isn’t going to be a static progressive web app (PWA). So, your developers will need to develop for the Shopify server. As a sidebar, React Server Components are very trendy and new (consider it “in beta”). While it’s a very cool idea, it isn’t fully adopted by the majority of developers yet.
• You’ll need to connect your own CMS: Shopify is working with Sanity to bring CMS functionality to Hydrogen storefronts. Sanity is a third-party, developer-oriented CMS enabling teams to create schemas of content data (images, text, videos) for a degree of low code content management.
• The app support is minimal today: Shopify has signaled eventual app support, but it’s still very early days in their third-party app ecosystem. There aren’t APIs available for everything just yet. You’ll need to create middleware yourself for every Shopify app that you want to use.‍
• Only supports web storefronts. At this time, Hydrogen can’t be used to create other types of custom storefronts, like smart devices, mobile apps, and video games.
• Hydrogen is a long way from being a replacement for Liquid: With so many merchants invested in Shopify themes, it’s a big shift to focus attention away from Shopify Liquid themes and the non-technical audience these themes currently serve. If you’re looking at Hydrogen as a headless solution, you should consider that it may not outpace Liquid for some time.

Hydrogen pros and cons, according to experts

“The main pro of using Shopify’s Hydrogen is that it’s made by Shopify, which makes it easier to fast-track your build and speed up the setup process. The con is that it also locks you into Shopify, which defeats some of the point of going headless in the first place.”

– Dan Arrowsmith, Front-End Developer at Underwaterpistol

“Shopify’s Hydrogen makes it easy to get up and running with a headless platform. It’s extremely developer-friendly to build and manage pages. However, it doesn’t offer much to non-developers in terms of a CMS. This is a huge pitfall as most brands will need to make edits, add content, and build new pages on the fly. It’s very light in features in comparison to most headless platforms, and still in it’s infancy which means there’s a very small ecosystem of support.”

– Chris Ching, CEO of Electric Enjin

#cta-visual-fe#<cta-title>Is Headless Right for Your Shopify Store?<cta-title>Learn how our all-in-one Frontend Platform can help you go headless more simply.Learn more

Why are Shopify brands thinking of going headless?

There are tons of forward-thinking brands who want more personalized and performant Shopify stores.

Hydrogen is a direct response to this demand.

The workaround for the common pains of outgrowing Shopify as your brand scales has typically been investing in a custom Shopify theme.

More recently, brands are eyeing headless commerce and the various ways to achieve it as an even better, long-term solution.

While the benefits of headless were once only available to brands with massive dev resources or deep pockets, now it is becoming more achievable for all types of brands.

The unique user experience and speed benefits, which brands previously had to choose between, are now both on the table with headless commerce.

That said, some brands might want to look outside of the Shopify ecosystem to bring their stores headless, both because of the disadvantages mentioned above and to see what else is on offer.

What are headless alternatives to Shopify Hydrogen

Before Hydrogen created buzz around headless commerce, many alternatives already existed.

One option is going with a composable build. Another is choosing a frontend as a service (FEaaS) solution.

Let’s quickly look at both.

The composable commerce route

Often referred to as composable commerce because of the need to compose every piece of the headless architecture, this option gives brands a lot of control over what services they use.

With this control comes a high level of technical and managerial complexity.

You’ll require the technical skills of a headless agency to implement and maintain your build, plus your team will have to manage all the individual services that make up the architecture.

While composing your own headless build sounds great in theory, in practice, it will cost you more time and money to maintain.

Frontend as a Service (FEaaS)

By opting to use a merchant-focused all-in-one frontend platform, you can get all the best-in-breed tech (React, best-in-class CDN, a native CMS, and pre-built middleware) without the complexity of composing it yourself.

In other words, no need to worry about:

• Ongoing management of multiple vendors and contracts for each component of your ecommerce stack
• Complex decisions over modular pieces of your frontend (which your ecommerce team may not need or want oversight over)
• Needing a large development team for ongoing maintenance and compliance, and
• The cost of each component in the stack (the CMS, etc.)

If your store is scaling fast, and you want to enable your ecommerce team with more flexibility and rich visual merchandising opportunities, plus you want the speed Hydrogen promises, you might be a great fit for a unified frontend platform.

#cta-visual-fe#<cta-title>Is Headless Right for Your Shopify Store?<cta-title>Learn how our all-in-one Frontend Platform can help you go headless more simply.Learn more

Shopify Hydrogen FAQs

What is Shopify Hydrogen and Oxygen?

Hydrogen is Shopify’s headless commerce solution, and Oxygen is their hosting offering for Hydrogen-built stores.

Is Shopify Hydrogen free?

Technically, yes, Hydrogen is a free addition to your Shopify store.

But, in reality, when you start building out your Hydrogen store, you’ll need lots of technical development resources to make your headless dream a reality.

The true number for Shopify headless pricing with Hydrogen depends on many individual factors, from the third-party services you use to build your headless architecture and the in-house technical expertise you hire to the agency you use and the ongoing cost of maintenance.

Since Hydrogen relies heavily on technical team members to manage store content, the cost in time and continued development is also a consideration.

Hydrogen is definitely geared towards larger merchants, especially with the ecommerce development team you’ll need to work with it.

Similar to composable commerce or headless builds created entirely from scratch, you’ll likely need a larger internal development team of engineers to work with and maintain Hydrogen builds.

Is Shopify Hydrogen ready to use?

As of Q4, 2021, the Developer preview has been available, meaning you can get your hands on Hydrogen now to try it out, which is cool.

That said, at this time, it appears the developer preview is just that: a preview and beta for experimentation. Allbirds has been one of the pioneering brands trying out this technology.

But, it may be a while before the full vision of Hydrogen is realized/released.

The bigger question is: long term, if you’re set on building with Hydrogen, can your brand’s ecommerce team afford to run on a 100% developer-focused workflow?

Essentially, you’ll need to consider what your workflows might need to look like if you’re dependent on Hydrogen.

If you’re aiming to grant your non-technical team members more flexibility and free up your brand’s internal development teams for other revenue-driving activities (outside your web channel), Hydrogen might present more oversight and technical responsibility than you want to take on.

The next evolution of ecommerce is fast headless stores

As Shopify has demonstrated by moving into the headless world, the future of ecommerce is here.

Hydrogen may have some development ahead of it to become what it envisions for a headless solution, but it’s exciting that they are working to fast-track more ecommerce brands toward speedy storefronts that put the customer experience first.

For brands that want their marketing teams to make big, impactful changes to their storefronts without affecting backend functions, Shogun Frontend is the solution.

#cta-visual-fe#<cta-title>See if an all-in-one Frontend Platform is the headless approach for your brand<cta-title>Get a stunning, high-converting headless frontend with lightning-fast performance with Shogun Frontend. Learn more