Een webshop waarin verhalen je naar de producten leiden

Doel

Een klantreis waarin het merk centraal staat

Het merk moest centraal staan, zonder in te leveren op de basis van een goede webshop. Het team moest snel kunnen publiceren, de content moest veilig kunnen groeien en de productinformatie moest altijd kloppen. Zo kan het contentteam snel schakelen, terwijl klanten altijd de juiste informatie en een consistente winkelervaring zien.

Aanpak

Headless commerce, met content voorop

We bouwden een webshop waarin content en winkel nauw samenwerken, maar technisch netjes gescheiden blijven.

Makkelijk publiceren

Pagina's bouwen zonder de webshop te breken

DatoCMS bepaalt welke pagina's er zijn en hoe ze zijn opgebouwd. Zo bouwt het team met vaste blokken pagina's, zonder developer. Redacteuren werken met een overzichtelijke pagebuilder en bekijken concepten in een preview die precies gelijk is aan de echte site. Publiceren ververst alleen de pagina's die veranderd zijn, zodat nieuwe content snel online staat.

Soepele koppeling

Productpagina's uit Shopify, aangevuld met verhalen

Product- en collectiepagina's komen eerst uit Shopify, zodat de winkel altijd betrouwbaar werkt. Bestaat een product of collectie in Shopify, dan haalt de site die gegevens op en vult ze aan met bijpassende content uit DatoCMS. Is er geen extra content gemaakt, dan toont de site gewoon een complete pagina op basis van Shopify. De verhalen maken de ervaring rijker, zonder de winkel eronder te verstoren.

DatoCMS-plugin

Geen kopieer- en plakfouten meer

Om foutgevoelig kopiëren en plakken van ID's te voorkomen, bouwden we een eigen DatoCMS-plugin. Daarmee koppelen redacteuren Shopify-producten, -varianten en -collecties direct aan hun content. Dat voorkomt fouten en maakt publiceren sneller, zodat de juiste producten op de juiste plek staan, ook als het team snel moet schakelen.

Zorgeloos doorbouwen

Koppelingen die niet stilletjes stukgaan

Om een site met meerdere systemen stabiel en onderhoudbaar te houden, genereren we automatisch type-safe code voor de data uit zowel DatoCMS als Shopify (GraphQL code generation, met graphql-request in Next.js). Zo sluiten content en winkel altijd goed op elkaar aan, sluipen er geen koppelingsfouten in en blijft doorbouwen veilig, ook als het contentmodel groeit.

Direct live

Snel, dankzij Next.js

De site draait met SSG/ISR op Vercel: pagina's worden vooraf klaargezet, zodat ze snel laden, en toch kan de redactie vaak updaten. Geoptimaliseerde afbeeldingen, caching en het opknippen van code houden ook de rijke onderdelen snel. Via webhooks staan wijzigingen snel online, zonder dat de site er instabiel van wordt.

Het resultaat

Alles op z'n plek

In mei 2024, na drie maanden, ging de nieuwe webshop van The Laundry Story live, met verhalen en winkel hand in hand. Shopify blijft de betrouwbare basis voor alles wat met kopen te maken heeft. DatoCMS en de headless opzet geven het team de vrijheid om snel te publiceren, producten aan verhalen te koppelen en verder te groeien, zonder technische schuld op te bouwen.