Before learning anything about Hydrogen, there are 02 important events you need to know:
- In early 2023, Shopify acquired Remix with the strategic aim of revamping Hydrogen - Shopify’s framework for building custom headless storefronts.
- In Shopify Winter Edition’ 23, Shopify announced that Oxygen - a serverless hosting platform designed to enable easy deployment of Hydrogen storefronts, - will be available on all plans except Starter, providing lightning-fast, globally available storefronts that seamlessly integrate with the Shopify ecosystem.
In this article, we’ll walk you through everything you need to know about Hydrogen, give you a hint on how a Hydrogen-focused future will look like for Shopify developers and the entire ecosystem, and let you decide your own next steps.
I. A short story about Hydrogen
We all know and love Shopify.
Over the relentless march of time (the one concept even the best DTC brands cannot make a quick sale of), Shopify has proved itself not just capable of survival - the competition between eCommerce platforms has always been tough, but a master of evolution, a sort of eCommerce Darwin’s dream, deftly adapting to the ever-shifting desires and needs of their eCommerce merchants.
However, Shopify has its limitation. And its limitation is in the name of Liquid. Shopify Liquid, despite being the current backbone of all Shopify websites, has some major drawbacks and limitations:
1.1. The risk of vendor lock-in is significant.
Liquid theme binds your code to Shopify - so if you want to migrate to a different system, good luck.
The liquid is (seemingly) built under the assumption that companies won’t evolve because it makes the e-commerce platform the hub around which the whole apparatus of success spins. When brands have to change their platform, the entire system might go to waste - translating into the loss of resources: thousands of hours and hundreds of thousands of dollars down the drain.
1.2. Customization with Liquid in the background takes a toll on developers.
The available options with Liquid are severely limited, whereas installing apps may incur additional fees and hamper performance. You can use additional app scripts, but they can conflict with your theme code, which results in even more redundant and non-reusable code. Any developer with a DRY mindset (don’t repeat yourself) would hate it.
1.3. The need for better performance optimization.
The liquid is a backend template language used for static content generation, therefore if you want to make a website more interactive and responsive, you have to use an additional 3rd script, and this guarantees to put a brake on your site’s loading speed.
The most fundamental drawback is that Liquid is a template language. A template language is always a tough nut to crack. Custom databases and complex logic becomes more formidable to implement. I remember reading this somewhere on Shopify Reddit - which perfectly captures the biggest drawback of Liquid:
“Liquid theme restricts you to how and what you can develop. Do you want to create a single-page application? No. Perhaps a progressive web application? No. Is it possible to unit-test your markup? Again, no! Even custom URLs are not an option.”
The engineering wizards at Shopify were acutely aware of these drawbacks - they must have been because they did come up with a plan, a brilliant one at that: Shopify Hydrogen
II. The State Of Shopify Hydrogen
Shopify Hydrogen is a new programming language that was specifically designed to improve the performance and scalability of Shopify stores. With Hydrogen, developers, and merchants can build headless storefronts the way they dream of.
Hydrogen is intended to be a replacement for Liquid - and Shopify is pushing for it with vigor. They acquired the community-favorite RemixJS and planned to use it to enhance Hydrogen’s stability and performance. They brought it to market with ferocity and convinced the biggest Consumer brands - like Allbirds or Tommy Hilfiger - to adopt it.
With the Remix team at Shopify, developers building on Shopify will benefit from new tools that they will love, and merchants will see custom storefronts that are faster than ever with an improved Hydrogen product. The Remix open-source community will have a strong sponsor and supporter they can trust to enable the framework to accelerate its roadmap, with the knowledge that they can bet on the framework for the long run. While Hydrogen is focused on commerce, Remix is focused lower in the stack, and will continue to be a general web solution that scales from content through commerce and all the way to apps. Shopify will use Remix across many projects where it makes sense, and you can expect to see more of our developer platform with first-class Remix support over time.
The possibilities with Hydrogen are abundant:
- Developers can create fully custom websites with access to the controllers and models, making complex logic and third-party service requests possible. Hydrogen also does not tightly couple code to the Shopify platform, meaning businesses can change platforms without having to start from scratch.
- Better Flexibility: Hydrogen enables developers to create a single-page application, a progressive web application, and to unit-test their code. It also supports custom URLs and has better performance than Liquid.
- Enhanced performance: Hydrogen is optimized for performance and is able to handle large volumes of traffic more efficiently than Liquid. This means that stores built with Hydrogen may load faster and be more responsive.
- Better error handling: Hydrogen has improved error handling and debugging capabilities, making it easier to identify and fix problems with your store.
- Improved developer experience: Hydrogen is designed to be easier to learn and use than Liquid, which should make it easier for developers to build and maintain Shopify stores.
As Shopify developers, I wager we’re at the threshold of a complete disruption - the eCommerce equivalent of transitioning from horse-drawn vehicles to automobiles. And using Hydrogen, merchants and brands have already incredible shopping experiences - those that are story-infused, blazing-fast, and unbelievably frictionless.
The future is bright and all, but where do we go from here?
III. Hydrogen is good, but not enough
3.1. Limitations to Hydrogen Adoption
Every new solution comes with new problems. This heuristic is neatly called the co-evolution of solution and problem. No one and nothing escapes from it. So does Hydrogen.
Imagine this:
Shopify developers are tasked with building an extensible, performant, nd lightning-fast storefront. They naturally turn to Shopify Hydrogen. This is a very good choice because Hydrogen is designed for this. All is well until the marketing team wants to tweak a photo here or throw in another section there - only to find that they're unable to do so. They are left hanging until developers roll out the edit live - a scenario that, in the world of eCom, is akin to navigating a 1769 Cugnot Steamer while everyone else is cruising in a Tesla.
3.2. Problems of Shopify Hydrogen
Headless Commerce, or Hydrogen more specifically, leans heavily towards developers, making it difficult for non-technical business users who need to make on-the-fly edits to the frontend layer. This gives rise to a peculiar catch-22: Shopify is so great to many people because it lifts a weighty amount of technical debt off their shoulders - allowing any average Joe to get a Shopify store up and running. However, going headless - while advantageous and robust - puts all that back in. Now you need a considerable amount of development resources to maintain headless storefronts - with the additional pitfall that most devs are finding their feet with it for the first time.
And not just this, there are a few other problems:
- Store Preview Is Absent: To have a storefront preview - which is mostly for business users, developers have to a preview environment themselves. This creates a perplexing consequence where your non-technical comrades within the e-commerce team might encounter a spot of trouble when attempting to implement said store without the luxury of real-time previews.
- App Support Leaves Much To Be Desired: We're still in the early stages of Hydrogen’s third-party app ecosystem. There are thousands of apps for Liquid-based storefronts, but at the moment there are fewer than 100 apps for Hydrogen storefronts. If you fancy utilizing any Shopify app, you'll have to roll up your sleeves and create middleware from scratch.
So what are the current solutions here?
IV. Shopify Hydrogen OWEN Theme - Best Solution for Headless Sites
One of the primary solutions to overcome the limitations of Shopify Hydrogen is the implementation of Hydrogen themes - which put everything you need to build a headless storefront with Hydrogen in a single package - eliminating the need to build everything from scratch and cutting down the cost for development resources.
4.1. Awesome Core Features of OWEN Theme
One noteworthy example of a headless theme explicitly built for Shopify Hydrogen is the Owen Theme. It offers a comprehensive set of features and components tailored to the needs of headless commerce - including, but not limited to:
- Conversion-focused page elements like Product Comparison, Shoppable Images, Product Bundling, Product Reviews, etc
- Support for multiple languages and currencies.
- SEO-Friendly. Device-responsive and mobile-first design.
- Seamless integration with Sanity and Strapi (headless CMS), Vercel (complete toolkit for Web), Algolia (e-Commerce search trends).
With Owen Theme, businesses can seamlessly integrate their preferred front-end framework and create visually stunning storefronts that enhance brand identity, engage customers, and drive conversions.
4.2. Custom Store Services
For businesses looking to adopt Shopify Hydrogen but lacking the in-house expertise or resources, custom store-building services have emerged as an effective and affordable solution. These services provide professional assistance in building, customizing, and optimizing Shopify stores powered by Hydrogen.
By leveraging the expertise of experienced developers and designers, businesses can swiftly transition to a headless architecture with Shopify Hydrogen without the burden of extensive technical knowledge.
But the biggest cons still remain: lack of freedom to make on-the-fly changes to front-end layers, and non-technical users still have to depend on developers for every edit. Until Hydrogen is really low-code, it won’t be able to catch on with the majority of merchants.
or that is, until Weaverse.
V. Introducing Weaverse: The First Theme Customizer for Hydrogen Storefront
Imagine OS 2.0, but for Headless, Hydrogen-powered Storefronts.
With Weaverse, Shopify developers build and curate reusable Hydrogen themes, then share them with non-technical users. Everyone builds their own headless Hydrogen-powered storefronts that are lightning-fast, performant, and highly customizable without writing code.
Here’s a sneak peek:
For non-technical users, Weaverse brought in the familiar section-based page-building experience they had with the current Shopify Customizer. Add section. Edit text. Add image. Customize. then Publish.
The best thing about Weaverse is that merchants can keep doing what they’ve been doing, but instead of a normal Liquid-based Shopify store, they got a blazing-fast Hydrogen storefront bursting with possibilities: HD video dancing in the background, sleek animation enlivening every corner, or uniquely story-driven product page design - they’re all within reach.
And by providing Shopify developers with a trove of pre-built components, pre-made Hydrogen themes, and a Theme Customizer, Weaverse enables developers to shorten development time and quickly overcome the technical complexity of building a Hydrogen storefront from scratch.
Weaverse is currently in private beta and will be open to the public soon. Very very soon.
If this is something you’re interested in, follow them on Linkedin or sign up for early interest.