Headless Shopify Hydrogen and Oxygen Pros and Cons from our experience

Mon, 01 Jul 2024

Embraced by the eCommerce industry, headless solutions offer unparalleled flexibility, exceptional performance, and a flawless customer journey. Shopify, as a leading eCommerce platform with 4.73 million live stores, has joined this trend with its headless solution - Hydrogen. In recent years, Shopify has been trying to move upmarket and focus more on enterprises, so launching its own headless solution was a strategic decision. Despite the flexibility of Shopify Plus, it still has limitations, whereas a headless approach offers more freedom.

Hydrogen assures to go from CLI to URL in minutes, instant feedback, smooth transitions, and rock-solid stability. At Eltrino, we don’t blindly trust marketing promises. Before recommending any new technology or solution to our clients, we test it on our own. Hydrogen had been on the market for a few years, but it seemed too raw to consider trying it out. However, in 2023, an article caught our attention designing and building a headless eCommerce page with AI and Shopify Hydrogen. So we decided that it’s time to give it a try and build a store from scratch using Hydrogen. We also have a real simple project for our client with Headless Shopify. So, based on our experience, and feedback from other agencies we would like to share our opinion on whether it is worth trying Hydrogen now and for which business requirements it will work best.

What is a Headless Solution?
Headless eCommerce Architecture
Benefits of Headless Solutions for eCommerce
Headless Solutions for Shopify
Examples of Headless Commerce Powered by Shopify
Shopify Hydrogen + Oxygen: What Shopify Promises
Our Experience with Shopify Hydrogen

What is a Headless Solution?

Headless eCommerce solutions decouple the front-end presentation layer from the back-end eCommerce functionalities. This separation allows for a more flexible and customizable development process.

Monolith eCommerce architecture vs Headless eCommerce architecture

The key distinction between monolithic and headless systems is that in headless architecture, the interaction between the backend and frontend is facilitated through APIs. This enables applications and services to communicate with each other, even if they use different frameworks. As a result, developers are freed from being tied to a single technology or programming language when creating applications. As a merchant, you have a wider range of systems to integrate with. This extends beyond just eCommerce; it’s easier to integrate with POS systems in offline stores. This makes it simpler to connect web stores, retail stores, mobile apps, and marketplaces into a single multichannel system.

Headless eCommerce store architecture provides the flexibility to switch your frontend or backend to a completely different technology, which is not possible with a monolithic architecture. With monolithic architecture, you cannot replace an old part of the system and must rebuild the whole system from scratch. Currently, this headless benefit is not available for a combination of Hydrogen and Shopify, as Hydrogen is only compatible with Shopify.

Headless eCommerce Architecture

Front-End:
- React/Vue/Angular App: The client-side application that users interact with.
- Next.js/Nuxt.js: Server-side rendering for better performance and SEO.
API Layer:
- GraphQL/REST API: For communication between the frontend and backend.
Back-End:
- Shopify Store: The core eCommerce platform handling products, orders, customers, and other eCommerce functionalities.
- Custom Server (Node.js, Python, etc.): Handles business logic, user authentication, and other custom operations.
Content Management:
- CMS (Sanity, Strapi, Contentful): Manages dynamic content like blog posts, landing pages, and other content.
Third-Party Services:
- Payment Gateways (Stripe, PayPal): For processing payments.
- Search & Discovery (Algolia, Elasticsearch): For advanced search capabilities.
- Analytics (Google Analytics, Segment): For tracking user behavior and performance metrics.
Hosting and Deployment:
- Hosting (Vercel, Netlify): For deploying the front-end application.
- Shopify Oxygen: For hosting the custom Shopify storefront.
Utilities:
- CI/CD Pipeline (GitHub Actions, CircleCI): For continuous integration and deployment.
- Monitoring (New Relic, Sentry): For monitoring the application performance and errors.

Benefits of Headless Solutions for eCommerce

