Hydrogen and Oxygen: Shopify's headless commerce

More and more e-commerce technology providers are offering Frontend-as-a-Service hosting and infrastructure solutions to enable the scalable operation of e-commerce applications. In 2021, Shopify announced its investment in headless commerce (i.e. an e-commerce architecture that separates backend from frontend) with Hydrogen and Oxygen, now officially operational. With the possibility of creating a very customised or unique online experience, these solutions are bound to become very popular for big brands and ecommerce managers. In this article, we explain what they are and when they should be used.

 

Hydrogen

Announced at Shopify Unite 2021, Hydrogen is a React-based framework that allows you to quickly create custom shopfronts with more customisation options without impacting site performance.

Why is this helpful? In the past, with Shopify the developer had to compromise between a fast website and a beautiful design. With Hydrogen, several technologies are brought together to achieve exceptional performance and a dynamic user experience. In particular, the most help is seen in the following areas:

1. Theme limitations: often even if the theme itself performs well, as soon as you add third-party libraries, apps or data-rich content they will greatly enhance your Shopify shop and negatively affect the performance of your site.
2. Design freedom: the theme developer always operates within certain limits, but on Hydrogen the design possibilities are virtually endless. Furthermore, as it is a React-based framework, there are many more developers than there are Shopify developers, allowing you to augment your team with highly qualified people.
3. Cost and speed of development: creating a custom shopfront using Shopify's API took a lot of time and presented technical challenges that made it very expensive as a result. Now Hydrogen mitigates some of these problems by speeding up the development process and making it less expensive and more accessible. 

Hydrogen's advantages:

• Starter templates: development teams have access to a starter kit that also includes a ready-made demo shop, speeding up development time.
• Pre-built components: Hydrogen has pre-built components that allow developers to work with the API. The framework also allows components to be reused throughout the website, as it has a default tail wind.
• Server Side Rendering (SSR): website are incrementally loaded based on the user's priority and navigation, rather than loading the entire page at once, greatly improving the speed of the site. 
• SEO: Hydrogen includes ready-made SEO optimisations such as an automatically generated sitemap, metadata for each page and a customisable robots.txt file.

Hydrogen's disadvantages:

• Developed for the Shopify API: Hydrogen was only developed for the Shopify API. Therefore, its components are strongly tied to individual parts of the Shopify API. Furthermore, Hydrogen can only be used to create Shopify storefronts and does not support other customised storefronts such as mobile apps.
  Developer-centric workflow: the Hydrogen framework is very code-centric, which means that everything has to be developed and maintained by the development team or a company specializing in Shopify. Non-development teams will not be able to manage the front-end of the website. Alternatively, you can work with a company specialized in Shopify such as DevInterface: our team is available to help you find the best solution .
  App integrations: Although Shopify has several popular apps ready for easy integration with the Hydrogen framework and offers different preferred CMSs, if you want a CMS or app that is not compatible you'll have to link it yourself through middleware.

Oxygen

Oxygen is a native hosting solution integrated into Shopify that allows you to host Hydrogen shops directly on Shopify Plus, thus no longer requiring third-party platforms to host frameworks. You can seamlessly integrate with the Shopify API and deploy several Hydrogen storefronts for previewing, sharing, testing and experimenting.

Oxygen is also designed to handle large amounts of simultaneous traffic during big sales like Black Friday without crashing and to be deployed globally.

 

With the launch of Hydrogen & Oxygen last June 2022, Shopify opened up Headless Commerce to a wider range of merchants, not just those with high sales and a large customer base. For brands, Headless and Hydrogen means new opportunities to respond faster and adapt to changing needs to increase conversion rates. For customers, faster and richer experiences in their favourite online shops become the norm.
 

What do you think of Hydrogen, have you already had a chance to test it? Let us know in the comments!