Patta x Tommy

What is Shopify Hydrogen?

Shopify Hydrogen was first mentioned at the Shopify Unite Conference in 2021. Throughout 2022 the documentation was slowly released and developers could begin experimenting with the technology.

In a nutshell, it's a new framework for building Shopify stores based on JavaScript and React. It means that Shopify Liquid is no longer the only language option for coding on Shopify, and it opens up a new world of possibilities for the platform.

Why Shopify Hydrogen?

Whilst requiring relatively straightforward store functionality, we faced two key challenges with the Patta x Tommy project.

1. Animations and high performance

Patta and Tommy wanted a site that was far more than products and a checkout. The store had to reflect the magnitude of the occasion and offer something memorable to its visitors.

As the capsule represented a reflection on 30+ years of hip-hop culture, Rōnin Amsterdam wanted to give the website a scrapbook feel. The visitor turns through the pages of hip-hop history as they navigate the site, with multiple reveal animations and parallax scrolling creating a layered experience.

Scribble-effect animations (built with sprites) add a scrapbook choppiness, highlighting the Wiki & Mike record among other key features. And a ton of HD images and videos add to a fully immersive, sensory overload that captivates a visitor from start to finish.   

The challenge was to integrate all that front-end weight whilst keeping performance levels at the very top. Fashion drops like this one create surges of customers over very short periods of time, and only the highest performing stores can handle the sheer volume of simultaneous visitors.

The worst scenario for drop-selling is for the site to cash at the most important moment, so high-performance is a necessity to the project’s success. Traditionally, however, loading the front-end with videos and animations is the quickest way to weigh down your site and bring performance levels down. 

We had to find a way to have the best of both worlds.

2. Short time frame

We only had around six weeks to build and launch the Patta x Tommy site. This isn’t much time to build any site, let alone one with the UX requirements of this project. We needed a solution that would give us as much time as possible to focus on building the animations, whilst also safeguarding performance levels to prevent the site from crashing on launch day.

Thankfully, Shopify Hydrogen was the answer.

Headless architecture with Shopify Hydrogen

To answer the first challenge, we knew we needed a headless Shopify store. Keeping performances high, whilst also loading the front-end store with intricate animations and HD content, requires a specialist setup. Headless stores built on React will always give the best possible performance levels. So we knew a headless tech-stack was necessary.

The next question, then, is why build a headless store specifically on Shopify Hydrogen rather than the ‘traditional’ headless setup?

Shopify Hydrogen was the perfect solution because it’s set up to build as fast as possible. In a ‘traditional’ headless project, developers need to build every feature from scratch. Even the most basic e-commerce functionality like Add To Cart requires a time-consuming build process.

With Hydrogen, however, every necessary piece of functionality is ready to go, right out of the box. We built the entire e-commerce store in no more than two weeks, which gave us ample time to focus on the animations and make sure the UX was the best it could possibly be.

This wouldn’t have been possible without the new Shopify Hydrogen toolkit, making it the ideal solution for our project.

For more detail on the build and how we use Shopify Hydrogen, check out our webinar with special guest speakers:

Gordon So, Ask Phill Head of Tech

Leander Jansen, Patta IT Lead

Benjamin Sehl, Shopify Senior Product Lead

Toby Mok, Rōnin Co-founder