As ecommerce merchants increasingly turn to emerging technologies like 3D and AR to market their products, agencies and web developers are seeing an increase in demand from clients to go headless.
Headless commerce is a type of ecommerce architecture where the front end (or head) of your store is separated from the back end commerce functionality. This allows merchants to sell anywhere on the web without development constraints, leading to richer consumer experiences. However, going headless doesn’t come without challenges: It typically comes at a higher cost to clients and can take longer to scaffold and build, as developers spend more time building functionality for customer behavior from scratch.
But all of that changed in November 2021, when Shopify launched the developer preview of Hydrogen—our opinionated, React-based framework for building custom web storefronts. In order to give developers more flexibility to build unique buyer experiences on Shopify’s Storefront API without all the trade-offs, Hydrogen offers a quick-start environment with commerce-specific components and developer tools. This helps speed up development and increase time spent versus value produced. Hydrogen also leverages advanced integration technologies to support numerous media types right out of the box.
Half Helix—a digital agency and Shopify Partner focused on building, growing, and guiding the next generation of ecommerce companies—was one of the first to test it out.
“Headless builds have become more and more important to our business, but something had been missing—and we really felt like Hydrogen answered that,” says Rigel St. Pierre, Engineering Manager at Half Helix. “So it was a really exciting opportunity [to do the first Hydrogen build]. It was kind of a no-brainer.”
Confident in its new headless solution and eager for this product to be used in the real world, Half Helix set out to create the first-ever Hydrogen site: a rebuild of our very own Shopify Supply, with a launch date of Black Friday Cyber Monday (BFCM) just five weeks away.
Challenge accepted!
Introducing Hydrogen
Before Hydrogen, Half Helix spent a minimum of two to three months on a typical Shopify custom storefront build, with a lengthy discovery phase.
“A lot of the time with headless development, we’re having to reinvent the wheel every time: How are we pulling in products? How are we creating PDPs? How are we doing Add to Cart? All these kinds of core elements,” says Rigel.
So, when Half Helix received the brief for the Shopify Supply store rebuild, it was excited to see how Hydrogen would accelerate the development process with its ready-to-use components, hooks, and utilities built around Shopify data models.
The new store needed to have a bold design, provide a seamless end-to-end buyer experience, and include complex assets like 3D models. And Half Helix had to do it all using an early version of Hydrogen, which was still under development.
“We had to quickly handle updates to the framework and shifting concepts. We also had to solve for a lack of apps, which we usually use for things like [product] reviews, robust/complex metafields, and content management,” says Rigel. This troubleshooting had to take place without relying on community tutorials, guides, or plug-ins, like those that have been created for more mature frameworks like Next.js and Gatsby.
“It was a bit challenging, but it was fun.”
It wasn’t just fun, though—it was fast.
Thanks to Hydrogen’s built-in support for metafields, which enables merchants and developers to build custom content and data models, Rigel’s team didn’t need to worry about an additional CMS and quickly found that working with Hydrogen was easy and efficient. The ability to write both server and client components meant that certain logic—which traditionally needs serverless functions—were within reach, allowing the team to focus on building a deeper brand experience.
“The framework really allowed us to focus more on the creative aspects of the project,” says Rigel, who adds that his team relied heavily on native functionality “It was really exciting for our team to just be able to go, ‘Hey, the Add to Cart is just a component that we can modify as we need to,’ versus, ‘Oh, I have to make an API,’ or, ‘I have to build a wrapper for this and in GraphQL.’”
Hydrogen comes with built-in support for a number of technologies that makes building storefronts fast and easy, taking the boilerplate work out of standard setups. For example, working with Tailwind—a utility-first CSS framework—turned out to be an excellent resource. And by taking advantage of robust and well-documented libraries like React and <model-viewer>, Half Helix was able to stand on the shoulders of giants—which allowed its team to quickly find the answers they were looking for.
Rigel’s growing belief that Hydrogen is the future of headless development was confirmed as he watched a new Half Helix employee become the core contributor on the Shopify Supply project.
“His first-ever Shopify build was on Hydrogen,” says Rigel. “It was incredible to see someone that had never built with Shopify wrap their head around the framework and start building right away.”
Hydrogen builds sites for speed
The real proof of Hydrogen’s success though was on launch day.
On November 26, 2021, Shopify relaunched the Hydrogen-built Shopify supply store, with billboards in New York’s Times Square and Toronto’s Yonge-Dundas Square, with a QR code redirecting to the site. On Black Friday alone, the promotion garnered nearly 27,000 sessions and an almost 99% uptick in new users.
From the start, Half Helix was confident the site wouldn’t have any performance issues. And on launch day, Google Lighthouse scores were steadily in the high 90s (out of 100). “That’s really hard to do,” says Rigel. “It feels fast and we had those metrics without really trying.”
A headless solution for the future of development
Half Helix and Shopify have open-sourced Hydrogen’s code to share with the Shopify Partner community as a best-in-class development example. And as we near Hydrogen’s general availability release, Rigel believes it’s going to transform how agencies create and develop Shopify custom storefronts. Every media type supported in Shopify is supported in Hydrogen, making interactive product experiences—including video, 3D and AR—easier for developers to build, and creating more possibilities for more in-depth product interaction.
“As Hydrogen matures and the framework grows, it’s going to be a very different approach to building sites than the way we’ve done for the last couple of years,” says Rigel. He believes that community buy-in will result in even more resource development, like the type that currently exists for Next.js and Gatsby. And if Shopify app partners start to develop solid components that can be dropped in—similar to working with liquid-based themes—it’s only going to further unlock the creative potential of developers and how ecommerce stores look and function.
“We hope Hydrogen will be our default way to build,” says Rigel. “It makes sense for our business to go headless—instead of focusing budget and time on core functionality, we can focus on being creative and building really great features.”
Speed. A powerful tech stack. Consumer-engaging rich media types. It’s all Hydrogen, and it’s the beginning of a bright future for headless ecommerce.
