Challenge
Patta and Tommy Hilfiger joined forces again to celebrate 90s hip-hop culture and the influence it has had on both brands. The collab would include a fashion drop, a 12” single, and a memorable ecommerce experience, so the brands brought Ask Phill and Rōnin agencies on board to help them execute the digital experience.While requiring relatively straightforward store functionality, the experience had two key challenges. The first challenge would be maintaining a fast-performing site while leveraging content like animations, HD videos, and images that demands high bandwidth and browser resources. But loading content like that in the front-end experience can slow down a site and negatively impact the buyer's shopping experience. The worst-case scenario for product drops is if the site crashes at the most important moment. So high performance would be critical to the project’s success.
Solution
The team knew that headless architecture would be necessary in order to have full creative control of the content experience and keep site performance at the highest level. They chose to use Hydrogen, Shopify’s React-based framework, which was purpose-built for commerce. Hydrogen removes the overhead of a traditional headless setup, while dramatically speeding up the development process.Ask Phill saved months by using Hydrogen’s pre-built UI components for layout, navigation, products, cart, and checkout. They built the entire store functionality in just two weeks, which wasn't even possible for their previous headless builds. Taking away labour-intensive tasks from development gave the team more time to focus on the front-end experience and deliver an unforgettable shopping journey within the tight six week timeline.
Results
At the peak of the customer wave, the Patta x Tommy website had 15K+ visitors at one time—with zero performance issues or downtime. The teams at Patta and Tommy Hilfiger celebrated a huge success as the entire collection completely sold out in just a few hours.Patta x Tommy website sees over 15,000 visitors at a time with zero performance issues or downtime.Both brands were given a much more hands-on experience than would have otherwise been possible with a headless build. The hosting setup in Shopify Oxygen was so straightforward that Ask Phill could easily hand the reins to the Patta and Tommy teams for the launch. With just a simple click, the collection was live. Both brand teams can stay more directly involved without depending on the agencies for help.Patta and Tommy could watch the drop’s performance in real time from the analytics dashboard. Tracking analytics can be more complicated in headless builds because sharing data between the separated front and back-end systems can be challenging. But Hydrogen and Oxygen builds funnel all the data directly to the Shopify dashboard, so it's easy to understand and analyze performance.
Shopify Hydrogen and Oxygen will become the new standard for headless e-commerce development. During the whole project we had direct contact with the Hydrogen team who couldn't have been more helpful, and we're now super excited for the launch of Hydrogen 2 built on top of Remix.