Webshop laten maken die bij je merk past: begin bij de klantreis

Webshop laten maken voor een merk dat al verkoopt? Begin bij zes momenten in de klantreis, plus teambeheer, migratie en toegankelijkheid.

In het kort: Wil je een webshop laten maken voor een merk dat al online verkoopt? Begin dan bij de klantreis, niet bij het platform. Beschrijf zes momenten, van binnenkomen tot en met de tweede bestelling, en zet die in je briefing. Dan bouw je rond je klant in plaats van rond een featurelijst.

Je hebt een marketingteam en verkoopt misschien in meerdere landen. Toch durft je team geen pagina aan te passen, omdat het ontwerp dan breekt. En een overstap voelt riskant voor je posities in Google. Wil je je webshop vernieuwen of een professionele webshop laten maken die wel bij je merk past? Dan heb je iemand nodig die meedenkt, niet alleen een lijst afvinkt. In dit artikel lees je hoe ik dat aanpak, met voorbeelden uit mijn werk voor Orangefit, The Laundry Story en Chunky Cherry Coffee.

Waarom de klantreis een betere briefing is dan een featurelijst

Op een featurelijst zegt elke bouwer ja. Filters, reviews, abonnementen: het staat er allemaal op, maar niemand weet wat de klant ermee moet. Vaak wordt elke regel dan een losse app. Met elke app wordt je webshop trager en lastiger te beheren.

Een briefing vanuit de klantreis beschrijft wat een klant moet kunnen. Bijvoorbeeld: "Een vaste klant in België bestelt op haar telefoon dezelfde koffie opnieuw, zonder te zoeken." Daar kun je op ontwerpen. En zo'n zin dwingt keuzes af. Waar staat haar vorige bestelling? Hoeveel tikken kost het? Ziet ze meteen de prijs in euro's met Belgische verzendkosten?

Nederlanders kopen inmiddels vaker op hun telefoon dan op een laptop of desktop (Thuiswinkel.org). En wie een winkelwagen laat staan, doet dat vaak om dingen die je kunt ontwerpen: hoge extra kosten, een verplicht account of een checkout die te lang duurt (Baymard Institute).

Je hoeft de klantreis niet te verzinnen. De meeste input heb je al:

• Je klantenservice. Welke vragen komen elke week terug? Elke vaste vraag is een gat in je webshop.
• Search Console en je eigen zoekbalk. Met welke woorden komen mensen binnen, en waarop zoeken ze zonder resultaat?
• Je analytics. Op welke pagina's landen mensen, en waar haken ze af, vooral op mobiel?
• Reviews en retouren. Wat verrast klanten, in positieve en negatieve zin?

Zo baseer je je briefing op wat klanten echt doen, niet op wat je denkt dat ze doen.

De zes momenten in de klantreis

Gebruik deze tabel voor je briefing.

Per moment lees je hieronder wat er vaak misgaat, wat je in je briefing zet en hoe ik het in eerdere projecten heb opgelost.

1. Binnenkomen: de eerste seconden na de klik

Veel bezoekers komen binnen via een campagne of Google, vaak in de ingebouwde browser van een app zoals Instagram. Schrijf per kanaal en land op waar ze landen en wat ze als eerste zien. Denk daarbij aan:

• De juiste taal, valuta en verzendinfo, meteen. Een Belgische klant die Nederlandse verzendkosten ziet, twijfelt al.
• Een pagina die aansluit op de advertentie. Klikt iemand op een actie, laat dan die actie zien en niet je homepage.
• Zelf van land of taal kunnen wisselen. Stuur niemand ongevraagd door naar een andere versie van je webshop.

Orangefit verkoopt in meerdere landen en talen. Daar kan de inhoud van een productpagina per land verschillen, zodat elke klant leest wat voor haar land klopt.

Snelheid telt hier ook. Een pagina moet meteen reageren als iemand tikt (web.dev). Bij de headless webshop van Orangefit, die ik met mijn collega's bij Superhero Cheesecake bouwde, staan alle Core Web Vitals op groen. Drukke dagen zoals Black Friday verlopen zonder problemen.

