Shopify Hydrogen & Oxygen Image

Shopify Hydrogen & Oxygen Guide from Shopify Hydrogen Experts

Last updated: May 24, 2022

Ecommerce is continually evolving, the way stores are built and managed is changing all of the time. Shopify Hydrogen and Shopify Oxygen are Shopify's React-based framework and global hosting solution built for headless technology ecommerce stores on the Shopify Plus platform. Headless ecommerce involves building the front end and the back end of a store separately leading to some great benefits such as improved speed, limitless functionality and ultimate control over the code. Hydrogen and Oxygen provide merchants with a toolkit to build headless ecommerce stores with a backend powered by Shopify Plus.

We are Shopify Hydrogen Experts, if you are considering a headless store with Shopify Plus then get in touch with our team today to make the most out of the technology. Now, let's dig into Shopify Hydrogen and Shopify Oxygen to learn more about these two releases by Shopify.
See our headless Shopify ecommerce services.

Introduction to Shopify Hydrogen & Oxygen

Shopify Hydrogen & Oxygen is the best-practice approach to building and hosting a headless ecommerce website that integrates natively with the Shopify tech stack. Shopify Hydrogen and Oxygen is the ultimate developer toolkit to allow merchants to launch headless ecommerce stores or arguably ultimate developmental control within one platform. Hydrogen & Oxygen form part of Shopify's enterprise-level component tech stack called Shopify Commerce Components. Whilst a headless approach is not for all merchants however it does offer best-class performance, flexibility and complex data management - Shopify Hydrogen and Oxygen allow merchants to launch headless stores natively within the infrastructure of Shopify Plus. This guide will explore Shopify's Hydrogen and Oxygen tech stack and how we can help brands launch a headless architecture with Shopify Plus.

What is Shopify Hydrogen?

Shopify Hydrogen is a powerful new technology that makes it easier than ever for developers to build high-performance, server-side rendered (SSR) apps on Shopify. This technology is built on top of the popular React framework and uses TypeScript to provide a more robust and type-safe development experience. In fact, Shopify Hydrogen is an opinionated React framework that allows developers to build unique and entirely custom front-end experiences that access the backend of Shopify plus for data such as customers, products and more. At current, developers can build bespoke Shopify themes using the templating language called Liquid however this does come with some limitations of the platform. Shopify Hydrogen offers the ulimate developer tools pre-built components to allow developers to build headless stores and access utilities that natively integrate with Shopify as the backend platform.

By using React or Shopify's opinionated version, merchants can achieve lightning-fast frontend experiences for merchants. The library of pre-built Hydrogen components to craft a page includes a shopping cart, variant picker and content galleries which can present huge complexity when building from the ground up. Shopify Hydrogen allows developers to focus on building technologies, styling outstanding UX, fast store experiences with support around traditionally difficult headless functionality whilst leverage Shopify storefront API to access product data and more. Hydrogen will give the building blocks of the future Shopify architecture and ecommerce sites. The way merchants & agency clients make updates to their store is different and the navigation of these changes should be taken carefully.

What is Shopify Oxygen?

Shopify Oxygen is a global hosting provider that can host custom content such as Hydrogen storefronts directly within the platform. Merchants wanting a headless ecommerce set up rely on third party hosting providers such as Netflify. Oxygen is supported by Shopify's growing global infrastructure which will include over 100 server locations worldwide. Headless ecommerce with Hydrogen and Oxygen will streamless headless ecommerce stores. Shopify Oxygen manages the server components and complexity needed for Hydrogen without the need for a third party hosting provider for the front-end of an headless Shopify store.

When is Shopify Hydrogen available?

Shopify Hydrogen is now available and can be accessed via Shopify's dedicated GitHub repo. The framework is publicly available for developers to use and it is no longer in developer preview. Shopify Hydrogen has been used by leading brands such as allbirds. In order to leverage Shopify Hydrogen you will need to hire a specialist developer or Shopify Hydrogen Expert agency like us to build you a store the uses this development framework.

When is Shopify Oxygen Available?

Shopify Oxygen is now actively available to host Shopify headless stores that leverage Shopify Hydrogen framework. What's more Shopify allows merchants to deploy headless ecommerce stores built with Hydrogen to deploy and host free on Shopify.

How much does Shopify Hydogen & Oxygen cost?

Hydrogen & Oxygen does not have any associated action costs as it's a publically available javascript (React by Facebook) framework. Shopify boasts free hosting of Hydrogen stores with deployment onto Oxygen however you will be required to subscribe to Shopify Plus to access the free hosting. Note you may require additional tools and providers that link or connect with APIs to deliver the ultimate shopping experience.

Who is Shopify Hydrogen and Headless ecommerce best for?

Shopify Hydrogen is an opinionated react framework code built for enterprise-level retailers with complex requirements that wish to build a headless ecommerce store that integrates seamlessly with Shopify. Shopify's component infrastructure is not for everyone but instead for high-performing large-scale businesses with large teams due to the high ongoing costs and investment needed to launch a headless store. Shopify has historically been seen as creating ecommerce solutions for smaller brands however that is simply not the case with a fast-growing enterprise merchant base on Shopify Plus but also now with headless infrastructure. It is important to note that Shopify's standard theme infrastructure and enhanced feature stack with Shopify Plus is enough for the majority of small to large brands - headless should only be considered by brands with highly complex architectural needs.

