Shopify Hydrogen & Oxygen Guide from Shopify Hydrogen Experts

Last updated: October 7, 2024

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 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 is built on Remix 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. All of the Shopify plans allow merchants to host 1 headless storefront.

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 a Shopify plan 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?

Building an ecommerce store using a headless approach is highly complex and Shopify Hydrogen aims to deliver an opinionated framework that does a lot of the heavy lifting for developers. Key areas and API connections are ready and built.

Hydrogen allows developers to package different types of requests to different types of routes making it easier to create custom server-side logic for your headless store and manage requests in an efficient way. Shopify Hydrogen supports GraphQL which is a powerful coding language that allows you to retrieve specific parts of data that you need from Shopify reducing the amount of data transferred between your store and Shopify. Other features and components of Shopify Hydrogen include:

Hydrogen Templates

Shopify has built two pre-built hydrogen store templates that developers can use as a base frame with all the major ecommerce functionality that you would expect such as basket, product tiles, add to cart and more. This allows developers to focus their time on building unique elements, functionality and integrations with the standard ecommerce functions pre-built.

Shopify Hydrogen Components

Shopify Hydrogen also comes equipped with a UI kit so time is not wasted on fundamental features of your store. Pre-built components include customer accounts, site search, add to cart, cart pages and more. Developers can of course still choose to build this from scratch or leverage the prebuilt components in the build. Developers have full access to the code of these components meaning they can modify them to meet specific design needs.

SEO Basics with Hydrogen

The positive SEO impact of a headless ecommerce store can be a great reason to opt for this approach. Headless ecommerce stores are typically much faster due to the way that they are built. Shopify Hydrogen comes equipped with pre-built SEO requirements such as a sitemap, meta data values and a robot.txt file. It is important that developers leverage SEO best practices as they work through the project.

Shopify Hyrdogen Storefront API

A headless store has to connect to Shopify via their APIs. Shopify Hydrogen has these API connections built out already and manages things like authentification and security. This means the developer can spend their time building custom integrations rather than building the groundwork.

Shopify Hydrogen Performance

Shopify Hydrogen has several performance features included out of the box including caching strategies, server-side render and powerful fast hosting with Oxygen. This all comes together to deliver the fastest possible onsite experience.

Features of Shopify Oxygen

Shopify's Oxygen hosting solution includes with brilliant and important features including server performance insights, analytics and developer logs for 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.

Expensive

Managing, building and integrating a headless ecommerce store comes with significant costs. Firstly, the skillset to hire headless specialists is more expensive but also the workload is bigger as standard integrations require development resource. You'll need to have developers on-hand for continued maintenance as APIs change and you'll need to manually integrate third party providers.

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?

To get started with a headless store you'll need headless ecommerce experts who are experienced in both headless architecture and Shopify's backend APIs. Headless architecture is highly complex and is not for beginners. Reach out to an agency like us, to discuss your requirements for the project. If you are a developer then checkout Shopify's Github and documentation too.

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

Let’s talk ecommerce, Shopify & Shopify Plus solutions.

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