Snelheid regel je niet één keer. Elke nieuwe app, elk trackingscript en elke video kan een pagina trager maken. Zet daarom in je briefing dat de Core Web Vitals op mobiel groen moeten zijn, en wie dat na de lancering bewaakt.

2. Zoeken: producten en verhalen samen

Klanten zoeken niet zoals jij je assortiment indeelt. Ze typen in hun eigen woorden, met tikfouten, en soms in een andere taal dan je site. Zet in je briefing:

• Echte zoektermen uit je klantenservice, Search Console en de zoekbalk van je huidige webshop.
• Synoniemen en tikfouten die de zoekbalk moet begrijpen.
• Wat er gebeurt bij nul resultaten. Een lege pagina is een doodlopende weg. Toon dan populaire producten of een andere ingang.
• Wat een klant in de resultaten al moet zien. Bij Chunky Cherry Coffee tonen de productkaarten smaaklabels. Zo kies je zonder elke pagina te openen.

Laat de zoekfunctie ook je content vinden. Bij Orangefit vindt één zoekbalk (Algolia) producten uit Shopify én recepten en blogs uit het CMS, in elke taal en binnen 100 ms. Vanuit de recepten kun je de producten direct kopen. Zo wordt je content een ingang naar je winkel, in plaats van een los blog ernaast.

3. De productpagina: twijfel wegnemen

Een goede productpagina beantwoordt vragen voordat de klant ze stelt. Bij een merk dat al verkoopt, ontbreekt vaak één vraag: waarom dit product, van dit merk? Een goede briefing zet per productpagina deze vijf vragen op een rij:

• Wat is het, en is het iets voor mij? In één zin bovenaan.
• Hoe gebruik ik het? Een uitleg, video of recept uit je eigen content.
• Wat vinden anderen ervan? Reviews vlak bij de knop, niet onderaan.
• Wanneer heb ik het, en kan het terug? Levertijd, verzendkosten en retour, per land.
• Waarom van dit merk? Herkomst, maker, de keuzes die je maakt. Dit mist op een standaardpagina.

Spreek per vraag af waar het antwoord vandaan komt. Prijs, varianten en voorraad staan in Shopify. Verhalen, uitleg en recepten maakt je team in het CMS. Reviews komen meestal uit een app. Zo weet iedereen wie wat bijhoudt.

Op een telefoon zie je eerst alleen het bovenste deel van de pagina. Zet in je briefing wat daar moet staan: productnaam, prijs, de belangrijkste keuze en de knop. De rest mag eronder.

Die laatste vraag, waarom van dit merk, beantwoord je met verhalen die je team al maakt. Bij The Laundry Story komt elke product- en collectiepagina eerst uit Shopify. Een verhaal uit het CMS vult die aan. Is er nog geen extra content, dan staat er toch een complete pagina. En in de blog staan productblokken waarmee je direct kunt kopen.

Bij Chunky Cherry Coffee, waar ik het Shopify-thema bouwde, kies je formaat, branding en maling op de productpagina. De gescande koffiezakken draaien in 3D rond, zodat je de echte verpakking van alle kanten ziet. De lijnen op de achtergrond zijn licht gebouwd, zodat de shop snel blijft. Zo'n effect moet het kiezen makkelijker maken, niet de pagina trager.

Past je huidige webshop niet meer bij je merk? Stuur me de link en drie dingen die je klanten bij jou moeten kunnen. Dan kijken we samen waar de klantreis nu hapert. Stuur me je link.

4. De winkelmand: laat zien dat het gelukt is

Een klant tikt op "In winkelmand", ziet niets gebeuren, tikt nog eens en heeft er twee. Spreek daarom vooraf af wat de knop doet: hij reageert direct en zichtbaar, en een schermlezer leest de melding voor.

Spreek ook af wat er daarna gebeurt:

• Opent er een winkelmand aan de zijkant, of blijft de klant op de pagina? Allebei kan, zolang het overal hetzelfde werkt.
• Wat als het product net is uitverkocht? Zeg dat meteen, niet pas bij het afrekenen.
• Wat ziet de klant in de winkelmand? Het totaal met verzendkosten, de levertijd en een duidelijke knop naar afrekenen.

