Shopify’s Hydrogen & Oxygen – All You Should Grasp

In the prior year, Shopify unveiled their commitment to headless commerce by introducing Hydrogen and Oxygen, their fresh headless frameworks. Nearly one year later, with the introduction of Shopify Editions, Hydrogen & Oxygen has been officially launched. Alongside that, there are enhancements and updates that are bound to captivate prominent brands and enterprising e-commerce administrators. To spare you the trouble of research, we’ve compiled all the details available so far, the updates, and the implications for headless commerce. So, let’s delve into it…

What’s Already Familiar

Hydrogen

Unveiled at Shopify Unite 2021, Hydrogen represents Shopify’s solution for a more straightforward, more stylish, headless setup for developers and an exhilarating shopping encounter for customers maneuvering a Shopify store. The novel framework from Shopify employs a React-based structure that facilitates tailored storefronts with expanded customization prospects that can be rapidly constructed without compromising site efficacy.

In What Way Does this Aid Merchants?

Previously, your e-commerce development squad often confronted a dilemma between remarkable site swiftness or exquisitely designed experiences. Nevertheless, with Hydrogen amalgamating an array of technologies, encompassing our partners: Nosto, Sanity, Contentful, Klaviyo, ReCharge, Okendo, and Aloglia, they’ve paved the way for achieving unparalleled site performance and lively user experiences.

We are thrilled to kick off with Hydrogen to supply top-tier experience and assistance for our clients eyeing a shift to a headless solution energized by Shopify and the Hydrogen stack. We are here to assist merchants in constructing authentic and pertinent online commerce experiences at scale.

Jim Lofgren
CEO, Nosto

Upsides of Leveraging Hydrogen:

• Initial templates. With Hydrogen, development squads have access to an entry kit, containing a pre-assembled demo store, hastening development durations.
• Pre-designed components. Hydrogen embraces pre-designed components for developers, facilitating seamless interaction with the API. The framework also furnishes the ability to reuse components throughout your site utilizing its default tail-wind.
• Server-side rendering. Empowers your site to gradually load based on precedence and users’ browsing actions instead of loading the entire page at once, significantly enhancing site swiftness**. This is a bonus of a headless commerce structure and isn’t restricted to Hydrogen.**  
• Default tail-wind. Allows the reuse of purpose-built components, like a PDP, across different sections of your site, like your blog page, without necessitating updates to CSS classes.
• Preparation for SEO triumph. Hydrogen entails pre-established SEO enhancements such as an automatically generated sitemap, metadata values for all pages, and an adaptable robots.txt file.

Probable Limitations**:**

• Tailored for Shopify API. Hydrogen is tailored exclusively for the Shopify API. Thus, its components are closely linked to distinct segments of Shopify’s API. Moreover, Hydrogen can solely be utilized for constructing Shopify storefronts, lacking support for other custom storefronts such as mobile applications.
• Developer-oriented workflow. The Hydrogen framework is laden with code, signifying that everything must be composed and sustained by your development team or Shopify Plus organization. Your non-development unit, e.g., marketing or product, won’t have the capability to oversee the front-end layer of your site. Nonetheless, this scenario is commonly encountered with any headless setup. Alternatively, you can collaborate with a Shopify Plus organization, like us, who can establish and administer your Hydrogen store long-term or enhance the skills of your internal teams. Feel free to get in touch with our teams to delve deeper into this.
• Application integrations. Although Shopify has some of their most favored applications ready for straightforward integration with the Hydrogen framework, and Sanity and Contentful as their preferred CMS choice (we’ll delve into this later), if you desire a CMS or application that isn’t compatible, you’ll need to manage the linkage independently utilizing middleware.

Oxygen

In a nutshell – Oxygen stands as a Shopify hosting platform that authorizes you to host Hydrogen storefronts directly on Shopify Plus. This receives a resounding yes from us – typically, with headless, a third-party platform is required to host frameworks, yet Oxygen obsoletes that necessity. Instead, you can seamlessly sync with Shopify’s Storefront API, disseminating multiple distinct Hydrogen storefronts for preview, sharing, testing, and experimentation.

Regarding its adaptability for Shopify merchants? Oxygen was architected to endure copious concurrent traffic volumes for significant events like Black Friday without the risk of failing and, when deployed worldwide, it delivers outstanding international sales experiences.

What’s Fresh in 2022?

Shopify unveiled Hydrogen officially in June 2022, incorporating several updates. Here’s a comprehensive overview of all the fresh functionalities Shopify has introduced and integrated into its Hydrogen & Oxygen frameworks:

