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.

SEO optimization for hydrogen-based storefronts

SEO optimization for Hydrogen-based storefronts differs in some aspects from SEO optimization for traditional Shopify stores. Hydrogen is a React-based framework from Shopify that is specifically designed to create customized, headless e-commerce experiences. This comes with both benefits and specific challenges. Here are the key features:

Server-Side Rendering (SSR) and SEO

Hydrogen uses server-side rendering (SSR), which generates page content as the page loads. This improves speed and ensures that content can be better crawled and indexed by search engines. With SSR, the implementation of SEO-relevant content (e.g. meta tags, structured data) in the server rendering process is important right from the start.

SEO-friendly URLs and routing

Hydrogen allows complete control over URLs and routing, which can lead to more SEO-friendly structures. In contrast to standard stores, where URLs are controlled by the Shopify backend, URL structures in Hydrogen must be maintained and optimized manually.

Performance optimization

Hydrogen allows very fine-grained control over performance, which is a great advantage for Core Web Vitals. However, good performance requires careful implementation. Aspects such as the lazy loading of images and the optimization of scripts must be closely monitored in order to keep loading times low.

Content management

As Hydrogen does not offer traditional CMS functionality like standard stores, content management must be done externally or via headless CMS solutions. It requires a good integration of the headless CMS with SEO aspects such as meta data management and content structures.

Crawling and indexing

Since Hydrogen stores are not located directly on the Shopify servers, but on external servers (e.g. Oxygen), crawler access must be well configured. The implementation of Robots.txt, sitemaps and other indexing controls must be done manually.

Structured data

With Hydrogen, structured data can be precisely tailored to the specific content. Schema markup is implemented directly in the code and therefore requires a deep understanding of the relevant SEO best practices.

Integration of SEO tools

Tools and plugins that can be easily installed in standard stores (such as Yoast or Ahrefs plugins) cannot be used directly with Hydrogen. SEO analyses and monitoring must be carried out using your own implementations or external services (via API integrations).

Client-side rendering (CSR) and SEO

Parts of the page that are rendered client-side (CSR) could cause SEO issues as search engine crawlers have problems rendering JavaScript. It is crucial to find the right mix of SSR and CSR and ensure that important SEO content is rendered server-side.

Managing meta tags

Meta tag management is fully customizable, allowing precise control over titles, descriptions and keywords. This flexibility requires manual configuration, which is technically more demanding than in standard stores, where these tags are often generated automatically.

Analytics and tracking

Tracking and analytics tools (such as Google Analytics) must be carefully integrated, as Hydrogen uses a completely customized code base. Tags and scripts need to be set up manually, often via Google Tag Manager, but clean integration is essential for SEO and performance.

Hydrogen-based storefronts therefore offer more flexibility and control over SEO aspects, but require a more precise and technically demanding implementation. The main difference lies in the way content is rendered, URLs are structured and performance optimizations are made.

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.

Shopify news updates at a glance

Shopify is constantly working on further development and optimization - including Hydrogen and Oxygen.

Shopify recently expanded the features and functions of Hydrogen. The new version allows you to define individual development, preview and debugging environments for each of your stores using .env files. You can seamlessly switch between these environments at any time.

The Hydrogen update extends this functionality with additional features, such as optimized currency formatting, the elimination of problems in the Google web cache and a new function that simplifies the creation of contexts.

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.