5 min read

Allbirds evolves its stack with Shopify’s Hydrogen and Oxygen

Four of Allbirds' engineers gather around their laptops, talking and reviewing their work.

Photo by Luca Venter

Allbirds pink shoe.

Challenge

Allbirds started with one shoe and grew to offer several silhouettes, sell in more than 35 countries, and open up nearly 50 retail stores. As the product assortment changed over time, the team needed greater flexibility to manage the products, different categories, multiple variants, and varying product availability by country. They also needed to scale personalization efforts while delivering a fast site experience. Allbirds’ team decided to explore the flexibility of a headless architecture in order to continue serving customers in stores and around the world.

Solution

The Web team considered Shopify’s React-based Hydrogen framework and built-in Oxygen hosting. While they hadn’t built a headless web app yet, Allbirds did go headless in 2020 with their iOS app. The Mobile App team had already vetted the Storefront API and passed along their insights. Using Hydrogen would allow the two teams to share a single systems’ architecture, design documentation, and learnings. The Web team decided to try Hydrogen to build a new store locator feature that would create awareness for brick-and-mortar stores from the online experience.

“Streaming server-side rendering is basically a UX paradigm that’s tailor-made for personalization. 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.” - Colin Dunn, Software Engineer

Nico Schomberg, Allbird's Staff Software Engineer, sitting in front of his computer and coding with Hydrogen.Photo of Nico Schomberg, Staff Software Engineer at Allbirds by Luca Venter

Results

After reviewing the documentation, planning their approach, building out components, adding analytics, and then testing, the team launched the store locator feature—all within three and half weeks. The developer experience and built-in hosting accelerated their workflows while the latest tooling made the architecture interesting to build. With the feature launched in the United States, the next project on the roadmap will be converting the product page to Hydrogen. The team already launched a shortened version of the product page for sold out items to vet the stack with actual traffic. Further down the road, their goals get even loftier: improving site performance while delivering dynamic, personalized experiences for every customer. The team believes those ambitions are achievable with Hydrogen.

View Allbirds' website -->

Photo of Allbirds' store locator by Luca Venter

An Kamp Grizzly engineer sits in front a lap top, reviewing the home page collage on Denim Tears' new website.
Case Study

Kamp Grizzly achieves Denim Tears’ vision for storytelling-infused commerce

Immersive storytelling, easy-to-use content management, and fast commerce come together in Kamp Grizzly’s reimagined website experience for Denim Tears.

Read more