CMS Favored Collaborators

As fraction of their authorized Hydrogen & Oxygen launch, Shopify have cooperated with and invested in CMS tool, Sanity. Sanity stands as a completely adaptable CMS tool that can be conceived from scratch by developers and content proprietors alike. For this collaboration, the personnel at Sanity have developed a content application tool customized to Shopify’s Hydrogen & Oxygen. This allows merchants to maintain their products, variants, and collections on Shopify, with their front-end harmonized with Sanity their CMS.

We are thrilled to disclose that we have forged a strategic partnership with Shopify and that Shopify has allocated a substantial investment in Sanity. Together, we are streamlining the integrations between our headless offerings, establishing an unparalleled potential for brands desiring to erect exceptional experiences. This attests to the progression of our technology and the strategic importance content holds for the future of e-commerce. We stand as the sole investment Shopify has made in a content platform.

Magnus Hillestad
CEO & Co-Founder of Sanity.io

Also designated as a favored CMS collaborator is Contentful. Contentful spans as one of the speediest growing CMS technologies on offer currently, hence it’s no surprise they were selected as a preferred provider for the preliminary release of Hydrogen & Oxygen. Their API-first approach denotes that brand content, whether articles or product details, can be disseminated wherever you market your products, translated and refreshed in real-time accurately. Employing Hydrogen & Oxygen with a preferred companion such as Contentful engenders

a robust assortment for any brand.

It’s important to mention that alternative CMS options can still be integrated into your headless stack. However, presently, a custom integration would be necessary, which might consume more time compared to using Sanity or Contentful.

Updates in Shopify API

With all the hype around Hydrogen, Shopify has enhanced its API to accommodate the new framework. So far, the storefront-API wasn’t suitable for server-side applications. For merchants, this could result in hitting the rate limit, thereby affecting the overall functionality of their site. This update permits the server to make requests on behalf of the merchant without encountering limits, enabling server-side operations that were previously considered risky.

Integrating Apps

Back in 2021, when Shopify first introduced Hydrogen & Oxygen, there were concerns regarding app integrations. Shopify boasts an extensive app store, with some favorites being essential components of merchants’ technology stack. However, without API integration for these apps, middleware seemed like the only alternative. Fortunately, Shopify has now disclosed a list of essential tech stack components that are prepared for seamless integration into Hydrogen right from the start, ensuring merchants can keep their favored tech solutions.

Enhance your customers’ subscription experience with Hydrogen & Recharge. We are thrilled to be the initial subscription app compatible with Shopify’s headless offering for merchants. Together, we provide developers the flexibility and liberty to craft a custom subscription service.

Ryan Forster
Partnerships Manager EMEA, Recharge

Collaborating with more than 70% of Shopify Plus brands, Klaviyo recognizes the necessity to embrace and support new technologies. That’s why we’re delighted to be part of the Hydrogen release, standing among the few partners ready for and dedicated to the rollout.

Michael Worthley
Senior Manager and Solution Architect, Klaviyo

Implications for E‑commerce’s Future…

Since the announcement of Hydrogen & Oxygen last year and now its official launch, it’s increasingly evident that headless architecture is the future of e-commerce, with Shopify leading the way. Shopify has a track record of eliminating barriers for its brands, and Hydrogen & Oxygen are no exceptions – this launch broadens the reach of headless to a wider range of merchants, not just those with high revenues and extensive customer bases. For brands, adopting headless (especially Hydrogen as a headless framework) offers new avenues to adapt quickly to changing demands, enhancing their conversion rates. For customers, faster and richer experiences from their favorite stores are becoming the standard.

Hydrogen provides many headless advantages while staying tightly integrated with Shopify, plus with Oxygen, Shopify’s latest hosting service, you can scale to millions of users, reduce operational costs, and accelerate time-to-market without worrying about infrastructure.

Ewan Mak
Shopify Engineer, Tenten

Hydrogen also plays a vital role in the web’s technological future, as its use of React Server Components is guiding React on its roadmap. This evolution empowers developers and agencies to step up their practices, breaking free from monolithic architectures, streamlining development with improved performance and design freedom, and simplifying the personalization of the online shopping journey.

Irrespective of which headless framework you determine as the ‘most suitable,’ it’s evident that Shopify, a major platform, investing in and unveiling this path to headless for its merchants will directly influence how brands approach the construction of their e-commerce platforms in the future.