The newest framework.
What is Shopify Hydrogen and why would you use it?
When the history of ecommerce is written, Shopify Hydrogen will be a defining moment. The technology is on the brink of ushering in a new era, and we’ve added our name to its story forever.
We’re the first agency in EMEA to launch a website on Shopify Hydrogen.
We successfully built and launched a store on Shopify Hydrogen for the latest Patta and Tommy Hilfiger collaboration. Drops between the two giants don’t come around all too often, so when they do it’s only fitting to raise the bar.
We teamed up with the design gurus from Rōnin to build a memorable digital experience that emphasises the drop’s 90s hip-hop theme.
The newest framework.
What is Shopify Hydrogen and why would you use it?
Headless architecture with Shopify Hydrogen.
The intricate animations and HD content required a specialist setup.
Exclusive webinar.
Rewatch our conversation with experts at Shopify, Patta and Ronin, discussing the technical requirements and why Shopify Hydrogen was the best fit for the job.
Patta x Tommy
The first Shopify Hydrogen store of its kind.
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.
Whilst requiring relatively straightforward store functionality, we faced two key challenges with the Patta x Tommy project.
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.
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.
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