HomeWork

Peter Coolen

Creative Developer

The Laundry Story

Content-rich headless commerce that turns editorial into product discovery

About

The Laundry Story is a Dutch home and laundry care brand that turns everyday washing and cleaning into a small luxury ritual. The brand leans into fragrance and experience, making routine moments feel elevated while keeping the storefront focused on easy product discovery and purchase.

Client: The Laundry Story
Agency: Once Upon a Concept
Project type: Content-rich headless commerce
Role: Architecture, Next.js build, CMS modeling, Shopify integration, Firmhouse integration, custom DatoCMS Shopify Picker, Analytics, SEO, deployment setup
Timeline: 3 months
Date: May 2024
Visit: https://www.thelaundrystory.nl

The Laundry Story Home Page

Objective

The project focuses on supporting a brand-led customer journey without sacrificing commerce fundamentals. The site needs to publish quickly, scale content safely, and keep product truth dependable, so the content team can move fast while customers always see accurate product information and a consistent shopping flow.

Approach

We build a storefront where content and commerce are tightly connected, but cleanly separated in implementation.

Execution

CMS-first publishing without breaking commerce
DatoCMS owns routing and page composition, giving the team a modular system to build pages without developer involvement. Editors work in a structured page builder approach and rely on DatoCMS Preview Mode to review drafts in a production-like environment. Publishing triggers webhook-based revalidation, so new content goes live quickly without full rebuilds.

The Laundry Story Product Detail Page
Product Detail Page

Shoppable blog with inline commerce blocks
Product and collection pages follow a Shopify-first approach that keeps commerce reliable. Routing resolves a handle and fetches Shopify product or collection data whenever it exists, then enriches the experience with any matching DatoCMS content. If no rich content page is created, the site still renders a complete product or collection page from Shopify automatically, while editorial content upgrades the experience without disrupting the underlying commerce layer.

The Laundry Story Blog Cross Sell
Blog cross-sell example

Editor workflow that removes manual errors
To avoid the fragile workflow of copying and pasting IDs, the build includes a custom DatoCMS plugin that lets editors connect Shopify products, variants, and collections directly to content modules. This reduces mistakes and speeds up publishing, so merchandising stays accurate even when the team ships quickly.

Type-safe integrations across systems
The site uses a headless architecture where DatoCMS handles all To keep a multi-system setup stable and maintainable, the project uses GraphQL code generation to create type-safe models for both DatoCMS and Shopify, paired with graphql-request inside the Next.js codebase. This tightens the contract between content and commerce, reduces integration bugs, and makes iteration safer as the content model grows.

Performance-minded delivery on Next.js
The site is delivered with SSG/ISR on Vercel to keep pages fast while supporting frequent editorial updates. Image optimization, caching, and code-splitting keep rich modules performant, while webhook-driven revalidation ensures content changes appear quickly without compromising stability.

Result

Delivered in three months in May 2024, The Laundry Story launches as a content-led storefront where editorial and commerce work together. Shopify stays the dependable source for shop functionality, while DatoCMS and the headless architecture give the team the freedom to publish quickly, connect products to stories, and scale the experience without creating technical debt.

The Laundry Story Home Blog Carousel

Contact

Interested in working together? Send a message to info@petercoolen.com.

© 2025 Peter Coolen Creative Developer
Memorable Interactions. Meaningful Impact.

Kvk:   84017848
Btw:   NL003908092B27