But what benefits does this headless architecture bring to us?

Customization: Developers have the freedom to create unique user experiences without the constraints of a monolithic platform. In a headless eCommerce architecture, developers are not restricted by the pre-defined templates and structures of a monolithic platform. This freedom allows them to design and implement unique, custom user interfaces that perfectly align with a brand’s identity and customer needs. They can leverage modern front-end technologies like React, Vue, or Angular to create highly interactive and dynamic shopping experiences. This level of customization enables businesses to differentiate themselves in the market and provide a more engaging and personalized user experience. When it comes to Shopify, deep customization remains a challenge, even with Shopify Plus. Therefore, replacing the default frontend with a headless option provides greater flexibility to implement a user experience that is tailored to your target audience. This is especially important for enterprise-level companies.
Performance: Optimized for speed, headless architectures can efficiently handle large volumes of traffic. Headless architectures are optimized for speed. By leveraging technologies like Server-Side Rendering (SSR) and GraphQL, headless systems can deliver content quickly and efficiently, reducing page load times. It also enables better caching strategies and the ability to handle large volumes of traffic without slowing down, ensuring a smooth and fast user experience even during high-traffic periods. However, please note that not every headless solution is equally high-performing.
Scalability: Headless solutions can easily scale to accommodate growing business needs. Headless solutions are inherently designed to be scalable, allowing businesses to grow without being limited by their technology stack. Since the frontend and backend are decoupled, each can be scaled independently based on demand. This flexibility ensures that as a business expands, the eCommerce platform can effortlessly adapt to increased loads, new features, and additional integrations, supporting continuous growth and innovation.
Omnichannel Experience: Seamlessly integrate with various channels (web, mobile, IoT) to provide a consistent customer experience. A headless eCommerce architecture enables seamless integration with various channels such as web, mobile, and IoT devices, ensuring a consistent and unified customer experience across all touchpoints. By decoupling the frontend from the backend, businesses can use the same back-end services and APIs to power different frontend interfaces. This allows customers to interact with the brand through multiple channels—whether they are shopping on a website, a mobile app, or through smart devices—while enjoying a consistent, cohesive experience. This omnichannel capability is essential for meeting the expectations of today’s tech-savvy consumers who expect smooth and integrated interactions across all platforms.
SEO and UX: Improved page load times and enhanced user experiences can positively impact SEO rankings and customer retention. In a headless eCommerce architecture, improved page load times and enhanced user experiences directly contribute to better SEO rankings and increased customer retention. Faster loading pages reduce bounce rates and provide a smoother browsing experience, which search engines like Google prioritize in their ranking algorithms. Additionally, a headless setup allows for more dynamic and engaging user interfaces, personalized content, and seamless interactions, all of which enhance the overall user experience. These factors not only attract more visitors but also encourage them to stay longer and return more frequently, boosting both SEO performance and customer loyalty.

Headless Solutions for Shopify

Shopify can work with different headless solutions, each with its own set of pros and cons. Below, we briefly describe the available options:

1. Shopify Hydrogen

Pros:
- Highly customizable.
- High performance with Server-Side Rendering (SSR).
- Built on React, leveraging its flexibility and usability.
Cons:
- Still under development, with potential bugs and missing features.
- Requires third-party CMS integration.
- Limited support for Shopify apps, necessitating custom development.
- Users miss out on all the advantages of utilizing the incredibly user-friendly Shopify admin panel.
- eCommerce managers have to learn how to use a new admin panel.

2. React

Pros:
- Mature ecosystem with a vast community.
- High flexibility for creating custom front-ends.
- Strong support for third-party integrations.
- Outstanding web performance.
- Easy to find React developers.
Cons:
- Requires significant development effort.

3. Vue Storefront

Pros:
- Progressive Web App (PWA) capabilities.
- Strong community support.
- Plenty of features are already ready to use.
Cons:
- Integration challenges with Shopify.
- Documentation and support may be less comprehensive compared to React.
- Performance improvement requires a lot of effort.

