Composable commerce is an umbrella term for flexible and modular ecommerce architecture in which each component can be easily integrated or swapped out as needed to adapt to changing needs of modern business.
Historically, building an ecommerce store required hiring developers with specific skill sets to build out and maintain the stack. At the same time, expert developers specializing in specific legacy ecommerce platforms (Magento, Salesforce) have been scarce and expensive. Moreover, monolithic architecture also limited flexibility, performance, agility, and developer freedom. As a result, to achieve their creative vision, developers needed to compromise between various technologies.
Many modern brands can no longer afford such limitations. Instead, dynamic, customer-facing ecommerce brands want to build custom storefronts that bend to their unique brand vision. They want rich merchandising and personalization capabilities, sub-second page loads, and complete design flexibility.
Running a Shopify store headlessly solves many of these problems, as there's no UX or speed tradeoff.
Shopify is one of the world’s leading e-commerce platforms. It has always been known for a robust set of features, themes, and apps – but had certain limitations regarding frontend design.
With the addition of headless capabilities and Hydrogen, Shopify has finally hitched its wagon to the headless commerce train, offering its customers the ability to expand outside of what its traditional front end has been capable of.
By being API-first, Shopify and Hydrogen fit into the paradigm of modular architecture. As a result, the combo is ideal for building speedy, composable, and future-proof commerce stacks. By leveraging APIs, businesses can quickly build and deploy new commerce experiences that meet their customers' unique needs and expectations.
What is Hydrogen?
Hydrogen is Shopify’s React-based framework that helps developers build custom storefronts faster. It was developed as the essential toolkit for building next-generation headless Shopify stores. The goal was to give developers a powerful foundation that reaps the benefits of edge computing while still promoting the web platform and server/client setup.
With Hydrogen, developers can concentrate on adding new capabilities instead of troubleshooting issues. Making full use of Shopify's global reach, shopper networks and interface with other applications, Hydrogen enables the construction of dynamic, personalized, and highly functional storefronts for Shopify.
Below are some key things helping to understand the benefits and opportunities of running a headless Shopify store with Hydrogen.
Hydrogen and Remix: a match made in heaven?
With Remix, you can build slick, resilient user interfaces with a full-stack web framework. Because Shopify and Remix have many shared philosophies and design principles, Shopify’s acquisition of Remix was part of their ambitious goal to push the web forward and enable developers to focus better on unique business needs.
The Remix-ified Hydrogen version was released in February 2023, bringing significant advancements in developer experience and performance, as well as a suite of new tools specific to Shopify storefronts. The core changes include areas such as data loading, routing, error handling, and mutations.
With the Remix team working at Shopify, developers building on Shopify will benefit from new tools that make their work easier. Merchants, on the other hand, will see custom storefronts that are faster than ever with an improved Hydrogen product. The partnership with Shopify gives the Remix open-source community a strong sponsor and supporter they can trust to enable the framework to accelerate its roadmap, with the knowledge that they can bet on the framework for the long run.
Overall, Shopify and Hydrogen give you powerful tools for building a composable commerce stack. By leveraging Shopify’s APIs, businesses can create innovative commerce experiences that drive customer engagement and loyalty.
The technologies developers know and love
Composable commerce encourages innovation by allowing businesses to experiment with new technologies and services. By leveraging a composable architecture, businesses can quickly integrate and test new solutions with minimal risk.
Moving to the Hydrogen framework means leaving Liquid behind in favor of the open-source JavaScript framework, React.js. This means that brands can more easily find knowledgeable developers when hiring in-house. React is a declarative, component-based, JavaScript UI "learn once, write anywhere" development library developed by Facebook.
Hydrogen comes with multiple starter templates out of the box and a fully built-out demo store. While your team will need to create elements, Shopify’s pre-built React components (Cart, Shop Pay, and Shopify Analytics) will speed up the process significantly.
A hydrogen starter template: Cart (source: Shopify)
TypeScript
Hydrogen makes writing code more intuitive with fewer errors. It has robust type support for the Storefront API and all Hydrogen components, with IntelliSense editing support and VS Code tooling.
Components and hooks
Mapped directly to the Storefront API, Hydrogen gives you components and hooks like customer accounts, product forms, search, pagination, and i18n ally pre-built to accelerate your development.
Compatible with any React framework
Hydrogen is compatible with React frameworks like Next.js and Gatsby, accelerating headless development. As well as providing a React library portable to other supporting frameworks, Hydrogen is designed to work with Remix, Shopify's full-stack web framework.
SEO ready
Hydrogen includes pre-built SEO optimizations like an auto-generated sitemap, metadata values for every page, robust product feed support, and improved crawlability for search engines.
Two browser windows displaying product detail pages are connected with dotted lines to represent the connection between Shopify APIs and Hydrogen storefronts.
Storefront API
When moving to a Hydrogen React Shopify storefront from a traditional Liquid-based theme, the frontend is only connected to the Shopify backend through APIs. This means that your ecommerce platform will be easy to integrate with any CMS and offer all the customization and localization options you need to grow internationally.
GitHub connectivity
Hydrogen’s hosting solution Oxygen connects directly to GitHub and uses GitHub Actions to deploy commits automatically, so deployment is as simple as a git push.
Dev agility
Composable commerce with Shopify and Hydrogen allows businesses to quickly and easily adapt to changing market conditions and customer needs. With a modular architecture, businesses can swap out components as needed, adding or removing functionality to meet the specific requirements of their customers – using technologies developers know and like.
Hydrogen accelerates commerce development processes thanks to a selection of pre-built components, hooks, and other utilities that make working with the Storefront API easy.
Hydrogen is opinionated yet flexible. It ships with defaults like Tailwind CSS and support for TypeScript but can be mixed and matched with your tools of choice.
Performance
Shopify's dedicated hosting solution for Hydrogen storefronts, Oxygen, is distributed globally and helps your store handle huge volumes of traffic for successful flash sales or really smash-hit social campaigns.
By using Suspense for streaming server-side rendering, it's possible to maintain page interactivity while allowing page components to load progressively according to their priority.
Developer ecosystem
Shopify has put its “stamp of approval” on React.js and encourages the development community to contribute to and shape the future of Hydrogen.
Shopify and Hydrogen’s strong developer ecosystem means there are many third-party apps and integrations available that can extend their capabilities. This, in turn, allows businesses to customize their commerce stack to meet their specific requirements and reuse components as needed.
Scalability
Composable commerce enables businesses to build tailored customer experiences by combining best-of-breed solutions for various aspects of the customer journey, such as storefront creation, payment processing, and shipping. This can lead to higher levels of customer engagement and loyalty.
With a modular architecture, businesses can easily scale their ecommerce systems as they grow. By easily and quickly adding or removing components, businesses can expand their capabilities without having to re-architect their entire system.
Enabling ultra-dynamic shopping experiences without jeopardizing performance, Hydrogen launches with a select list of technologies for personalization, email marketing, helpdesk, search and merchandising, and more.
The list will continue to grow as new solution partners get added.
Cost efficiency
Composable commerce can help businesses save on costs by allowing them to choose only the components they need rather than investing in a full-stack solution. This can be especially beneficial for small and medium-sized businesses that need to be more budget-conscious.
The Hydrogen and Shopify combo checks many boxes, but there are certain caveats to remember:
A limited selection of integrations (for now)
By launching a headless Shopify + Hydrogen store, you will inevitably lose the convenience and ease of building a monolithic Shopify store. While stores cannot bring many apps from the monolithic SaaS version of Shopify, some pre-built app connections are available.
Vendor lock-in
The main advantage of using Shopify's Hydrogen is that it's made by Shopify, which allows you to accelerate your build and setup process. On the flip side, however, there is the Shopify vendor lock-in. Remaining locked into the Shopify ecosystem may defeat the point of going headless in the first place – and still makes you pay Shopify fees.
No CMS out of the box
Remember that although Hydrogen makes building and managing pages extremely developer-friendly, it does not come with a built-in CMS. This might make things a little harder for non-developers. On the plus side, Hydrogen integrates with CMS solutions like Storyblok and Contentful.
Overall, composable commerce's flexibility, agility, and cost efficiency make it an attractive option for businesses looking to build e-commerce systems that can quickly adapt to changing business needs and customer expectations.
Shopify’s Hydrogen is an easy way to get started with headless ecommerce. It includes tools, utilities, and best-in-class examples for creating dynamic and performant commerce apps.
Shopify’s commitment to Hydrogen cements the belief that the future of ecommerce is headless. Hydrogen helps build speedy storefronts that prioritize the customer experience. The Shopify and Hydrogen combo is a great choice for both stores running on monolithic Shopify and those considering building the first ecommerce stack.