Voor je developer:

<button class="add-to-cart" type="button">In winkelmand</button>
<p class="cart-status" role="status"></p>

const button = document.querySelector('.add-to-cart');
const status = document.querySelector('.cart-status');
let busy = false;

button.addEventListener('click', async () => {
  if (busy) return; // geen tweede product bij twee snelle tikken
  busy = true;
  button.setAttribute('aria-disabled', 'true');
  button.textContent = 'Bezig…';
  status.textContent = ''; // leegmaken, zodat een nieuwe melding opnieuw wordt voorgelezen

  try {
    await addToCart(variantId); // jouw eigen winkelmand-aanroep
    button.textContent = 'Toegevoegd';
    status.textContent = 'Toegevoegd aan je winkelmand.';
  } catch {
    button.textContent = 'In winkelmand';
    status.textContent = 'Dat lukte niet. Probeer het opnieuw.';
  }

  setTimeout(() => {
    button.textContent = 'In winkelmand';
    button.removeAttribute('aria-disabled');
    busy = false;
  }, 1500);
});

.add-to-cart { transition: transform 150ms ease-out; }
.add-to-cart[aria-disabled="true"] { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .add-to-cart { transition: none; }
}

De knop laat meteen zien dat hij bezig is en negeert een tweede tik. Met aria-disabled blijft hij bereikbaar met het toetsenbord. Door role="status" leest een schermlezer de melding voor. En wie minder beweging heeft ingesteld, krijgt geen animatie.

5. Afrekenen: geen verrassingen, in elk land

In een onderzoek van Baymard zegt 12% van de afhakers dat ze de totale kosten niet vooraf konden zien (Baymard Institute). Laat daarom al op de productpagina en in de winkelmand zien:

• Verzendkosten en levertijd, voor het land van de klant.
• Je retourbeleid, in één zin.
• De betaalmethoden die de klant kent.

In de eerste helft van 2026 rekenden Nederlanders 73% van hun online aankopen af met iDEAL|Wero (Thuiswinkel.org). Laat dat logo zien voordat iemand de checkout opent. Verkoop je ook in België, dan verwacht een klant daar Bancontact. Spreek per land af welke valuta, verzendopties en betaalmethoden je toont.

Laat klanten ook als gast bestellen. Een account aanmaken kan na de aankoop nog.

De checkout van Shopify kun je maar beperkt aanpassen. De pagina's ervoor heb je wel zelf in de hand. Leg de nadruk daarom op de productpagina en de winkelmand. Daar neem je de twijfel weg, voordat iemand gaat betalen.

6. Na de aankoop: werk naar de tweede bestelling

Na de aankoop sturen vaak meerdere tools berichten: een abonnementstool (zoals Firmhouse), een spaarprogramma (zoals Yotpo) en je e-mailtool (zoals Klaviyo). Spreek af welke tool welk bericht stuurt. Anders krijgt de klant twee bevestigingen, of geen. Een simpel overzicht in je briefing helpt:

• Orderbevestiging en verzendupdates: meestal Shopify zelf.
• Leveringen, pauzeren en opzeggen van een abonnement: je abonnementstool.
• Punten en beloningen: je spaarprogramma.
• Welkom, verlaten winkelwagen, opvolging na de aankoop en klanten terugwinnen: je e-mailtool.

Welke e-mailflows je opzet en in welke volgorde, lees je in mijn artikel over e-mailflows met Klaviyo en Shopify.

Bij een headless webshop let je op één ding extra. Je e-mailtool moet weten welke producten een klant bekijkt en in de winkelmand legt. Die gegevens stuurt de website niet vanzelf door, dus zet ze in de scope. Anders werkt een flow zoals de verlaten winkelwagen niet.

Beschrijf ook hoe een vaste klant opnieuw bestelt, bijvoorbeeld vanuit haar account of via een link in een mail. Dat is precies de zin uit het begin van dit artikel: dezelfde koffie, op haar telefoon, zonder te zoeken.

