We’re often asked the question about when you need to evolve to Shopify Plus and then if a headless ecommerce solution is required. The short answer is that it depends at what scale you’re operating.

Headless ecommerce is an excellent solution for fast-growing and international brands who need the ability to quickly scale their business without being limited by traditional ecommerce platforms.

Shopify’s headless solution is called Oxygen + Hydrogen. In this article we explain exactly how they can help deliver a seamless ecommerce experience and whether you need to invest in headless.

What is Shopify Hydrogen & Oxygen

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 ecommerce stores on the Shopify Plus platform. 

Oxygen is the frontend development framework that powers the visual builder in Shopify. Hydrogen is the new headless commerce API that gives you the ability to manage all aspects of your ecommerce store through a single API.

By decoupling the front end from the back end in ecommerce – known as headless ecommerce – you improve speed, have more functional control, and get to choose what code is used. Hydrogen and Oxygen provide merchants with a toolkit to build headless ecommerce stores with a backend powered by  Shopify, and a frontend built using React.

What is Shopify Hydrogen?

Shopify Hydrogen is a React framework that gives developers the ability to create custom front-end experiences while accessing backend data such as customers, products and more. Currently, developers can build bespoke Shopify themes using the templating language called Liquid, however this does come with some limitations. React is a different coding language that is much more flexible and allows for building extremely customisable ecommerce experiences.

By using React or Shopify’s opinionated version, merchants can achieve lightning-fast frontend experiences for merchants. We have built React components for our client bundlee to enable speed in front-end components for the highly bespoke subscription service.

The benefits of using Shopify Hydrogen include:

• The ability to create truly bespoke frontend experiences
• Greater control over the code
• Improved performance due to React’s virtual DOM (Document Object Model) which only updates changed components rather than re-rendering the entire page

Shopify’s Hydrogen solution offers the ultimate developer tools, pre-built components to allow developers to build headless stores and access utilities that natively integrate with Shopify as the backend platform.

With Hydrogen, you have access to a library of pre-built components like a shopping cart, variant picker and content galleries. This can save you a lot of time and hassle when building your page from scratch. With Shopify Hydrogen, developers can focus on building technologies and styling outstanding UX. They can also create fast store experiences with support around traditionally difficult headless functionality. Additionally, they can leverage the Shopify storefront API to access product data and more.

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 is a server management tool that makes it easy to create and maintain a headless Shopify store without the need for a third-party hosting provider.

When is Shopify Hydrogen available?

Shopify Hydrogen is now available. Check back and we’ll update this page once Shopify’s Hydrogen is out of developer preview.

Key takeaways:

– Shopify’s headless ecommerce solution is called Oxygen + Hydrogen

– Hydrogen is a React framework that gives developers the ability to create custom front

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?

The cost of Shopify’s headless ecommerce solution is the same as their traditional platform. There are no additional costs for using Shopify Hydrogen & Oxygen.

Summary of Shopify Hydrogen & Oxygen

Headless ecommerce is very complicated, expensive to implement, and requires developers experienced in frameworks such as React to execute. The goal of Hydrogen is to make this process simpler. 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 allow 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.

If you are looking for a more sophisticated Shopify solution but not quite ready for headless, consider our Carbon theme.