What we already know

Hydrogen

Announced at Shopify Unite 2021, Hydrogen is Shopify’s answer to an easier, sleeker, headless build for developers and an exciting experience for customers navigating a Shopify store. The new framework from Shopify uses a React-based framework that allows custom storefronts with greater personalization opportunities that can be built quickly and don’t compromise site performance.

So how does this help merchants?

Before, your e-commerce development team usually had to trade-off between epic site speeds or beautifully designed experiences. But, with Hydrogen bringing together a host of technologies, including our partners: Nosto, Sanity, Contentful, Klaviyo, ReCharge, Okendo, and Aloglia, they’ve made it possible to achieve both exceptional site performance and dynamic user experiences.

We’re pleased to launch with Hydrogen to provide the best experience and support for our customers looking to migrate to a headless solution powered by Shopify and the Hydrogen stack. We’re here to help merchants build authentic and relevant online commerce experiences at scale.

Jim Lofgren
CEO, Nosto

Benefits of using Hydrogen:

• Starter templates. With Hydrogen, development teams have access to a starter kit, including a built-out demo store, accelerating development times.
• Pre-built components. Hydrogen has pre-built components for developers, making working with the API more effortless. The framework also allows you to reuse components across your site with its default tail-wind.
• Server-side rendering. Allows your website to progressively load based on priority and the users' navigation rather than loading the entire page at once, massively improving site speed. This is a benefit of a headless commerce build and isn’t limited to Hydrogen.  
• Default tail-wind. Allows you to reuse components built for a specific purpose, such as a PDP, across other pages on your site, such as your blog page, without updating CSS classes.
• Set-up for SEO success. Hydrogen includes pre-built SEO optimizations such as an automatically generated sitemap, metadata values for every page, and a customizable robots.txt file.

Potential drawbacks:

• Designed for Shopify API. Hydrogen is developed for the Shopify API only. Therefore its components are strongly tied to individual parts of Shopify’s API. Furthermore, Hydrogen can only be used to build Shopify storefronts, it doesn’t support other custom storefronts such as mobile apps.
• Developer-focused workflow. The Hydrogen framework is code-heavy, meaning everything will need to be built and maintained by your development team or Shopify Plus agency. Your non-development team e.g., marketing or product, won’t be able to manage the front-end layer of your site. But, this can be the case for any headless build. Alternatively, you can work with a Shopify Plus agency, like us, who can build and manage your Hydrogen store long-term or upskill your in-house teams. You can reach out to our teams to talk through this in more detail.
• App integrations. Although Shopify has some of their most popular apps ready to be easily integrated with the Hydrogen framework, and Sanity and Contentful as their preferred CMS choice (we’ll get to this later on), if you want a CMS or app that isn’t compatible you’ll need to link it yourself using middleware.

Oxygen

To put it simply - Oxygen is a Shopify hosting platform that enables you to host Hydrogen storefronts directly on Shopify Plus. This is a big yes from us - usually, with headless, you need a third-party platform to host frameworks, but Oxygen makes that need redundant. Instead, you can seamlessly integrate with Shopify’s Storefront API, deploying multiple different Hydrogen storefronts to preview, share, test, and experiment with.  

As for how it holds up for Shopify merchants? Oxygen was built to withstand large amounts of concurrent traffic for big sales like Black Friday without the chance of crashing and, deployed globally, for exceptional international selling experiences.

So what’s new in 2022?

Shopify officially launched Hydrogen in June 2022, including a few updates. Here’s a complete rundown of all the new features Shopify have added and made to its Hydrogen & Oxygen frameworks:

CMS preferred partners

As part of their official Hydrogen & Oxygen roll-out, Shopify have partnered with and invested in CMS tool, Sanity. Sanity is a completely customizable CMS tool that can be built from the ground up by developers and content owners alike. For this partnership, the team at Sanity has created a content application tool unique to Shopify’s Hydrogen & Oxygen. This will allow merchants to keep their products, variants, and collections on Shopify, their front-end synchronized with Sanity their CMS.