Laat je team zelf publiceren

In veel oude webshops moet een developer elke landingspagina maken. Het gevolg: campagnes wachten op een developer, of je team past zelf iets aan en het ontwerp breekt.

De oplossing is een set vaste bouwblokken in je huisstijl. Denk aan een blok voor een campagnebeeld, een rij producten, een verhaal of veelgestelde vragen. Je team kiest de blokken en vult ze, maar kan de vormgeving niet per ongeluk breken. Zet in je briefing:

• Welke pagina's je team zelf maakt, zoals campagnepagina's, landingspagina's per land en blogs.
• Welke bouwblokken daarvoor nodig zijn, en wat je per blok kunt aanpassen.
• Wie publiceert, en wat alleen een developer aanpast, zoals de checkout.
• Waar wat staat: productgegevens in Shopify, verhalen en campagnes in het CMS of de Shopify-editor.

Zo werkt het in de praktijk:

• Orangefit: het contentteam maakt en wijzigt zelf pagina's en campagnes, in een paar minuten.
• The Laundry Story: de redactie kiest producten uit een lijst in het CMS, in plaats van productcodes te kopiëren. Zo gaat er geen verkeerde koppeling live. Elke pagina is eerst te bekijken in een preview die eruitziet als de live site. Bij publiceren worden alleen de gewijzigde pagina's ververst, zodat een aanpassing snel online staat.
• Chunky Cherry Coffee: het team past alles aan in de Shopify-editor, zonder code.

Overstappen zonder je vindbaarheid te verliezen

Een nieuwe webshop betekent ook een migratie. Je hebt al posities in Google, klantaccounts en orderhistorie. Die wil je meenemen. De belangrijkste stappen:

• Maak een lijst van al je oude URL's: producten, collecties, blogs en landingspagina's. Haal ze uit je sitemap, Search Console en analytics.
• Koppel elke oude URL aan een nieuwe pagina. Shopify met een thema gebruikt vaste paden, zoals /products/ en /collections/. Je URL's veranderen dus bijna altijd. Bij headless kies je de paden zelf.
• Zet 301-redirects klaar voor de livegang, en controleer ze direct daarna.
• Neem je gegevens mee: producten, klanten, reviews en je e-maillijsten. Bepaal vooraf of en hoe je orderhistorie meegaat.
• Laat je vaste klanten weten wat er verandert. Wachtwoorden van klanten gaan niet mee naar Shopify, dus mail je vaste klanten bij de livegang hoe ze weer inloggen.
• Kies een rustig moment. Ga niet live vlak voor je drukste weken, zoals Black Friday.
• Kijk de eerste week elke dag in Search Console, en los fouten meteen op.

Alle stappen staan in mijn checklist voor een Shopify-migratie zonder SEO-verlies.

Toegankelijk bestellen

Sinds 28 juni 2025 geldt de European Accessibility Act en houdt de ACM toezicht op webshops. De ACM controleerde zo'n 100 grote Nederlandse webwinkels. Bij 61% kon je niet bestellen met hulpapparatuur, zoals een schermlezer (ACM).

De regels gelden volgens de ACM als je 10 of meer mensen in dienst hebt of meer dan 2 miljoen euro omzet per jaar draait (ACM). Een merk dat al verkoopt, valt daar dus vaak onder.

Zet in je briefing dat bestellen met alleen het toetsenbord en met een schermlezer moet lukken. Concreet betekent dat:

• Elke knop en elk veld is bereikbaar met de Tab-toets, en je ziet steeds waar je bent.
• Knoppen en velden hebben een naam die een schermlezer voorleest, ook knoppen met alleen een icoon, zoals de winkelmand.
• Meldingen worden voorgelezen, zoals bij de knop hierboven.
• Tekst heeft genoeg contrast, en afbeeldingen hebben een beschrijving.
• Ook apps doen mee. Een reviewwidget, chat of cookiemelding die je niet met het toetsenbord kunt sluiten, blokkeert de hele bestelling.

Het gangbare ijkpunt is WCAG 2.1 op niveau AA. Laat het controleren voor de lancering, en opnieuw als je nieuwe apps toevoegt.