What are the components and features of Shopify Hydrogen?

Hydrogen's framework offers the most technically challenging parts of a headless store built and tested to make building a headless store powered by Shopify quicker and easier for development teams.

One of the key features of Shopify Hydrogen is its ability to package and route different types of requests to different types of routes. This makes it easy to create custom server-side logic for your app and to manage different types of requests in a more efficient way. Another important feature of Shopify Hydrogen is its support for GraphQL. This powerful query language allows you to retrieve exactly the data you need from Shopify, reducing the amount of unnecessary data transferred between your app and the server. In addition to these core features, Shopify Hydrogen also provides a number of productivity tools and middleware options to help streamline your development workflow.

For example, the hydration middleware ensures that your app's state is correctly initialised on the client-side, while the Nosto media middleware makes it easy to add personalised product recommendations to your app. Other features and compontents of Shopify Hydrogen include:

Getting Started on Shopify Hydrogen

Shopify offers two-built store hydrogen templates that developers can use as the base frame of the store with all major functionality included. This means that development resources can focus on building unique content, functionality and integrations with the basics already down.

Shopify Hyrdogen Components

Shopify Hydrogen also has a UI kit which means time does not need to be wasted on fundamental store functionality. Pre-built components include customer accounts and site searches. Another functionality like a cart and add-to basket comes right out of the box with the start templates. Developers can still build custom components or modify existing ones to meet custom design requirements of a project.

SEO Basics with Hydrogen

SEO can be a great reason to choose headless ecommerce stores due to the speed improvements a headless store offers. Shopify Hydrogen comes equipped with pre-built SEO requirements such as a sitemap, metadata values for every page and a robot.txt file. Of course, the continued development practices will need to relish in a wealth of SEO expertise however it's a great start.

Shopify Hyrdogen Storefront API

Shopify Hydrogen stores allow easy access to Shopify's APIs meaning customisation and bespoke functionality is built leveraging the power of Shopify.

Shopify Hydrogen Performance

Several performance features are included with Shopify Hydrogen such as caching strategies, server-side rendering and powerful hosting with Oxygen. This offers your customers the fastest on-site user experience.

Features of Shopify Oxygen

Shopify's optional hosting solution also comes packed with some great features including performance insights, analytics and logs deployment. Connect seamlessly with Github and manage preview and custom environments / demo store too!

How does Shopify Hydrogen work?

Shopify Hydrogen is a react-based framework used to build the front end of a headless ecommerce website. However, as you'd expect, it has API connections to Shopify and security built-in. If you were to opt for an alternative headless framework such as Next.JS then you'd need to build the connections to Shopify yourself! Shopify Hydrogen also has a library of pre-built components to speed up the development phase of a Hydrogen headless store whilst still offering the customizability and flexibility you'd express from headless architecture.

Shopify's Storefront API allows headless stores to connect to Shopify's powerhouse of features, giving developers ultimate control over the tech stack. Non-headless Shopify stores use a code language called Liquid which is managed on the inside of Shopify meaning that the developer of the store is limited to the capabilities of Shopify only.

What are the advantages of Shopify Hydrogen?

Hydrogen has been coined as "the future of ecommerce" so let's dive into some of the advantages that Shopify Hydrogen has to offer for brands wanting to leap into headless ecommerce and Shopify

Powered by React.JS

- React JS is the javascript type that Hydrogen is written upon and comes with its own wealth of benefits. Benefits of React include speed, flexibility, and usability - React was voted the most loved code language amongst developers and users of the code.

Ready to launch Hydrogen template

- Shopify Hydrogen offers an entire store template that is ready to launch, meaning developers do not need to spend months building the same features but instead can focus on custom store experiences.

Shopify Hyrdogen Integrations

- pre-built integrations with Shopify Hydrogen are growing such as content management systems like Contentful, as well as leading apps such as Klaviyo & Gorgias.

Shopify Hydrogen Customisability

- the main reason that brands choose headless is the ability to have complete control over the frontend tech stack and not be limited by the platform of choice. Shopify Hydrogen is no different and allows developers to build entirely custom storefronts and integrations. There is also a community of developers working on the code to support and provide tips with the existing documentation

What are the disadvantages of Shopify Hydrogen?

A headless store with Shopify Hydrogen isn't all roses and should be carefully considered. Some of the disadvantages of Hydrogen and headless include:

Developer heavy - the biggest consideration about any headless e-commerce store is you will be highly reliant on developers. A headless front end is entirely separate from Shopify and the backend meaning you'll need third-party tools to manage content and onsite features. A big benefit of Shopify themes is the amazing content editing tool called Online Store 2.0 which even allows you to create new pages without developers. Any onsite changes are likely to require a developer to do them.

