Hedley & Bennett

Site rebuild with Sanity + Hydrogen. Created unique product structure to allow for better modularity, bundling, advanced collection filtering and unique navigation patterns.

By Kevin Green

Project Shots

Homepage showcasing the hero carousel, press highlights, nav all powered by sanity

Shoppable module divided by product parent, with nested product type + color picker abilities

Collection pages powered by Algolia in combination with custom sanity filtering at the product map level, easily letting color, fabric, type and preferrence to be selected at the product landing or map level

Cart experience with custom color attributes and nested bundling + upsells powered by sanity

PDP with nested product references, they appear as variants but they're actually product skus and new pdps rendered

Editing environment

Homepage content type, allows for easily replicating homepages, while setting the live page in the theme

Custom collaboration content type for easily showcasing brand paternships, products associated to collabs get special logos associated to them and other custom modules

Product landings that power modularity between similar products, these are generated automatically in the custom sync and stitches similar products together to return on the frontend

Product landing detail tab showing some of the modules that show up across all referenced product maps

Product bundling content type, allows you to reference products and set a discount amount, discount amount is applied with a shopify plus script, all products are added to cart together and grouped in the UI for a better experience

Module area for more global configurations including the resuable modules, these can be referenced inside of a reusable module page component allow for easily assocating the same content even in a modular reference across the system

About the project

H&B was wise to the improvements they've seen in other Hydrogen experiences and hoping to leverage the speed and modularity gains we combined the Shopify experience with a Sanity CMS. Instead of using cumbersome metafield editors that they had to repopulate everytime they made any new colors/styles of products we gave them a custom sync solution to craft product landing experiences that made adding additional colors to the product offerring a breeze while still having tons of custom modules at the product level.

We choose Hydrogen as the solution because of the hosted by Shopify offering and the recent support from Shopify (buying remix) made it obvious that Shopify wasn't bowing out of headless for a while. We also leveraged algolia to replace some existing apps handling the search that just weren't cutting it, we also added a handful of other new component and content types to make building and creating unique product landings, duplicate products with refined color offerings, bundles with nested relational products and more.

Contributor

Kevin Green

Technical Consultant and Internet Craftsman

Project Shots

Editing environment

Related contributions