Shopify: premium thema, eigen thema of headless?

Headless betekent hier: de website die je klant ziet, bouw ik los van Shopify, en Shopify regelt producten, voorraad en checkout.

Premium thema. Past je klantreis in een premium thema, dan is dat vaak genoeg. Je bent sneller live en hebt minder te onderhouden. Je merk valt wel minder op.

Eigen thema. Voor Chunky Cherry Coffee bouwde ik een eigen thema met flexibele secties, in het Nederlands en Engels. Het team beheert alles in de Shopify-editor. De 3D-koffiezakken geven het merk een eigen gezicht, binnen Shopify.

Headless. Het grote voordeel: alles is on-brand. Elke pagina, van campagne tot productpagina, volgt je eigen ontwerp en niet de grenzen van een thema. Alleen de checkout blijft van Shopify. Kies dit als je veel content hebt, in meerdere landen verkoopt of veel systemen koppelt. Bij Orangefit werken Shopify, het CMS (DatoCMS) en zoeken (Algolia) samen in één website. Wees er wel eerlijk over: headless is meer bouwwerk. Apps uit de Shopify App Store die iets op je pagina tonen, werken niet altijd vanzelf. Die moet je developer inbouwen.

Twijfel je? Begin dan met twee vragen. Waar komt je content vandaan, en in hoeveel landen verkoop je? Koppel je ook een ERP, kassasysteem of magazijn, zet dan in je briefing welk systeem leidend is voor voorraad, prijzen en orders.

Zoek je vooral een snelle, goedkope webshop, dan ben ik niet de juiste partij. Ik bouw webshops die je team zelf beheert, op Shopify en headless.

Zo werken we samen

• We beginnen met een gesprek. Ik wil weten waar je nu tegenaan loopt en wat de nieuwe webshop moet opleveren.
• Alles op papier. Je krijgt een voorstel met wat ik oplever, wanneer en voor welke vaste prijs. Is iets nog onzeker, dan staat dat er ook in.
• Je kijkt mee terwijl ik bouw. Ik werk in korte rondes en laat regelmatig zien waar ik sta. Feedback verwerk ik snel. Verandert de scope, dan bespreken we dat meteen, niet pas op de factuur.
• Ik ken de tools. Ik ben DatoCMS Agency Partner en Klaviyo Certified Partner.
• Ik blijf erbij. Een webshop is nooit af. Na de lancering houd ik je webshop bij, zonder duur contract: monitoring, bugfixes, Shopify-updates, het beheer van apps en een maandelijks rapport. Orangefit onderhoud ik nog steeds.

Voor het eerste gesprek helpt het als je dit bij de hand hebt. Niets hoeft af te zijn:

• De link naar je huidige webshop, en wat je eraan mist.
• Drie dingen die klanten bij jou moeten kunnen.
• De landen en talen waarin je verkoopt, nu en straks.
• De tools en apps die je gebruikt, zoals je e-mailtool, abonnementen of reviews.
• Wie in je team pagina's maakt en publiceert.
• Een datum die vaststaat, zoals een lancering of een drukke periode.

Hoe een project verder loopt, lees je in mijn werkwijze.

Veelgestelde vragen

Een nieuwe webshop laten maken voor je merk?

Vertel me wie je klanten zijn, waar je verkoopt en wat je team zelf wil kunnen. Na een kennismaking krijg je een schriftelijk voorstel met scope, planning en een vaste prijs. Zo weet je wat je krijgt voordat ik iets bouw. Plan een kennismaking over je webshop, mail naar info@petercoolen.com of bel +31 6 57 54 60 27.

Bronnen

• Thuiswinkel.org: Online aankopen in het buitenland blijven groeien, nu één op zeven (Thuiswinkel Markt Monitor, eerste helft 2026)
• Baymard Institute: 50 Cart Abandonment Rate Statistics 2026
• ACM: klant met beperking kan bij merendeel grote webwinkels niet terecht
• ACM: Accessibility of e-commerce services and electronic communications services
• web.dev: Interaction to Next Paint (INP)