Skip to content
✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now
View project liveShare your own project

Blueland

By Mike Wagz

Redesign & headless build for Blueland, a revolutionary cleaning brand on a mission to end single-use plastic 🧼

Project Shots

Filterable and sortable product collections with overlays to help customers compare starter kits
Product detail page including a breakdown of the subscription refill model
Cart drawer experience including free shipping meter, subscription kit line item, donation add-on, and cross-sell carousel
Product detail page including scent and pack size selection. Product option values can be extended with icons or subtitles to reinforce bulk savings.
This interactive savings calculator module is just one of over 25 content modules we designed and built to create a flexible, scalable system for Blueland.
Modular blog homepage
Inline table module for blog articles

Editing environment

Shopify products are synced to Sanity. Here, you can see how product option values are enhanced with subtitles and icons
Subscription settings in the product document
Flexible content modules in action on the product document for The Clean Suite
We migrated over 100 posts from WordPress to Sanity
There are countless other goodies unlocked with the power of Sanity. Here is one of our favorite examples: A product badge document type that references a color style document type for the badge background color.

About the project

We worked with Blueland to transition their high-volume Shopify Plus storefront to a headless experience powered by Sanity and the Shopify Storefront API. By going headless, we've unlocked a new level of freedom and flexibility for the Blueland team:

  • A scalable, modular design system allowing Blueland to create custom PDPs and LPs without a designer or developer
  • An extended schema for Shopify products, breaking out of the infamously restrictive content management capabilities of Shopify
  • An elevated editorial authoring experience for the blog that we migrated from WordPress to Sanity

For the build, we leveraged Next.js which allowed us to craft both a blazing fast static site experience for customers and a server rendered live preview experience for Blueland's team. This build also included custom integrations with ReCharge for subscriptions and Yotpo for product reviews.

Contributor