Today’s eCommerce consumers are no longer confined to a single channel or device for their shopping needs. They have a ton of options, including mobile apps and social media platforms. As a result, businesses are striving to establish a robust multi-channel presence to swiftly engage with their customers. One highly effective approach to achieving this goal is through the implementation of Headless Commerce. 

In recent years, investors have shown a significant interest in Headless Commerce platforms and associated solutions, recognizing their pivotal role in shaping the future of online commerce.

Forbes reports that between 2020 and 2021 alone, more than $1.65 billion in funding was directed toward Headless technologies. In response to this evolving landscape, Shopify unveiled the Hydrogen solution in June 2021, designed to facilitate the development of headless Commerce storefronts. 

The following article aims to provide a comprehensive understanding of Shopify Hydrogen, shedding light on both its pros and cons. 

Overview

Shopify offers businesses the Hydrogen framework solution, originally based on React but now being developed with Remix, in conjunction with the global hosting solution known as Oxygen.

What is Shopify Hydrogen?

In the past, Shopify website developers utilized the platform’s templating language known as Liquid, which often faced performance limitations. Consequently, to ensure top-notch website performance for headless commerce, Shopify businesses require a specialized solution.

Typically, businesses implementing headless projects on Shopify Plus opt for the React framework over Liquid due to its superior technical aspects. Moreover, headless stores on Shopify Plus offer heightened flexibility, customization, and scalability compared to standard headless stores on Shopify.

Therefore, Shopify has introduced a solution that allows both Shopify Plus and standard Shopify businesses to build and advance the most optimized headless eCommerce websites possible. This led to the creation of the Hydrogen framework solution and Oxygen hosting.

Shopify Hydrogen is a React-based framework that empowers developers to craft distinctive and entirely customized frontend Shopify experiences. This framework encompasses all the essential structures, components, and pre-built tools necessary for developers to swiftly create headless stores and deliver personalized user experiences.

What is Shopify Oxygen?

Shopify Oxygen is a worldwide hosting solution designed to store custom content, like Hydrogen stores, directly within the Shopify platform. Previously, Shopify businesses seeking to develop Headless Commerce had to depend on third-party hosting providers (e.g., Netlify).

In contrast, Oxygen is supported by Shopify’s extensive global infrastructure, featuring over 100 server locations worldwide. Thanks to this, Hydrogen stores can seamlessly and directly integrate with Oxygen hosting through the Storefront API, eliminating the need for reliance on third-party providers.

Remix – The New Highlight of Shopify Hydrogen

In the first quarter of 2023, Shopify unveiled Hydrogen v2, highlighting the web development tool called Remix. This tool has earned recognition from developers as one of the top React frameworks, trailing only behind Next.js. Consequently, Shopify acquired Remix and designated it as the cornerstone of the Shopify Hydrogen solution.

The reason for this lies in the fact that Hydrogen v1 faced performance-related criticisms after some time in operation. The acquisition of Remix is a part of Shopify’s efforts to rectify these issues, leading to the emergence of Hydrogen v2.

While developers tend to favor Next.js over Remix due to its open structure, allowing for greater customization and offering a more favorable developer experience, it doesn’t guarantee output quality and website performance.

Conversely, Remix employs a closed structure that mandates developers to adhere to the framework’s template. This approach closely aligns with Shopify’s SaaS model, providing a web development framework and enforcing developers to follow specific principles during deployment. 

This adherence ensures website performance and significantly enhances conversion rates. Therefore, Remix is the ideal solution chosen by Shopify to address the existing performance gaps in Hydrogen stores and enhance the eCommerce experience for customers.

Pros of Shopify Hydrogen

Developed based on React

Hydrogen represents Shopify’s investment in the development of Headless eCommerce. Therefore, it’s fair to classify any Shopify store using the Hydrogen framework and Oxygen hosting as a Headless Shopify store.

The Headless architecture has consistently garnered praise from industry experts, who anticipate its continuous evolution. Shopify’s decision to incorporate React – the JavaScript library for frontend interface development – as the cornerstone of the Hydrogen solution underscores this platform’s forward-looking perspective on the future of eCommerce, firmly rooted in the Headless trend.

Diverse Integration

The launch of Shopify Hydrogen aims to assist businesses in building professional Headless eCommerce websites and providing customers with a seamless multi-channel experience.

Therefore, Shopify extends the capability to seamlessly integrate Hydrogen stores with various third-party applications and platforms like Klaviyo, Gorgias, and Rebuy (to enhance the customer experience), as well as Sanity, Contentful, and Builder.io (for Headless CMS implementation). 

Learn more about Headless CMS:

• What is Headless CMS?
• 10 Enterprise Headless CMS Platforms (Pt.1)
• 10 Enterprise Headless CMS Platforms (Pt.2)

Flexible Customization 

Numerous enterprises choose to implement Headless eCommerce because it grants them full control over the development of the frontend interface, free from the limitations of specific platforms. Shopify Hydrogen also empowers businesses to construct entirely personalized headless website interfaces and integrate essential features for expansion.

Cons of Shopify Hydrogen

Technical Skill Required 

Hydrogen solution empowers businesses to leverage the potential of Headless eCommerce, but it’s predominantly a technically-driven endeavor without a user-friendly drag-and-drop interface for non-technical users to easily access and modify.

Hence, the development process necessitates the engagement of highly proficient developers with programming expertise and a specific comprehension of Hydrogen and Oxygen. In this scenario, businesses have two choices: establish an in-house team of developers or partner with an external specialized entity for swift deployment.

Limited CMS Integration.

Because it relies on the React framework, Hydrogen can assist developers in creating custom frontends, but the backend CMS functionality must be connected to enable the headless eCommerce website’s operation.

However, as of now, Hydrogen is limited to integrating with specific CMS platforms like Sanity, Contentful, and Builder.io, leaving businesses responsible for connecting with others independently.

Limited 3rd-party Integration

Much like CMS platforms, Hydrogen supports businesses in integrating with third-party provider applications, but it has rather limited options. Currently, there are only 13 available applications that businesses can incorporate into their Hydrogen store.

In the many years of implementing Headless eCommerce for numerous clients across various countries, SECOMM has noticed an increasing demand for creating Headless websites using the Shopify platform. Now, businesses have a choice: they can either leverage Shopify’s tech stack (Hydrogen and Oxygen) or build a custom stack tailored to their unique requirements.

This further solidifies Shopify as one of the most flexible eCommerce platforms today, leading the way towards the next generation of eCommerce experiences.

Contact us or call SECOMM’s hotline (02871089908) for a free consultation.