To meet customer demands and remain competitive, it is essential for online retailers to provide a flexible and personalized online store. Customers today want fast loading times, responsive and intuitive design, and a personalized shopping experience.
Shopify has responded to these needs by launching Hydrogen and Oxygen, two technologies that enable developers on the Shopify platform to create innovative and user-friendly online stores. Both solutions are available for Shopify Basic, Shopify, Shopify Advanced and Shopify Plus plans.
While Hydrogen as a frontend framework simplifies headless store programming by offering numerous predefined functions, Oxygen acts as an associated server on which the headless frontend is hosted and operated.
In this blog post, we will look at these two solutions, explain their benefits and features, and show a case study of how to implement Hydrogen in practice with Horando.
Do you want to customize your Shopify storefront and make it powerful? As Shopify experts, we're here to help. Contact us.
Shopify Hydrogen: A powerful framework for custom storefronts
Shopify Hydrogen is a React-based frontend framework for building custom and scalable online stores on the Shopify platform. It allows developers to create custom storefronts with a flexible and modular architecture.
The framework offers a collection of predefined components designed specifically for e-commerce applications. These components facilitate the development process while ensuring clean and well-organized code.
In addition, Shopify Hydrogen promotes the use of modern web standards and technologies such as Progressive Web Apps (PWA), resulting in faster load times and better user experiences. It is also completely decoupled from the previous Shopify Liquid programming language. Therefore, it is recommended to use a dedicated CMS system (e.g. Storyblok) so that the marketing team can easily post and maintain content.
The advantages of Shopify Hydrogen at a glance:
Creation of individual storefronts that stand out from the crowd
Increase development speed and quality with predefined components
Leverage cutting-edge web technologies and standards to deliver optimal user experiences
Operating multiple, parallel storefronts for different brands, but only one backend for all customer data
Use of a variety of Shopify apps that are already integrated with Hydrogen ready to go
Shopify Oxygen: Server-side rendering for better performance and scalability
Shopify Oxygen is the associated server renderer for Hydrogen-based applications. It is a rendering infrastructure designed specifically for Shopify. This reduces time-to-first-byte (TTFB) and improves website load time, which can lead to higher conversion rates.
To optimize online store performance and scalability, Shopify Oxygen ensures that storefronts created by Hydrogen are optimally aligned with Shopify's backend infrastructure.
Although using Oxygen is not mandatory, there are no reasons not to use the service for free. Otherwise, you would have to look for an external hoster and incur additional costs.
The advantages of Shopify Oxygen at a glance:
Faster loading times due to server-side rendering
URL structure can be implemented individually and multilingually
thus positive effects on SEO
Server scaling, which makes it possible to remain efficient even when traffic increases
Seamless integration with Hydrogen and Shopify's backend infrastructure
Reading tip: Why website speed is important and how to optimize it, read this post.
The perfect symbiosis: Hydrogen, Oxygen and Headless Commerce combined
Shopify Hydrogen and Oxygen are directly related to the headless commerce concept, as they promote the decoupling of frontend and backend. As mentioned at the beginning, Hydrogen supports the creation of custom storefronts and user experiences independent of Shopify's backend infrastructure. Whereas Oxygen provides seamless integration between custom storefronts and Shopify backend infrastructure.
By implementing headless commerce with Shopify Hydrogen and Oxygen, there are many benefits for Shopify online merchants:
Creating personalized user experiences tailored to specific audiences or market needs. By creating custom storefronts, merchants can respond to any circumstance and implement the best shopping experience.
More flexibility by integrating new technologies and frameworks into projects without being limited to a specific platform. Decoupling makes it possible and gives retailers the scope to test new tools to better respond to customer needs.
Improved performance and load times even with increasing traffic thanks to the use of server-side rendering and modern web technologies.
These advantages, along with the fact that the powerful features and backend integrations of the Shopify platform can be used at the same time, make Hydrogen and Oxygen perfect solutions when implementing the headless commerce approach.
While headless can be implemented with other solutions and completely custom programming is also conceivable, we recommend using Hydrogen and Oxygen. With this variant, everything necessary is already integrated and there are also a large number of apps that are designed for this headless approach (e.g. Nosto). This saves time and allows traders a faster time-to-market.
Reading tip: Learn more about the customer experience tools Nosto & trbo and find out which one suits your Shopify store best.
Case study Horando: Headless CMS with Storyblok
For our client Horando, one of the leading online stores for luxury watches, we implemented a headless commerce solution with Hydrogen. This allowed us to create a personalized and appealing storefront, perfectly aligned with Horando's brand identity.
To better maintain the existing content, the Storyblok content management system (CMS) was used here. This gives editors the ability to edit content intuitively and with the help of a visual editor. The CMS offers complete flexibility and can be connected to almost anything thanks to its headless approach. For Horando, we were able to implement a multilingual store, which we connected to the existing Shopify store on the backend side.
Reading tip: What a headless CMS is, what advantages it offers and how you can connect it to Shopify, read this blog post.
Conclusion: Headless Ecommerce with Shopify
The decoupling of the storefront from the backend offers online retailers great potential to adapt their own brand even better to the needs of customers and current market requirements. Thanks to Shopify Hydrogen and Oxygen, merchants get a powerful set of tools to create flexible, customized and scalable online stores on the Shopify platform. This not only improves user experience and thus conversion, but also optimizes store performance.
If you also need a headless commerce solution for your Shopify stores, we will be happy to advise you on the respective options and implement the right solution for you. Contact us without obligation.
Frequently Asked Questions about Shopify Hydrogen and Oxygen
What is Shopify Hydrogen and Oxygen?
Shopify Hydrogen is a front-end framework based on React that allows developers to create custom, headless e-commerce stores. Shopify Oxygen, on the other hand, is a server designed to host and operate these headless frontends. Together, they provide an integrated solution for creating and managing online stores.
How much do Shopify Hydrogen and Oxygen cost?
Shopify Hydrogen and Oxygen are free extensions to the Shopify platform. There are no additional costs for using these technologies, only the usual Shopify fees for running your online store apply. Additional costs may apply for hiring an agency to help you with the implementation.
Can you implement headless commerce with Shopify?
Yes, with Shopify you can implement the headless commerce approach. By using technologies like Shopify Hydrogen for the frontend and Shopify Oxygen for server-side rendering, you can create a decoupled, flexible, and highly customizable e-commerce solution. Headless frontends, checkouts, and headless CMS are entirely implementable for your Shopify store.