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

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, e-commerce developers 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.

The nature of headless commerce stores – where multiple back and front end systems are linked via powerful APIs – means that brands can now have it all. A content-rich experience and lightning fast site 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?

Sounds perfect? Are there any drawbacks? Well, as we’ve written previously, a headless commerce website isn’t necessarily the correct choice for every brand. Here’s why:

• 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.

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.

Is Shopify Hydrogen right for my brand?

How do you decide if a headless website such as one built with Shopify’s Hydrogen framework is right for you and your brand?

Here are some key questions to consider:

• What budget are you working with? Depending on the complexity of your tech stack, internationalisation and other facts, a Shopify Hydrogen store can cost anywhere between £40,000 and £400,000.
• Do you want to offer your customers a design-led, content-rich browsing experience without compromising on site performance?
• Do you want to offer a seamless omnichannel experience across various devices?

If you answered yes to all of those questions (and have a commensurate budget), then a Hydrogen-based store may be the best choice for your brand.

Which brands are using Shopify Hydrogen?

If you need some further reassurance, then you’ll be pleased to know that some truly massive (and well known) brands have hopped on board the Shopify Hydrogen train.

Some of the most impressive examples of Shopify headless stores include:

• The official website of Drake – which offers probably the most impressive browsing experiences we’ve ever seen on an e-commerce store.
• Denim Tears – just look at that homepage! Aside from that wonderfully immersive ‘window’ into the site, category and product landing pages offer snappy, attention-holding performance.
• Patta x Tommy – when does browsing an e-commerce store feel like a piece of interactive entertainment? When it’s the Patta x Tommy store. We feel this store really ‘stretches the legs’ of Shopify Hydrogen.
• Baboon to the Moon – a colour brand needs a colourful website. And, that’s exactly what Baboon to the Moon has achieved with this Shopify Hydrogen masterpiece.

See what we mean? A headless website can really make e-commerce brands stand out from the crowd…

Go headless with Velstar today

If you want to take your e-commerce 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.

Explore Velstar’s headless development services now