Baboon to the Moon

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

By Kevin Green

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

Kevin Green

Technical Consultant and Internet Craftsman

Project Shots

Editing environment

Related contributions