The Laundry Story
A store where the stories lead you to the products
The Laundry Story makes laundry perfume and home care products. The brand sells on scent and mood, so the store needed plenty of room for stories and imagery. Buying had to stay as easy as in a regular Shopify store.
- Client
- The Laundry Story
- Agency
- Once Upon a Concept
- Project type
- Headless store
- 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
- thelaundrystory.nl
Objective
Lots of content, and a shop that just works
The content team wanted to build pages and stories themselves, without a developer. At the same time, prices, stock and product details had to come from Shopify and always be right. The site had to do both.
Approach
Shopify for the shop, DatoCMS for the stories
I set the site up so each system has one job. Shopify handles everything to do with buying, DatoCMS handles the content, and Next.js puts the two together on one page.
Publishing
Pages built from fixed blocks
In DatoCMS the team builds pages from blocks I designed and built up front. They check drafts in a preview that looks exactly like the live site. Publishing regenerates only the pages that changed, so a new article is online almost straight away.
Product pages
Shopify first, the story on top when there is one
A product or collection page always starts from Shopify. If the editors have made extra content for that product in DatoCMS, it gets added. If not, there's still a complete product page built from Shopify data. A new product can be sold right away, even before its story is written.
DatoCMS plugin
Picking products instead of pasting IDs
Without a tool, you link a Shopify product to content by copying an ID and pasting it into the CMS. One wrong character and a different product shows up on the page. So I built a DatoCMS plugin that lets editors search Shopify products, variants and collections and pick them, with image and price shown.
Maintenance
Catching mistakes before they go live
The site pulls data from two APIs. I generate TypeScript types from the DatoCMS and Shopify GraphQL schemas (GraphQL code generation, with graphql-request in Next.js). If a change to the content model no longer fits the code, I find out during the build, not when a visitor lands on a broken page.
Speed
Prebuilt, refreshed on publish
The site runs on Vercel with SSG and ISR. Pages are ready before anyone asks for them. A webhook from DatoCMS refreshes only the pages that changed. Images are resized automatically and code loads per page, so the heavier content pages stay fast too.
Result
Live in May 2024, after three months
The new store went live in May 2024. Shopify does what it's good at: products, stock and checkout. In DatoCMS the team writes stories and links products to them, without needing me.
Next case: Dit is Watt
A one-pager for home batteries, without the sales pitch
Dit is Watt explains how a home battery works. The team edits everything themselves and changes go live within seconds.
View Dit is Watt