You'll need your own CMS - Shopify Hydrogen is only the react framework that powers the frontend code - it does not offer a content management system that you may be used to with Shopify Themes.

Minimal App Support - One of the great benefits of Shopify is the rich amount of apps in the app store to extend the features and functionality of your store. If you want to relish in features you'll need to rely on apps having a native integration, open API or have a developer build it for you.

How to get started on Shopify Hydrogen?

There are lots of ways to get started with Shopify Hydrogen, whether you're an experienced developer or just starting out. The official docs provide a comprehensive overview of the technology and its various features, as well as example projects and lots of helpful information on everything from runtime variables to channel bundles.

If you're looking for even more information, there are a number of great resources available online. For example, the Shopify Hydrogen GitHub repository contains lots of example projects and code snippets, while the official Shopify developer blog frequently publishes articles on new features and best practices for working with the technology.

To get started with Shopify Hydrogen, you'll need to have Node.js and Yarn installed on your machine. From there, you can use a tool like Vite to quickly create a new project, or you can start from scratch and configure everything manually.

Shopify Hydrogen VS Liquid

Shopify's templating language called Liquid is used to piece together HTML, CSS & Javascript to form a Shopify Theme. The language is proprietary to Shopify and the platform can read Liquid to generate the frontend experience for customers. In addition to this, it allows merchants to use Shopify's built-in content management system. Not only does Liquid mean customers can remain in control of the store, but it also is what thousands of accredited Shopify apps are integrated with allowing merchants to quickly and easily install new features to their store. However as Liquid is built by Shopify and hosted within their theme architecture, it means that developers are limited by the capabilities of Liquid and Shopify.

React is an open-source javascript framework meaning that it is not built by Shopify and the flexibility and customisability are almost limitless. Merchants that use React or Shopify's opinionated framework, Hydrogen, will not be closed within the Shopify architecture but instead have a custom frontend built and hosted on a hosting server of their choice. The main benefit of Hydrogen or React is that you are not limited by the Shopify platform or Liquid.

Shopify Hydrogen VS Other React Frameworks

Hydrogen uses React Server components as its base for the framework, allowing page rendering from both the browser and the server which ultimately improves site speed. The main benefit to choosing Hydrogen over another React framework such as Next.JS is the connectivity to Shopify's API which is pre-built and tested. By using Hydrogen, developers save huge amounts of time as features that are required to connect to Shopify's API for basic ecommerce features such as cart etc are ready to go. Hydrogen also comes fully equipped with a full store template pre-built to be used as a foundation and many site components or elements that can be used and prevents the need for everything to be built from scratch for a project.

Summary for Shopify Hydrogen & Oxygen

Headless ecommerce presents many complexities, requires significant investment and highly skilled developers to build in javascript frameworks such as React, Hydrogen aims to simplify this. Oxygen supports headless merchants with native hosting beyond the standard hosting of liquid files included with Shopify. Shopify's current monolithic solution, offers a vast array of integrations, built-in features and allows merchants to launch in record breaking times. Hydrogen & Oxygen will allows merchants looking for more complex solutions the ultimate support and infrastructure to do so whilst supporting the existing storefront API. Complexities include: server-side rendering, caching, hooks, limitless control over templates and modules, tailwind css, advanced development environments, IOS and Android apps used to deliver an ultimate cross-channel shopping experience. We love the Hydrogen logo too! Is development process, shape and development environment for ecommerce, development teams and Shopify about to change? We are excited to be part and observe future of millions of ecommerce stories leveraging the hydrogen framework. Whether you choose headless or a theme based Shopify store, there are many benefits over other platforms.

If you are looking for a headless ecommerce store with Hydrogen and Oxygen, learn more about our headless services here.

Looking for a Headless Shopify Plus Ecommerce Agency & Shopify Hydrogen Expert??
We Design & Build Headless Shopify Ecommerce Websites with Shopify Hydrogen
We are an experienced Shopify Hydrogen Expert agency partnering with ambitious brands to design, develop & optimise outstanding Shopify & Shopify Plus websites. Our websites are solutions for your ecommerce growth. We help brands decide on the best approach, design and technology. Get in touch today!
Lightning fast
Unlimited complexity
Outstanding content management
Migration from other platforms
Conversion & Sales Focused Strategy
Expert Long Term Partner
Learn more about headless

Looking for a Shopify Plus Agency?
Upgrade or migrate to Shopify Plus with Charle, a leading Shopify Plus agency.
Upgrade to Shopify Plus with Charle
We are an accredited expert Shopify agency we partner with brands to design, develop, launch, support and grow Shopify & Shopify Plus stores. We are a Shopify agency, ready when you are. Talk to our team about your project.
Get In Touch
We’re an Award-Winning Shopify Partner & Ecommerce Web Design Agency In London & Manchester.
awardwinningecommerce awardwinningecommerce awardwinningecommerce
Stay Up To Date With Ecommerce
Join our newletter to receive free ecommerce guides, tips and tricks.
Charle Agency (Charle London Limited) | London Shopify Plus Agency | Copyright 2023 | Terms & Privacy