Headless e-commerce with Shopify: More flexibility and adaptability thanks to Hydrogen and Oxygen

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.

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

The advantages:

• 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

The disadvantages:

• 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 Hydrogen Theme: These templates are offered by Shopify

Shopify Hydrogen offers two powerful templates to help merchants and developers create a stunning storefront:

• Hello World: Hello World is a minimalist template that serves as a starting point for developers to create the storefront from scratch.

• Demo Store: Demo Store is the default template for a new Hydrogen storefront installation, using live product data from Shopify. With this template, merchants and developers can use a working code base as a starting point for their own use.

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

The advantages:

• 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

• Free use

The disadvantages:

• 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.

Here's how dealers benefit from using hydrogen

Rapid development

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.

Improved Scalability

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.

Shopify Hydrogen example: Headless commerce with Shopify

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.

Hunter und stylecats®

Both Hunter and stylecats® have successfully migrated their stores from Shopware to Shopify Plus. In both cases, headless commerce with Shopify Hydrogen was used, whereby two storefronts were realized via a common Shopify backend.

This concept also has advantages for customers, as both stores use a shared login. Customers can easily switch between the stores and use the shared shopping cart. In addition, both stores are connected to the headless CMS Storyblok.

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.