Headless is a nice concept – at least on paper.
Anyone who has ever used any type of CMS can relate to the pain of not having complete creative freedom over the front end and
But having more creative freedom is just one aspect. Hacking your way around the templating system of your CMS and gaining creative control is very doable. But it often comes at the expense of website performance. So if you try to do a lot of customizations to your website, you’ll hurt its performance and get stuck with a slow website.
These are some real problems that led to the popularity of headless architectures.
In eCommerce, headless is getting more attention from businesses that want to focus on bespoke experiences and storytelling.
Check this article to learn what the F*** headless is?
Denim Tears, for example, has gone wild with their shop design – eliminating the standard Add to Cart button in their product catalog on PLPs.
But it all looks good from a distance. Implementing headless comes with its own set of challenges. And sometimes, those challenges have far bigger repercussions than simply compromising on your front-end experience.
Headless technically means developers have the control to bring their own stack. While technical leaders might find this the ultimate AHA moment, business leaders need to be wary that a bad tech decision is not only very easy to make but also very costly.
And I am only talking about it in the context of large, established brands. If you’re small to mid-sized, you’re better off sticking to your traditional eCommerce platform – Liquid OS in the case of Shopify.
A small to mid-market company that doesn’t have a full-fledged technical team to maintain the headless build shouldn’t get into its mess. It will create more technical debt, vendor lock-in, and a disastrous situation that they’ll find themselves stuck in.
With the recent updates to Shopify OS and Liquid, staying on Shopify Liquid makes much better sense for small to mid-sized companies. Shopify has done a good job solving the challenges we talked about earlier that led to the popularity of headless in the first place.
So, for small to mid-size, we completely rule out headless.
If you want more details about who headless is for, listen to this podcast where Asim Bawany and Rick Watson chat about headless and throw their heart out.
Now, back to the need of large enterprises and if they even need to move to a headless architecture.
Well, in my opinion, there are definite advantages of headless that enterprises can’t achieve with any monolith system.
If we go back a few years, you’ll recall the constant woes of enterprise brands about the limitations in Shopify Plus. They were crying over performance issues, frustrations with Liquid, their need to internationalize their content and serve different content to 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 aren’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.
Hydrogen + Oxygen changed that narrative.
Shopify made a good bet on this in 2020 when they introduced their headless stack, Hydrogen + Oxygen.
They were probably listening to the woes of large brands and the frustrating liquid limitations, which often led these merchants to vent out on Reddit and Slack.
But when headless started getting popular, Shopify knew it was only a matter of time before some software company comes up with their headless stack that would creatively eliminate the risks associated with a headless solution. If that happened, Shopify would have easily lost their customer base.
Good for them, the nightmares of brands that tried moving to headless in the early days slowed down the trend, giving them time to develop their own headless stack.
That stack is called 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.”
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 the 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.”
Finally, before wrapping our discussion, I asked Muneeb a simple but a very nuanced question on what technology to choose if anyone 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.”
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.
The post Is Shopify Hydrogen + Oxygen the Answer to all Headless Woes? appeared first on Codup.