.png?width=2000&height=862&name=Headless%20blog%20image%200%20(1).png "Headless Commerce on Shopify with Hydrogen and Remix")
What is Headless Commerce?
For those of you who need a recap: headless commerce means bypassing any limitations of your e-commerce platform by decoupling the front-end from the back-end, making it able to replace the front-end with another framework. This offers you a lot of flexibility in design, while still being able to use the functionality of the backend where needed.
What is more - and this is THE big advantage of headless architectures if you ask us - going headless will mean a big improvement in terms of loading speed and performance. Why is this important? Because, as everyone in e-commerce knows: more speed equals more conversion equals more revenue. Improving your store’s conversion with as little as 0,1% can translate into a lot more sales.
That speed comes at a cost, though. As Wouter explains it: “Think of going headless as buying a Ferrari. The car itself is expensive, and if you want to keep up with the competition you will need mechanics to service it. It’s not wise to go headless if the investment won’t pay itself back, if you don’t need this kind of speed or if you can’t afford the maintenance.”
Headless with Shopify: Hydrogen and Oxygen
Still, headless is the pinnacle of e-commerce performance. And Shopify is becoming a major player in making headless architectures more mainstream.
With the launch of Hydrogen and Oxygen in 2022, Shopify introduced their own React-based headless commerce stack (Hydrogen) and their own hosting platform (Oxygen), which offers Shopify merchants a way to go headless without the risks that came with a homegrown headless setup, like framework maintenance and agency lock-in.
With Hydrogen and Oxygen, the code base is continuously maintained and updated by Shopify itself. This guarantees compatibility with the Shopify backend at all times, and significantly reduces costs associated with maintaining a headless architecture (like framework updates regarding performance and security, hosting maintenance, SEO optimizations and making sure your Shopify analytics are correct). This makes adopting a headless strategy feasible for a broader range of brands.
Hydrogen powered by Remix as your headless toolkit
Shopify launched Hydrogen and Oxygen in Summer 2022, and made continuous improvements ever since. Most importantly: Shopify acquired Remix, a superfast, best in class web framework, and used it to upgrade the engine of Hydrogen.
Remix has a reputation for having a brilliant team that has produced a truly elite framework for developers with stunning performance. It’s an all-in-one solution that makes building web applications faster, easier, and more efficient. With this smart move, Shopify has pushed its headless solution to the enterprise level.
So, in 2024 the tech stack for headless architectures with Shopify looks like this:
- Back-end: Shopify (Plus);
- Front-end: Hydrogen as the headless framework, maintained by Shopify;
- Content management: A third-party, API-based CMS, like Builder.io, Storyblok, Contentful and Sanity;
- Hosting: Oxygen as the hosting and deployment platform, also maintained by Shopify.
We always aim to stay as close to Shopify as possible, and with this tech stack we feel that we can now offer our clients a future-proof headless solution.
4 reasons why to choose headless commerce
1. Site speed
Wouter: “In theory, a traditional (Liquid) store can do everything that headless can do. But a headless architecture allows for a much faster front-end, which can result in an increased conversion rate”.
2. Content flexibility
For merchants who want full control over their website and content, going headless can be a great solution. However, losing the convenience of Shopify’s "Sections Everywhere" can be a concern. Fortunately, headless CMS options like Builder.io offer similar functionalities. For enterprise clients with large setups, Contentful, Sanity or another headless CMS solution can provide the control they need to manage content across multiple (language) stores. Headless CMS solutions excel in this area, giving merchants the flexibility and control they need to create customized and localized online experiences.
3. Engineering velocity
Not only will your front-end be faster, with headless it will also be easier and faster to integrate new tech, enabling you to quickly jump onto consumer trends and continuously innovate.
Senior Frontend developer Remco explains: “Anything that has an API can be theoretically connected to Shopify - but it will be easier and better integrated in a headless setup. If you can achieve what you want with a few apps from the Shopify app store, then stay with Liquid, because the extra cost will probably not be worth it. But if your brand uses an ERP, a legacy loyalty system, a PIM, a WMS, you name it: then integrating it all with Liquid becomes more complex and cumbersome. As is the case with offering a seamless omnichannel experience.”
4. Development capacity
Finally, something to keep in mind is the fact that headless architectures are often based on React. Remco: “React is the holy grail for many developers. While Liquid is a bit of a niche language, most developers know about modern web development and tools like React. Hence, if your brand wants to roll out twenty ‘classic’ Shopify storefronts in one go, it might be a tad difficult to do that on short notice because developers specialised in Shopify and Liquid are relatively scarce. You will be more flexible when you make those storefronts headless and have them built by React developers.”
Making the headless business case: calculating your ROI
Like we mentioned before, page speed is the main USP of going headless. Wouter: “With Liquid our developers get loading speeds down to, say, 2 seconds. With headless it goes down to 1.2, 1.3 seconds or even subsecond (>40% speed increase). That might sound negligible but it feels much faster, especially with feature-rich sites that have product configurators and whatnot. You can build feature-rich shops that still feel very crispy. This is much harder to achieve with a liquid setup.
You should try it out for yourself with Shopify’s demo site. It’s a totally different experience.”
→ Check out Shopify’s Hydrogen demo store here 🏎
All that speed opens up a lot of room for truly unique user experiences. But it’s important to consider the balance between cost and speed. Let’s look at the e-commerce revenue formula to see how we can analyse this:
Revenue = Traffic * Conversion Rate (CR) * Average Order Value
The pagespeed increase leads to an increase in CR, which gives you a direct revenue gain with that same factor. So, imagine you increase the CR from 1,0% to 1,1%; this means a 10% increase in revenue:
Revenue gain headless = Revenue * CR increase %
If you then multiply this with your profit margin (accounting for the direct product, logistics, marketing and sales costs) you will get the benefits of going headless (regarding pagespeed).
Benefit of going headless = Revenue * CR increase % * Profit Margin %
For example, with €1M annual revenue and an CR increase and Profit Margin of 5% and 25% respectively, you get:
Benefit of going headless = €1M * 5% * 25% = €12,5k a year
Obviously, this is not enough revenue gain to balance the extra costs of going headless. But with higher revenues and a bit higher increase of CR of 10% (eg. when you migrate a slow feature-rich shop to headless), things start to look a lot sunnier:
Benefit of going headless = €50M * 10% * 25% = €1,25M a year
This illustrates that going headless is not for everyone. You need a certain revenue level to balance out the extra costs, but then it can make real sense.
What are the costs of a headless build on Shopify?
The costs of (re)building a headless store on Shopify highly depend on your needs. This is influenced by elements like the complexity of your architecture, the feature-richness of your site, and your design. If you're interested to receive a quick assessment and bandwidth for your situation, please fill out our contact form.
Checklist: What e-commerce brands are best suited for a headless build on Shopify?
So what type of brands would benefit from a headless setup with Hydrogen, and when is it best to stick with a ‘traditional’ Shopify store? We would love to help you find out if headless is the way to go for your brand.
Do you tick one of these boxes? Then we believe it’s worthwhile to investigate a headless setup:
- You are a large, established brand at (or approaching) enterprise level;
- You see enough conversion improvements from fast loading speeds to cover the cost of building and maintaining a headless setup;
- You want to offer feature-rich storefronts with a spectacular user experience but maintain excellent performance;
- You want to offer your customers a seamless omnichannel experience;
- You need to integrate your e-commerce platform with a complex tech stack that changes frequently;
- You have complex, multi-language, international storefronts and require efficient content management;
- You need a high engineering velocity and don’t want to be dependent on the availability of Shopify developers.
What would we advise e-commerce brands who are considering headless?
Remco: “If there was ever a good moment to jump on the headless trend, that moment is now. Going headless enables businesses to leverage the latest technologies and design trends, to create an e-commerce experience that stands out in a crowded market. Code can help you step into headless at the highest possible level."
Implement headless Commerce on Shopify with Code
Do you feel confident headless page speeds and the additional flexibility make a real difference for your brand’s revenue? Then your next step is to find a reliable Shopify (Plus) agency that can build and maintain your headless store for you. We've been deep-diving into building headless with Shopify's Hydrogen and we're now ready to help e-commerce brands build and scale their headless stores.
As our current clients know, Code never builds a store from scratch. We work from our own Code Base Theme (CBT), which has all our years of experience and best practices poured into it and is built to the highest standards.
Our new Code Base Theme seamlessly integrates with Shopify's React-based Hydrogen and Oxygen technologies and is designed to receive frequent updates from Shopify. This means you can stay ahead of the curve with the latest innovations and features without the hassle of having to maintain your own headless setup.
Headless can give you the speed, flexibility and innovation power you need to achieve your goals and outperform your competition .
Would you like to explore if going headless with Code and Shopify (Plus) is the best fit for your brand? Please fill out our contact form and we'll be in touch with you within 24 hours.
