Everything You Need to Know About Shopify’s Hydrogen and Oxygen

As customer expectations become higher, brands want to create storefronts that are more customised, exceeding what’s possible with a standard theme. 

Recognising this, Shopify announced at Unite in 2021 that it was investing in headless commerce with Shopify Hydrogen and Oxygen. Fast forward twelve months… Hydrogen and Oxygen have officially launched and are capturing the attention of ambitious, forward-thinking brands across the globe. 

If you too are thinking about taking your Shopify Plus store headless, you might be wondering what exactly Shopify’s Hydrogen and Oxygen deliver, the benefits and whether they’re right for your business. 

To save you time, in this article we walk you through everything you need to know about Shopify’s Hydrogen and Oxygen. So, without further ado, let’s ‌look.

What is Shopify Hydrogen?

Shopify Hydrogen is a React-based framework that allows developers to build customised Shopify storefronts. The framework gives you everything you need via your development team to deliver highly personalised and unique shopping experiences faster than ever before. 

Hydrogen is Shopify’s ‘opinionated’ framework solution for headless commerce builds, bringing the best out of the intersection between commerce, UX, and developer experience.

What is Shopify Oxygen?

Shopify Oxygen is the platform used to host stores built using Hydrogen. 

Hosting and deploying a headless storefront can have its hurdles, but Oxygen removes the need to maintain server infrastructure, making management and deployment of Hydrogen storefronts easier. 

Furthermore, Oxygen has been built to handle high volumes of traffic and help you maintain optimum site performance, which will come in handy during peak season sales and the running of successful social media campaigns. 

What are the benefits of Shopify Hydrogen?

In the past, ecommerce developers have needed to make a tradeoff between either site speed or a rich customer experience. But with Hydrogen, Shopify has brought together a variety of technologies including Nosto, Klaviyo and Recharge so it’s possible to build dynamic personalised experiences without compromising performance. 

Let’s take a closer look at Shopify Hydrogen’s benefits:

• Starter pack: Hydrogen gives your development team access to a starter kit, which includes a built-out demo store, providing you with the foundations to get going quickly.
• Smart caching: For speed and performance Hydrogen has built-in caching controls to handle complex information and minimise API calls. 
• Reusable components: The Hydrogen framework allows your development team to reuse components they build. 
• Your development team can contribute to Hydrogen: Shopify has opened Hydrogen’s development up to its community, allowing your developers to shape the product’s vision from the very early stages. 
• Pre-built SEO tools: Shopify Hydrogen is set up to provide you with everything you need to increase organic search traffic, including metadata values for every page, and an automatically generated site map. 

What are the potential drawbacks of Shopify Hydrogen?

• A developer-heavy workflow: The Hydrogen framework is code-heavy, which means everything needs to be built by your developers. Your non-technical team, including your marketing or product team, won’t have access to the front-end of your store to make changes. However, to make things easier, you can work with a Shopify Plus agency like Velstar who will help make managing your Hydrogen store easier or we can train your team to do it themselves. Interested? Get in touch to find out how. 
• Limited app integrations: It’s still early days for Shopify Hydrogen, consequently there aren’t APIs available for everything just yet. So if you want an app that isn’t currently compatible, you’ll need to create a middleware yourself for every app you want to use.
• Can only be used to build Shopify web storefronts: Hydrogen doesn’t support building other types of custom storefronts such as mobile apps, smart devices and video games.

Is Shopify Hydrogen and Oxygen ready?

Both Shopify Hydrogen and Oxygen are now available for merchants to use, with big brands such as allbirds already leveraging them. If you’re scaling and you want more creative freedom and merchandising opportunities, plus unrivalled site speed, then your business might be a great fit for Hydrogen and Oxygen, if you want to hear more, reach out to our Shopify experts. 

How much does Shopify Hydrogen and Oxygen cost?

Both Hydrogen and Oxygen do not have associated costs as they are publicly available JavaScript frameworks. What’s more, Shopify offers free hosting and deployment of Hydrogen on Oxygen. However, if you require additional tools and APIs this may come at an extra cost. 

Go headless with Velstar today

If you want to take your ecommerce store headless with Hydrogen and Oxygen or simply want to hear more about our headless services, speak to our team, we’d be happy to help.