Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
View project liveShare your own project

Baboon to the Moon

By Kevin Green

Complete rebuild of the site on Hydrogen + Sanity. The new experience offers extensive modularity, scheduling, custom product bundling and various editorial options for clps.

Project Shots

Screenshot of the PDP, color selector, size selector, details
Compare module, pulls in other related products by size, highlights currently selected product to easily tell which size you are viewing
Bundle experience, allows you to select multiple products at the same time to create a bundle/discounted add
Collections landing experience, including a sold out state + color selector, client had option to display products with models instead of default image

Editing environment

Shows an overview of the CMS + particular showcasing the home page + modularity
Showcases the CLP/collection landing experience, we override the shopify aspect and handle our own filtering + editorialized product content
Showcases all the additional options that can be utilized at the product card level, allowing them to split items, show sale variants, alternate model/product shots etc.
Color variant picker generation that also handles background colors on product cards + product background handling on the product landing
Bundle product landing page configuration
Shop by specific color, this product type is inlined into various modules throughout the site to show a limited run of colors depending on where it's used
Product landing general configuration and extensibility + modular components
Every product is specifically showcases 3 different levels of product variants, the client can turn items on, schedule new colors, or move colors to the sale category
The client has the ability to quickly clone aspects of products to other products, make adding new sizes/products faster

About the project

The Baboon team had a legacy Shopify theme experience that was in need of a large overhaul. We took the years of modification and enhancement made via hacking the theme and adding plugins like Shogun to create custom pages and build a new experience from the ground up.

We choose the Hydrogen platform after much deliberation over headless/theme/hybrid. We found the bonuses of having Shopify hosted Oxygen (they're on plus) as well as the in-house support for the new framework meant we'd have additional resources when troubleshooting any parts of the build. While adding multipass I was able to contact Shopify support vs in the past you don't have real access to headless resources on the Shopify chat.

The goal of the build was to enrich every aspect of the experience, allowing for modularity, in-depth resource linking, complex variant structure and editorialized collection pages. While we do sync the Shopify traditional collections we don't actually utilize the Shopify curated products from them. This is because we needed the ability to create collections that showcases specific offerings for specific situations. The client has the ability to return the core product with variants below, split product cards out so every variant color is displayed, return only limited run/core/sale items as well as alternate the model/product image when displaying the products.

Bonus Points

  • Bundled PDPs allow customers to add multiple items to cart at the same time
  • Specific upsell products fetched after each item is added to cart
  • Scheduled themes allow them to change homepages/schedule products to display on certain dates
  • (coming soon) Editorial content with complete column rendering to create unique mobile and desktop experiences
  • Color referenced in products can fetch related colors across different product verticals creating relationships between variants not possible in traditional Shopify experiences
  • Nearly all image/media is pushed into Shopify to allow Shopify to own the bandwidth/CDN experience
  • No additional netlify/vercel cost as Oxygen comes included with Plus
  • Unique marketing specific content type for generating ad focused pages with unique inline stoppable product experiences stitched into the rest of the modular system

Contributor

Other projects by author

Occo

Featured

Complex product offering with nested product structure and tiered pricing.

Kevin Green

Hedley & Bennett

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

Kevin Green

Baggu

A Shopify Multi-Site flowing into a single Sanity instance and back out into 2 unique frontend experiences.

Kevin Green

Allkinds

Craft a unique online experience that is reflective of the fun and uniqueness of this child focused reusable, compostable, refillable brand.

Kevin Green