No-code, big impact
How Ask Phill helps brands scale on Shopify without the tech hassle
Shopify Hydrogen & Oxygen
Headless e‑commerce with Shopify Hydrogen and Oxygen
4 minute read13 Jun 2022
At their annual Unite conference last year Shopify teased Hydrogen and Oxygen, subsequently leaving the biggest cliffhanger of 2021 as the entire e-commerce industry began fantasising about React stores built and hosted natively in Shopify.
Well now they’re here. Almost exactly one year later Shopify finally dropped Hydrogen and Oxygen at Shopify Editions Summer ‘22. Here we’ll explain what’s new and how Shopify Hydrogen and Oxygen are about to change the game.
What’s new?
So what do we now know about Shopify Hydrogen and Oxygen that wasn’t clear when they were first teased this time last year?
Official CMS partners
Shopify have announced both Sanity and Contentful as official CMS partner tools for headless stores built natively in the platform with Hydrogen and Oxygen.
If you know about headless e-commerce on Shopify Plus, you’ll know it entails switching Shopify’s front-end with another CMS tool. Now Shopify have clearly marked Sanity and Contentful as the two go-to tools for all future headless projects.
With Sanity, there’s now a content application tool that’s unique to Shopify Hydrogen and Oxygen. With this installed, Shopify merchants can keep their products, variants and collections all stored on Shopify with a synchronised front-end built on Sanity.
For Contentful it’s slightly different. They have an API-first approach, presenting brand content across every available channel and accurately updating in real-time as merchants make changes to the Contentful CMS.
Anyone familiar with our work will know we’ve been championing Contentful CMS for some time now. The majority of our headless projects have used the front-end system, and those that don’t are built with Sanity. It’s great to see Shopify endorsing the two CMS platforms that we have years of experience using.
It’s worth noting that it will still be possible to build headless stores with Shopify Hydrogen and Oxygen using another CMS tool, but this will require a custom integration and possibly large headaches along the way. Our advice is to stick to Sanity and Contentful wherever and whenever possible.
Shopify API updates
Shopify have updated their API to accommodate the new Hydrogen framework. What does this mean? Well in short, it’s all about server-side rendering.
Server-side rendering is a process whereby a server returns HTML pages that are ready to render, alongside the necessary JS scripts for building an interactive page. This speeds up loads times and vastly increases user experience.
Server-side applications were previously incompatible with Shopify but thanks to the new API updates, that’s a thing of the past. Shopify stores now keep requests on the server side, improving performance and functionality by preventing merchants hitting the dread rate limit.
App integrations
One of the big questions circling the industry when Shopify first announced Hydrogen and Oxygen last year was how the platform’s most popular apps could function in future Shopify stores without an API-integration.
Speculation suggested some new middleware was likely the best option but Shopify have put those rumours to bed with the news of new app-integrations. All the must-have Shopify apps will still be available on Hydrogen and Oxygen stores, everything working as before through a brand new integration.
All the must-have Shopify apps will still be available on Hydrogen and Oxygen stores.
Our analysis
Without doubt headless is the future of e-commerce and Shopify have positioned themselves as firm frontrunners. The platform will soon be synonymous with headless React stores, built and hosted natively in the platform, opening up a new frontier for e-commerce experiences.
With Hydrogen and Oxygen Shopify have democratised headless e-commerce. Whereas it was once the most expensive option and only available to the largest brands with the biggest budgets, now much more modest companies have the option to go headless and build next generation e-commerce stores natively on Shopify.
Shopify already have a history of levelling playing fields. When the platform first launched it set out to democratise e-commerce, providing an easy-to-use website building experience that anyone could use, no matter what level their knowledge was at. Hydrogen and Oxygen are a continuation of this legacy, making the best possible e-commerce experiences available for the biggest number of people.
Hydrogen and Oxygen stores will be fast, more flexible and go to reach customers in a broader range of places. They can adapt to market demands more adeptly and therefore stay ahead of the curve much more easily. For merchants, they will increase visibility on search engines, attract and retain more customers and ultimately increase conversion rates.
With this standard becoming more widely available, we believe this is the beginning of a transitional era for e-commerce. The bar for expected user experience is rising and the overall quality of online shopping is increasing. It’s imperative that brands keep up if they want to have sustained successes.
From here, e-commerce is set to become more customisable and more personalised than we’ve ever seen. The technology is available in headless stores built with Shopify Hydrogen and Oxygen to build stores that recognise individual customers and adapt to their wishes. This is only the beginning, but the best place to prepare for the future is on Shopify.
As Europe’s leading Shopify Plus partner, it’s a special time for us to be working with the platform. We’re already pushing every new update to its limit, experimenting with further possibilities and looking for ways to push the user experience beyond what is already available.
If you want to get going with Shopify Hydrogen and Oxygen, get in touch with our team today for a free consultation.
Do you want to
stay updated?
Yes
