What tech leads need to know about Hydrogen in 2024

The launch of Hydrogen marked another successful push from Shopify to democratize technology that historically has only been accessible to big-box retailers.

In the past, brands wanting to unlock elevated shopping experiences had to onboard massive infrastructure and an experienced technical team to achieve a fully custom headless frontend. With Hydrogen, they can launch blazing-fast and content-rich storefronts without building and maintaining all of the infrastructure themselves—a huge win for growing brands who are looking for more flexibility.

But despite the immense value Hydrogen brings to the table, some tech leads remain reluctant to move past their Shopify themes, favoring perceived simplicity over performance and flexibility.

To bring tech leads (and brands) up to speed on Hydrogen, we sat down with Jon Iler, Co-Founder and CEO of Spacebox, to discuss how Shopify is pioneering a new era of headless commerce.

Why going headless doesn't have to be a headache anymore.

Contrary to popular belief, going headless isn't the daunting task it once was.

Before Hydrogen, brands looking to go headless would need to onboard a headless CMS, which required a robust technical staff to manage the infrastructure. The sheer amount of resources needed to build and maintain a headless storefront turned many brands (both large and small) away from the idea.

As Jon puts it: "We can't fault brands for thinking going headless is difficult.”

Fast forward to 2023, and a flexible, performant frontend is within the reach of brands of all sizes without the need to bring on a full technical team and CTO. Because Shopify owns and maintains Hydrogen — with hosting on Oxygen included in its subscription fee — brands that go headless via Hydrogen also unlock the full value of Shopify.

While Hydrogen provides a great technical foundation to build a custom storefront and solves for most of the technical maintenance, most brands still need a way to create and manage content visually—in a similar fashion to Shopify’s customizer.

That’s where a digital experience platform like Pack can bridge the gap—bringing together a visual content customizer, dev tools, and CRO tools that take Hydrogen from a framework to a storefront that’s easy to use.

What is Hydrogen? A quick overview

Simply put, Hydrogen is Shopify's React-based headless stack created to help brands and developers build and maintain custom storefronts.

Traditionally, only enterprise-level brands had the resources to launch and maintain a headless storefront. With Hydrogen, Shopify has paved the way for SMBs and mid-market businesses to compete against brands with significantly more resources.

Why Hydrogen is gaining momentum

Given the extensive buzz surrounding headless in recent years, it's understandable that Hydrogen has piqued the interest of ecommerce brands. Yet, Hydrogen is also making waves among veteran developers like Jon, who were eager to see what headless commerce on Shopify looks like in practice.

Jon, speaking from first-hand experience, explains how Hydrogen empowers developers to work with a versatile and reusable code base, while Shopify takes care of the nitty gritty that’s involved with headless infrastructure. This helps him focus on crafting captivating shopping experiences instead of grappling with site maintenance.

Working with modern JavaScript frameworks is another significant factor propelling Hydrogen's momentum. These frameworks have vast libraries that give developers a lot of tooling out of the box without worrying about creating a rat's nest code base.

Working with a clean code base is especially important when you consider the impacts of turnover and working with external stakeholders. When brands hire new staff or outsource work to contractors, the onboarding process can take weeks if the code base is an indecipherable mess. Working with modern JavaScript frameworks solves these issues.

Why graduate from a theme to Hydrogen?

As both an ecommerce and Shopify veteran, Jon says a Shopify theme is the crucial first step for any early-stage brand. And with good reason – they're effortless to set up and manage.

However, when brands scale their businesses and find product-market fit, he recommends they consider graduating from a theme to Hydrogen.

In addition to working with a versatile and reusable codebase, Jon cites several additional benefits of upgrading from a theme to Hydrogen:

1. The magic of React: While themes are excellent for brands looking for an easy way to inject content into their site, Hydrogen (being a React-based headless stack) makes building tightly integrated site experiences within Shopify a breeze. In Jon's words, "It's the most magical part for me."

2. Reduced reliance on devs: When combined with low-code solutions (such as Pack), brands building in Hydrogen can make front-end changes without relying wholly on dev teams. This gives them the autonomy benefits of a theme, with the performance and flexibility of headless.

How Jon single-handedly built UMZU’s headless storefront with Shopify + Pack

One of Jon's most recent builds was for UMZU, a health-focused supplement company. UMZU was a classic example of a growing brand on Shopify that was ready to graduate from its theme.

While Jon and the UMZU team weighed several options for the rebuild, they agreed that constructing a fresh, Hydrogen-powered storefront using Pack was the best path forward.

Why? Because UMZU’s goals were to:

1. Give themselves a clean slate to build on top of (clean customer data, product data, codebase etc)

2. Differentiate their shopping experience in a big way—ex. with custom quizzes that were tightly integrated into their product catalog, celebrations, custom animations and custom login experiences

3. Iterate quickly on the customer experience, without turning every request into a dev project.

The result? Using Pack's DXP, Jon built UMZU's entire headless storefront as a solo engineer in only four months. The build was such a success it inspired Jon to launch his own Pack-focused, full-stack development studio, Spacebox.

Using Pack and Hydrogen, Spacebox builds sites for brands in a fraction of the time a traditional Shopify site would take to build.

Best practices for brands rebuilding their storefronts

Before you take the leap into rebuilding your online storefront, here are the essential steps Spacebox uses to ensure their rebuilds are as frictionless as possible.

Clean up your data

When you’re re-doing your front-end, it’s vital that the data you migrate to your new front-end is as clean as possible. Jon suggests these steps to ensure clean data for the switch to a custom storefront:

1. If you have old products lying around in draft mode, it’s time to get rid of them.

2. Next, export any sales data from those products into a database outside of Shopify.

3. Finally, remove outdated tags and collections from the products you are currently selling.

Evaluate your third parties

Find a way to consolidate your third parties and remove ones that would be obsolete in your new storefront. Once your rebuild is complete, you won't have these integrations embedded on your site anymore, which is a key driver of improved site performance.

To evaluate your 3P tools, ask yourself these questions:

1. Could I build this myself and save money in the long term?

2. Can I consolidate my 3p tools to streamline workflows and standardize processes?

3. What tools can I replace with ones that offer better functionality?

💡Jon’s pro tip: Ensure the third-party tools parties you keep all have headless integrations.

Our prediction: 2024 will be the year of Hydrogen

At Pack, we're more than confident that 2024 will be the year Hydrogen evolves from a headless toolset into a thriving community of builders and visionaries.

When you're ready to join this community and unlock the true potential of Shopify, you can count on us to support you through the entire process.

Book a call with our ecommerce experts, or check out our blog to decide if it's time to make the switch.