Examples of Headless Commerce Powered by Shopify

Rothy’s

The new PWA was launched in 2018, resulting in faster site load times. The website passes the Core Web Vitals Assessment on desktop and mobile.

Allbirds

Allbirds, a start-up fashion and apparel brand, reached a billion-dollar valuation just two years after its founding. The website passes the Core Web Vitals Assessment on desktop and mobile. Allbirds has used the Shopify platform to operate their online store from the beginning. When their website traffic increased significantly, they needed to personalize the user experience without causing the site to slow down. Since they intended to stick with Shopify Plus, as the backend worked just perfectly, the solution was obvious - go headless. Their React-based frontend is performing well. The headless architecture also helps optimize the omnichannel experience, for example, enabling “buy in store, ship to customer” technology which increases conversions.

Mr Marvis

Mr Marvis, the largest Shopify store in the Netherlands. The website doesn’t pass the Core Web Vitals Assessment on mobile but does on desktop. The brand grows rapidly and in some moment their development team also met the performance limitation of the native Shopify Liquid theme (page load was about 5 seconds on high-speed internet connection). So, Mr. Marvis migrated from native Shopify to headless on Shopify Plus. The migration was completed in 2.5 months in collaboration with an internal team (2 engineers and CTO) and Ask Phil agency (2 engineers).

After migration to a custom (Next.js) developed headless solution page load improved to 2 seconds. Webshop works with Sanity CMS which gives a lot of freedom and allows to create an hierarchy of content. And saves a lot of time on content updates, for instance, now they have all translations in one place, while before, they had to log in to each Shopify store separately. Mr Marvis is a complex project with aspirations for personalization. “55 sub-systems have to interplay with each other to have a well-performing website. Enhancing user experience with the catalog involves not only standard sorting and filtering options but also personalized recommendations on the website. For example, based on the products a user already owns, we can suggest items that complement their outfits. This personalized approach goes beyond basic basket analysis as we curate complete outfits in our backend. If a customer owns a specific pair of trousers, we can recommend a matching top in the right colour, enhancing their shopping experience.” (Dick de Leeuw, eCommerce director MR MARVIS, interview)

Drake Related was built on Hydrogen, Shopify’s headless framework. The website is an artist’s representation of Drake’s famous house in Toronto, known as The Embassy. The website passes the Core Web Vitals Assesment on the mobile but on the desktop doesn’t. While the Drake Related website serves as the storefront, the team is not responsible for storing or shipping orders on behalf of the brands it collaborates with. Once an order is placed, it is automatically forwarded to the supplier brand for fulfillment and shipping to the customer. The stock availability on Drake Related’s website is updated automatically to reflect the inventory quantities in the partner brands’ back office.

Shopify Hydrogen + Oxygen: What Shopify Promises

Shopify Hydrogen, combined with Oxygen for hosting, aims to provide a robust headless solution. Hydrogen is a React-based framework designed specifically for building custom storefronts. Key promises include:

Customization: Complete control over code and architecture, enabling unique brand experiences.
Performance: Optimized for handling high traffic with SSR and GraphQL.
Usability: Leverages React’s ecosystem for easier development and personalization.
Integration: Seamless API connections with third-party services.

Our Experience with Shopify Hydrogen

Project from Scratch

To test out Hydrogen, we decided to build a store from scratch. To be able to compare development efforts, we created a very basic design (similar to the default design on Shopify). However, in the case of Hydrogen, you need to almost build it from the ground up on your own. It took a while and it was super basic design and functionality, which you get with default Shopify just out-of-the-box. For instance, we had to write filters and sorting for the category page from scratch, even though these are basic features of Shopify. Therefore, it didn’t make sense to create a custom Hydrogen theme for a simple web store. What is really noticeable is better web performance. Shopify has a good performance by default, but as you could notice from Shopify headless showcases, at some point when your business skyrocketed and you have a lot of users, a lot of integrations with third-party systems and personalization activity on your web store, default Shopify Liquid starts losing its capability. Then you need to go headless.

