Is Shopify Hydrogen + Oxygen the Answer to all Headless Woes?

If we go back a few years, you’ll recall the constant woes of enterprise brands about the limitations in Shopify Plus. They were whining about performance issues, frustrations with Liquid, their need to internationalize their content and personalize content for different audiences, and the challenges they faced in delivering a consistent omnichannel experience.

Was headless the solution to their problem? 

It certainly looked like it. But things weren’t as simple. Many brands that made the bold decision to move to headless in the early days quickly realized the mistake they made. Some even migrated back to Shopify Plus, facing huge financial losses from losing all the money and resources they put into building headless. 

Headless technically means developers have the control to bring their own stack. While technical leaders might find this appealing, business leaders need to be wary of the fact that a bad tech decision is not only very easy to make but also very costly. 

Hydrogen + Oxygen changed that narrative. 

Shopify made a good bet on this in 2020 when they introduced their headless stack, Hydrogen + Oxygen. 

I sat down with our lead Shopify developer, Muneeb Tanveer and discussed the pros and cons of Shopify Hydrogen + Oxygen stack. We also compared it to other tech stacks that can be used to build a headless build on Shopify. 

Shopify Hydrogen is built on Remix, a React framework that is gaining widespread popularity because of its features like server-side rendering, intelligent data caching, and optimized loading strategies that enhance both performance and user experience.

Hydrogen was initially built on React. But within 1 year of its launch, Shopify revamped the framework and rebuilt it on Remix. It was a real pain for merchants who had already built their sites on Hydrogen V1 and had to migrate to V2. But that’s history now. 

Let’s talk about Hydrogen V2 for now.

Being a Shopify Plus developer working with our client NWF and DMF Lighting, Muneeb gave his first-hand insights about what Hydrogen offers and how it offers a faster and less risky track to getting a headless build on Shopify Plus. 

Hydrogen offers a boilerplate to get started with a headless build quickly. It also has native integration with Storefront API. Developers get to benefit from the commerce toolkit of Shopify and use ready-made components like a shopping cart, variant picker, and content galleries that natively integrate with Shopify and not only speed up development but make maintenance less of a nightmare too.

This is a major benefit of using Hydrogen as compared to using any other framework to build your headless store. While all major frontend frameworks like React, Next, Gatsby, and Vue work with Shopify, you have to start from scratch which is an unnecessary overhead. You also have to build the integration with Strorefront API from scratch if you choose tech stacks other than Hydrogen.

Hydrogen also has the benefit of being lightening fast and performant right out of the box. You don’t have to rely on your knowledge and expertise of best practices for writing well optimized code on React or Next. With that said, developers can focus on building bespoke experiences and styling outstanding UX when using Shopify Hydrogen. 

Having Oxygen in the mix further streamlines the web development process and simplifies complexities around hosting headless solutions. Oxygen is the hosting solution that can host custom content such as Hydrogen storefronts directly within the platform. Traditionally, merchants that wanted a headless ecommerce set up relied on third party hosting providers such as Netflify or Vercel. Oxygen with its native support for a Hydrogen build, 100+ server locations around the world, and native integration with Cloudflare makes it painless to create and maintain a headless Shopify store.

Hydrogen and Oxygen support the creation of applications that work seamlessly across multiple channels, including web, iOS, and Android apps, ensuring a consistent user experience no matter how customers access the store.

Muneeb Tanveer, Lead Shopify Developer, Codup

However, Muneeb pointed out an interesting limitation with Hydrogen.

If you want for example, only one type of page like the product detail page decoupled from the Shopify liquid templating system and move it to Hydrogen headless framework, you can’t do that. With hydrogen, you have to decouple the entire frontend. That’s where other frameworks give you more flexibility in letting you decouple a single page of your website and leaving the rest on Shopify’s traditional liquid templating system.

When doing my research, I also came across some misconceptions around Shopify Headless and its pressumed limitations of not being able to use the ready made widgets and apps that are available in the app store. 

The CEO of Commerce UI, Michal Kim debunked this on episode 422 of Inside Commerce. 

First, that’s not true. The big players in the App Ecosystem have already made connectors with Shopify Hydrogen, and Shopify is actively pushing this forward to get more adoption for Hydrogen.  Klayviyo, for example, allows you to create forms and pop ups on their platform and embed it on the headless frontend using an API.

But there’s another aspect to consider. If you step back and take a wider look, you’ll understand that its not even a problem. The real reason why you are even considering headless is because those ready made widgets aren’t making the cut anymore. One of the limitations with the traditional monolith architecture of Shopify is the inability to robustly customize Shopify Apps developed by another developer. Even if you find a way to customize an app and apply your own styling for example, you never know how long they will last. Those customizations could lead to your website breaking down when that app gets an update from the App Developer, often without any warning.

Michal Kim, CEO of Commerce UI

Finally, before wrapping our discussion, I asked Muneeb a simple but a very nuanced question on what technology to choose if someone still wants to go the custom, Bring Your Own Stack approach. With so many options like React, Next, Vue, Gatsby, and God knows what, making the right decision isn’t always easy. 

Instead of going into all the technicalities, Muneeb gave a simple answer that is so characteristic of a developer who follows the KISS principles of coding and has a DRY mindset.

There will always be a newer kid on the block that will appear to be cooler than the previous ones. But we should always choose the technology that has been out there long enough, has a large enough ecosystem and has the most community support.

Muneeb Tanveer

This was simple, no technical terms to wrap my head around. Yet, so valuable.  

To conclude, if you’re considering a headless build on Shopify Plus, Hydrogen + Oxygen will get you started quickly while minimizing risks of increased technical debt, agency lock-in, and costly development efforts. Hydrogen + Oxygen combines the reliability of liquid OS with the flexibility and performance benefits of headless stacks. 

With Hydrogen + Oxygen, Shopify has kind of “standardized” the development of headless commerce which makes it less likely for you to make a bad decision.