We’re excited to share that we've entered into a strategic partnership with Shopify and that Shopify has made a significant investment in Sanity. Together, we are making the integrations between our headless offerings seamless, creating an unparalleled opportunity for brands wanting to create exceptional experiences. This is a validation of how far our technology has come and how strategically important content is for the future of e-commerce. We are the first and only investment Shopify has made in a content platform.

Magnus Hillestad
CEO & Co-Founder of Sanity.io

Also up as a preferred CMS partner is Contentful. Contentful is one of the fastest-growing CMS technologies available today, so it’s no surprise that they were chosen to be a preferred vendor for the initial release of Hydrogen & Oxygen. Their API-first approach means that brand content, whether articles or product information, can be everywhere you sell your products, translated and updated in real-time with accuracy. Utilizing Hydrogen & Oxygen with a preferred partner like Contentful creates a powerful stack for any brand.

It is worth noting that other CMS’ can still be implemented into your headless stack. However, at this time, it will require a custom integration which may take more time than if you were using Sanity or Contentful.

Shopify API updates

With all the buzz surrounding Hydrogen, Shopify has updated their API to accommodate the new framework. Up until this point,  the storefront-API has been unsuitable for server-side applications. For a merchant, this means you could hit the rate limit, which impacts your site's overall functionality. This update allows the server to make requests on behalf of the merchant, working for many users without hitting a limit, opening up server-side operations that were too risky previously.

App integrations

In 2021, when Shopify first announced Hydrogen & Oxygen, there was concern surrounding the app integrations. Shopify has an extensive app store, with some favorites being a core part of merchants' tech stack. But, without an API integration for these apps, middleware was looking like the only option. Shopify has since announced a list of tech stack must-haves that are ready to be integrated into Hydrogen from the get-go meaning merchants won’t have to sacrifice their beloved tech solutions.

Create a unique subscription experience for your customers with Hydrogen & Recharge. We are excited to be the first subscription app compatible with Shopify's headless solution for merchants. Together, we are able to provide developers the flexibility & freedom of creating a custom subscription offering.

Ryan Forster
Partnerships Manager EMEA, Recharge

Working with over 70% of Shopify Plus brands, Klaviyo understands the need to adopt and support new technologies. That’s why we’re excited to be a part of the Hydrogen release, being one of few partners who are ready for and committed to the rollout.

Michael Worthley
Senior Manager and Solution Architect, Klaviyo

What this means for the future of e‑commerce…

With the announcement of Hydrogen & Oxygen last year, and now that it’s officially launched, it becomes more and more apparent that headless is the future of e-commerce and Shopify is paving the way. Shopify has a habit of removing barriers for their brands, and Hydrogen & Oxygen is no different - with this launch they’ve opened up headless to a broader array of merchants, not just those with high revenues and large customer bases. For brands, headless (and indeed Hydrogen as a headless framework) means new opportunities to iterate and adapt to changing demands faster, increasing their conversion rates. And, for their customers, faster, richer experiences from their favorite stores becomes the norm.

Hydrogen lets you get many of the advantages of headless whilst keeping the benefit of being tightly coupled to Shopify, plus you never have to worry about infrastructure again using Oxygen, Shopify's new hosting service. You can scale to millions of users while keeping operational costs low and fast-track to market.

Alex O'Byrne
Co-Founder and Director, We Make Websites

Hydrogen is also hugely important for the technical future of the web as its use of React Server Components is pushing React’s own roadmap. This shift means developers and agencies can take their best practices, constrained by monolithic architectures, and accelerate the development process, with better performance and design freedom and simplify the ability to personalize the online shopping experience.

Regardless of which headless framework you decide is 'best,' it's clear that a major platform, Shopify, investing in and launching this route to headless for their merchants will directly impact how brands consider building their e-commerce stores for the future.