Default Shopify features vs Hydrogen

Feature	Shopify	Hydrogen
Account Page	+	+
Profile	+	+
Orders	+	+
Address	+	+
Home Page	+	+
PLP	+	+
PDP	+	+
Collections Page	+	+
Collection Page	+	+
Cart Page	+	+
Discount in cart	+	-
Checkout Page	+	+
Contact Page	+	+
Header Menu	+	+
Footer Menu	+	+
Product Variants	+	+
Filters	+	-
Sorting	+	-
Product Reviews	-	-
PDP Product Recommendations	-	-
Breadcrumbs	+	-
Wishlist Page	-	-
Compare Page	-	-
Favorites Page	-	-
Pagination	+	+/-
Localization	+	+
SEO	+	-

Shopify Hydrogen pros and cons

Hydrogen Advantages:

Customization: It offers a high degree of customization, allowing developers to build entirely unique front-end experiences tailored to specific brand requirements. Hydrogen is a framework, not a platform, so you have complete control over your code and architecture, enabling you to connect with third-party services via APIs. You can use Hydrogen to build whatever type of commerce experience you need, from simple storefronts to complex solutions.
Enhanced performance: Hydrogen is optimized for performance and is able to handle large volumes of traffic more efficiently than Liquid. Hydrogen offers high-performance SSR capabilities, load only the data that’s needed with GraphQL and optimistic UI. SSR is essential for improving page load times and SEO. When a user visits a Shopify Hydrogen-powered storefront, the server renders the initial HTML content, which is then sent to the user’s browser. This approach provides faster initial page loads, improving user experience and SEO results.
Remix Framework: Built on React, Shopify Hydrogen leverages React’s flexibility and usability.
Easier Personalization: A React-based storefront allows you to display dynamic content and tailor your consumers’ online shopping experience. You can use blocks to make product recommendations based on customer interactions, previous orders, or geography, for example.

Hydrogen Disadvantages:

Still in development: Hydrogen is still under development, so there may be some bugs or missing features.
Content Management: Unlike traditional Shopify themes, Hydrogen does not include a built-in content management system (CMS), so handling content can be more challenging. But you can use third-party content CMS, such as Sanity or Strapi.
Limited App Support: While Shopify has a robust app ecosystem, headless setups may have limited support for certain apps, requiring custom development. A collection of apps that extend the capabilities of your Hydrogen build: Apps that extend your Hydrogen build on Shopify App Store.
Higher Costs: While Hydrogen is free, it requires hosting. Development costs are much higher than for default Shopify as pages implemented in hydrogen-default-store have minimal functionality.

Using the ready Hydrogen theme (OWEN Theme)

Developing a new Hydrogen theme isn’t a piece of cake. What if we use a pre-made Hydrogen theme and customize it to the client’s needs? This way, we can achieve high performance and other headless benefits without spending too much time on development. We recently received a client request for a simple store on Shopify. After considering our options, we decided to implement this project using the OWEN theme for Hydrogen. This approach allowed for a quicker start and a more structured development process.

We didn’t change a lot in design, trying to keep it tight to the theme. The only challenge we had was setting 2 different domains with 2 different languages, payment and shipping options but to keep them using one Shopify instance.

You can use Sanity CMS with this theme and there is a very important feature for performance - Scroll to load. It makes a real difference and we tested on our own. What it does is delays block content loading till the moment the user starts scrolling. It’s a very simple and handy way how to manage loading priority.

As a result, site visitors get a good experience as they immediately see the content and can interact with it. And it has a crucial impact on Core Web Vitals scores.

