What Shopify’s new Hydrogen framework means for merchants
JP Arnaud-Marquez
·June 23, 2022
Following up on yesterday’s Shopify announcements, we have more exciting news around a new framework that will unlock a world of possibilities for our merchants.
Last year, Shopify released a developer preview of Hydrogen, a React-based front-end web development framework that engineering teams can use to build Shopify custom storefronts. With Hydrogren’s headless commerce model, you can independently architect the front-end and back-end of your storefront, using Shopify as the commerce engine that powers it. Shopify also offers globally distributed, built-in hosting on Oxygen, for quick deployment with no loss in uptime or speed.
By using the flexibility of a headless architecture, you can use your API to power a Shopify commerce experience across a wide variety of customer touch points – including web, mobile, gaming platforms, and more – with a fully customized experience that doesn’t sacrifice speed or scalability.
Now, Hydrogen is introducing 11 integrated partner apps that help you extend the capabilities of your Hydrogen build – and Loop is one of them!
Benefits of Hydrogen + Oxygen
Using the React-based commerce framework to power your shop, with quick deployment through Oxygen’s hosting, offers a versatile set of technologies that your development team can choose from to build highly customized experiences across different commerce channels, without sacrificing any performance.
Hydrogen is fully open-source, so developers can share their work to benefit the entire Shopify ecosystem – or even sell their own APIs directly through the Shopify marketplace.
Hydrogen’s ready-to-use components, hooks, and utilities integrated with Shopify data models give you the power to go right from designing to building, without needing to focus on scaffolding or configuration. And while Hydrogen offers a set of starter templates, your development team can easily customize the look and feel of your store, using Tailwind CSS.
That means you can effortlessly create fully customized ecommerce experiences across all of the channels your customers are using – without sacrificing data integration capabilities, style, uptime, or speed.
Customer case study: Allbirds
The sustainable shoe and clothing brand Allbirds powers its shop with Shopify, and processes its returns with Loop.
The brand recently evolved its tech stack to incorporate the Hydrogen framework, creating a new store locator feature that helps customers identify brick-and-mortar stores that carry Allbirds products through the mobile app. The brand’s engineering team was able to build the feature and successfully launch it within just three and a half weeks, and the team is now setting their sights on converting product pages to Hydrogen, and ultimately delivering dynamic, personalized experiences for each customer that deliver a tailored shopping experience without sacrificing speed.
“Streaming server-side rendering is basically a UX paradigm that’s tailor-made for personalization,” says Colin Dunn, a software engineer at Allbirds. “We get all the benefits of a super fast initial page load and still get to serve our users a personalized experience, which were two things that used to be at odds. But Hydrogen makes them no longer at odds. I can’t even imagine the amazing experiences we’ll be able to serve a year from now.”
And no matter what channel customers are using to shop on Allbirds – mobile, web, or in-store – the brand is able to access integrated returns data through Loop that provides the brand with deep insights that help them understand which products are being returned more frequently and why, and enable them to optimize for exchanges through the platform to retain more customer revenue.
Find out more
If your brand has been on the fence about using the Shopify ecommerce platform rather than completing a custom build because you’re concerned about the lack of customization, the new Hydrogen open-source framework makes this a perfect time to get started.
You’ll be able to effortlessly pair your own front-end and back-end development with the Shopify commerce engine to deliver tailored customer experiences across all the channels where your customers shop – with smooth data integration with Loop to give you full visibility into your returns data across all channels so that you can measure both ecommerce and in-store performance easily.
Ready to explore the Hydrogen framework in more detail? Visit Shopify’s developer page, where you can read the technical documentation and join the open-source developer community.
In this article
Stay in the loop
Subscribe for product updates and Loop's biweekly newsletter.
Retain more revenue with Loop today
With Loop, your brand can offer everything from refunds to direct exchanges to shopper incentives and more. Even better? These exchanges build your business.