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.
Table of contents
- Shopify Hydrogen: A powerful framework for custom storefronts
- Shopify Oxygen: Server-side rendering for better performance and scalability
- Advantages and disadvantages of Shopify Oxygen
- The perfect symbiosis: Hydrogen, Oxygen and Headless Commerce combined
- Here's how dealers benefit from using hydrogen
- Case study Horando: Headless CMS with Storyblok
- Conclusion: Headless Ecommerce with Shopify
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.
Advantages and disadvantages of Shopify Hydrogen
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
Hydrogen is specifically tailored to the Shopify API. Its components are tightly coupled with various parts of the Shopify API. This ensures seamless integration and smooth functionality. Hydrogen is designed exclusively for Shopify storefront development and does not support other custom storefronts like mobile apps.
Linking to an incompatible CMS or app may require a custom solution by a development team.
The Hydrogen framework requires deeper technical knowledge and development work. All aspects, from creation to maintenance, need to be handled by your development team or an experienced Shopify agency. People without technical expertise cannot manage the frontend on their own.
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.
Advantages and disadvantages of Shopify Oxygen
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.
Using Shopify Oxygen requires solid development skills
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.
Here's how dealers benefit from using hydrogen
Shopify Hydrogen leverages frameworks and UI components for accelerated front-end development. Third-party software integration is simplified, eliminating costly and complex processes. Shopify Hydrogen enables best headless commerce without lengthy development.
Superior website performance
Shopify Hydrogen's headless approach enables best-in-class website speed and performance. The separation of the front-end and back-end allows for lightning-fast page load speeds and dynamic content on the back-end. Moving to Shopify Hydrogen reduces page load times from seconds to milliseconds, optimizes core web vitals, and ensures a satisfying user experience.
Shopify Hydrogen solves the dilemma between speed and scalability with Shopify Oxygen - the global hosting solution. Oxygen offers over 100 server locations worldwide for instant loading regardless of customer location. The new infrastructure addresses speed and scalability issues and enables fast communication between storefront content and commerce structures.
Maximum design freedom
The headless approach opens up a wide range of design possibilities for a unique UX/UI. Specialized tools make it easy to create and customize storefronts, without programming knowledge. Communication between front-end and back-end via API enables flexible front-end design without compromising back-end functionality.
Excellent commerce experience
Shopify Hydrogen provides easily accessible, personalized marketing. The combination of Hydrogen and Oxygen enables full control over storefront design and content management for an outstanding shopping experience. Millisecond page load speed and stability are guaranteed.
Overall, Shopify Hydrogen offers a significant boost in site performance, design freedom and ease of use, optimal scalability, and a world-class commerce experience. This solution is suitable for merchants looking for a fast, flexible and efficient way to implement headless commerce.
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.
For better maintenance of 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 linked to almost anything thanks to its headless approach. For Horando, we were thus able to implement a multilingual store, which we connected on the backend side with the existing Shopify store.
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.