Owen Hydrogen Template costs $299.00, it includes free installation but you have to be tech-savvy to set up the environment. There is a free Sanity plan that is enough for a start-up.

This ready Hydrogen Theme can be an option if you want to try the Headless Shopify solution on a simple project. Since this project didn’t have any complex integrations, we can’t judge whether this theme is good enough for a complex project.

Feedback from Other Agencies

We also reviewed feedback from other agencies that have experience with headless Shopify projects. Here are some valuable insights about Hydrogen from Ask Phill and Vervant:

Customization and Performance: Agencies appreciated the high customization and performance capabilities.
Development Effort: There were concerns about the development effort required due to the evolving nature of Hydrogen.
Integration Challenges: Some agencies have noted challenges in integrating Hydrogen with Shopify’s ecosystem and third-party apps.

Technical Details: Hydrogen 1 vs. Hydrogen 2

We didn’t work with Hydrogen 1 but other agencies say that there is a significant difference and most of the challenges were solved in Hydrogen 2.

Hydrogen 1:

Initial release focused on providing basic headless capabilities.
Included essential features like SSR, GraphQL integration, and customizable components.
Limited in terms of app integrations and CMS options.

Hydrogen 2:

Enhanced with more robust features and better stability.
Improved documentation and support.
Expanded capabilities for app integrations and third-party services.
Enhanced performance optimizations and new features for SEO.

Hydrogen vs Shopify performance comparison

To test performance, we used a store with a custom-developed Hydrogen Theme (H2-store) and the same store with a Shopify frontend (Shopify). Total amount of products - 1774. As you may have noticed, the catalog page on Hydrogen Theme loads a bit faster. But both web stores show excellent performance. Hydrogen Theme (H2-store)

Shopify frontend (Shopify) Webpagetest Filmstrip comparison

Suitable Use Cases for Hydrogen (when to consider Shopify Hydrogen)

Hydrogen is most suitable for businesses with specific requirements:

High Customization Needs: Brands requiring unique, highly customized storefronts.
High Traffic: Businesses expecting large volumes of traffic needing optimized performance.
Complex Integrations: Companies looking to integrate with various third-party services and APIs.
Advanced SEO and UX: Stores focused on improving SEO and user experience through faster page loads and dynamic content.

For businesses with simpler needs or smaller budgets, a headless solution built on React might be more appropriate. React provides a mature ecosystem with extensive community support and easier integration with existing Shopify functionalities.

When should you go headless and when you shouldn’t

“Don’t go headless if you don’t have an internal development team. It’s because you need to maintain the whole stack. It’s kinda you switch from a normal car to a Formula 1 car. You’ll need to do much more complex maintenance.” eCommerce director Mr. Marvis (a brand that has moved from native Shopify to headless on Shopify Plus).

FAQ: Common Questions about Shopify Hydrogen

Q1: What is Shopify Hydrogen?

A1: Shopify Hydrogen is a React-based framework for building custom, headless eCommerce storefronts.

Q2: What are the benefits of using Hydrogen?

A2: Key benefits include high customization, performance optimization, and flexibility for creating unique user experiences.

Q3: What are the costs associated with Hydrogen?

A3: While Hydrogen itself is free, it requires Shopify Plus for free hosting, which can be expensive for smaller businesses.

Q4: Can I use Shopify apps with Hydrogen?

A4: Hydrogen has limited support for Shopify apps, often requiring custom development for integration.

Q5: Is Hydrogen suitable for all businesses?

A5: Hydrogen is best suited for businesses needing high customization, handling large traffic volumes, and requiring complex integrations. Simpler projects might benefit more from traditional Shopify setups or React-based solutions.

In conclusion, Shopify Hydrogen and Oxygen offer a promising headless solution with significant benefits and some current limitations. At Eltrino, our experiences with Hydrogen have been largely positive, particularly for projects needing high customization and performance. However, it’s essential to weigh the pros and cons based on your specific business requirements before diving in.