Blueland

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

Mike Wagz

Partner at Self Aware