Get in touch
Studio shot of various Shopify Supply merch items

Shopify Supply

How brand new frontend technology helped Domaine build, fast.

Opportunity

Shopify Supply is the first-ever Hydrogen site, with UX support and Frontend Development from the team at Domaine. A Shopify-first headless development environment, Hydrogen helped the team build better, faster thanks to cutting edge integration technologies and the ability to support numerous media types right out of the box. This is what made the creative design—with 3D viewing technology—possible. This best in class example for the Shopify Development Community is just the beginning, and the team open sourced their code to share with the Shopify Partner community just how exciting building on Hydrogen can be.

Disciplines

Speeding up Headless development

Building on Hydrogen is so fast, Shopify challenged Half Helix with designing and developing its first Headless site with a bold design, complex assets like 3D models, and a seamless end-to-end buyer experience in 5 weeks—no small feat. Hydrogen is architected with pre-built components, and there were no 3rd party CMS platforms to work with, so working with Hydrogen as the starting point was fast and efficient. The flexibility to write both server and client components meant that certain logic which traditionally needs serverless functions were within reach, and allowed the team to focus on building more brand experiences.

Desktop screenshot of Shopify Supply's ticker section

Hydrogen’s powerful Tech Stack

The team enjoyed working with the tech stack and dependencies Shopify chose to build Hydrogen with, and the options they opened up. For example Tailwind CSS , a utility-first CSS framework. Working with Tailwind for the first time offered a learning curve for the team, but ended up an excellent resource once some of the true utility was realized. And by taking advantage of robust and well-documented libraries like React and <model-viewer>, we were able to stand on the shoulders of giants—which allowed the team to quickly find the answers they were looking for.

Desktop screenshot of Shopify Supply's hero

Consumer-engaging rich media types

Every media type supported in Shopify, is supported in Hydrogen—making interactive product experiences easier for agencies and developers to build. This allowed the team to be more creative, and developers to make interactive product experiences much easier. So whether it’s through video, 3D, or AR, deeper brand and product connections can be achieved for merchants. And with headless development, the possibilities for more in-depth product interaction through emerging technologies are endless.

Desktop screenshot of Shopify Supply's hero

Related Work

View All