Checklist voor productpagina’s: waarom klanten afhaken

Checklist voor productpagina’s volgens Baymard en WebAIM: prijs, verzending en retour, foto’s, reviews, knop op mobiel, pop-ups, zoeken en toetsenbord.

FixReports-redactie12 min. leestijd

Klanten haken op een productpagina het vaakst af als ze de totale kosten niet kunnen achterhalen, de voorwaarden voor verzending en retourneren niet vinden, het product niet kunnen beoordelen aan de hand van foto’s en reviews, of de koopknop niet makkelijk kunnen bereiken en gebruiken, vooral op een telefoon. Ook pop-ups die de pagina afdekken, beleidspagina’s die moeilijk te vinden zijn, een zoekfunctie die eenvoudige vragen niet kan beantwoorden en bedieningselementen die niet met een toetsenbord werken, blokkeren aankopen. De cijfers hieronder komen uit brancheonderzoek van Baymard Institute en WebAIM, gebaseerd op grote steekproeven van sites en klanten; ze beschrijven veelvoorkomende patronen, geen voorspellingen voor één specifieke webshop.

De belangrijkste punten

  • In de enquête van Baymard uit 2026 onder 1.083 Amerikaanse volwassenen die in de afgelopen drie maanden online hadden gekocht, zei 40% dat ze een aankoop bij het afrekenen hadden afgebroken omdat extra kosten zoals verzending, belasting en toeslagen te hoog waren (Baymard Institute (opent in een nieuw tabblad)).
  • Uit de benchmark van Baymard voor productpagina’s bleek dat 67% van de toonaangevende e-commercesites geen schatting van de totale kosten bij het koopgedeelte geeft, en dat 44% het retourbeleid niet toont of ernaar linkt vanuit de belangrijkste productcontent (Baymard Institute (opent in een nieuw tabblad), bijgewerkt op 18 maart 2026).
  • In dezelfde benchmark had 62% van de mobiele sites een UX op de productpagina die “middelmatig” of slechter was.
  • WebAIM vond in februari 2026 WCAG-fouten op 95,9% van de homepages van de top 1 miljoen websites (WebAIM (opent in een nieuw tabblad)).
  • In een beoordeling door Baymard uit 2021 van 33 e-commercesites met de hoogste omzet had 45% functionaliteit die niet met een toetsenbord te bedienen was (Baymard Institute (opent in een nieuw tabblad)).

Waarom breken klanten een aankoop af?

Het meest gegeven antwoord is dat klanten alleen aan het rondkijken waren; daarna volgen extra kosten, trage levering, weinig vertrouwen in de omgang met creditcardgegevens en het verplicht aanmaken van een account.

De pagina van Baymard over het afbreken van aankopen noemt een gemiddeld gedocumenteerd percentage afgebroken winkelwagens van 70,22%, berekend op basis van 50 onderzoeken (pagina laatst bijgewerkt op 22 september 2025). De grafiek met redenen, aangeduid als gegevens uit 2026, komt uit een enquête onder 1.083 Amerikaanse volwassenen die in de voorgaande drie maanden online hadden gekocht. Respondenten konden meer dan één reden kiezen (Baymard Institute (opent in een nieuw tabblad), stand oktober 2026):

Reden om een online aankoop bij het afrekenen af te brekenAandeel van de respondenten
Ik keek alleen rond / was nog niet klaar om te kopen42%
Extra kosten te hoog (verzending, belasting, toeslagen)40%
De levering duurde te lang20%
Ik vertrouwde de site mijn creditcardgegevens niet toe19%
De site wilde dat ik een account aanmaakte18%
Te lang of ingewikkeld afrekenproces17%
De website had fouten of liep vast17%
Het retourbeleid was niet naar tevredenheid13%
Ik kon de totale kosten van de bestelling niet vooraf zien of berekenen12%
De creditcard werd geweigerd10%
Er waren niet genoeg betaalmethoden9%

Dit zijn resultaten van een Amerikaanse enquête over het afrekenen, geen metingen van jouw webshop. Verschillende redenen beginnen al eerder, op de productpagina, waar klanten voor het eerst de prijs, de leveringsvoorwaarden en de retourvoorwaarden zien. Alleen je eigen statistieken kunnen laten zien welke voor jou belangrijk zijn.

Is de volledige prijs duidelijk op de productpagina?

De huidige prijs, een eventuele oorspronkelijke prijs, wat wel of niet is inbegrepen en een schatting van de verzendkosten horen allemaal naast de koopknop te staan.

Uit de benchmark van Baymard voor productpagina’s uit 2026 bleek dat 67% van de sites geen schatting van de “totale kosten van de bestelling” bij het koopgedeelte geeft, en dat 81% geen prijs per eenheid toont voor producten die in verschillende hoeveelheden of maten worden verkocht (Baymard Institute (opent in een nieuw tabblad)). Controleer of de pagina het volgende toont:

  • De huidige prijs en, bij artikelen in de aanbieding, de oorspronkelijke prijs.
  • Een prijs per eenheid voor producten die in meerdere maten worden verkocht.
  • Of btw of invoerrechten zijn inbegrepen.
  • De verzendkosten, of het bestelbedrag waarboven verzending gratis is.

Shopify: in het thema Dawn voegt het prijsblok “Taxes included.” (inclusief belastingen) en een link “Shipping calculated at checkout.” (verzendkosten worden bij het afrekenen berekend) toe als die instellingen en een verzendbeleid bestaan (broncode van Dawn (opent in een nieuw tabblad)). Dat klopt, maar het is geen schatting. Zet je werkelijke tarieven of de drempel voor gratis verzending daarom in een tekstblok.

WooCommerce: de opties “Enable the shipping calculator on the cart page” (verzendcalculator op de winkelwagenpagina inschakelen) en “Hide shipping costs until an address is entered” (verzendkosten verbergen tot er een adres is ingevuld) onder WooCommerce > Settings > Shipping gelden voor de winkelwagen en de checkout, niet voor de productpagina (broncode van WooCommerce (opent in een nieuw tabblad)). Zet de tarieven in de producttemplate of in de korte beschrijving.

Vinden klanten informatie over verzending en retourneren voordat ze iets in de winkelwagen leggen?

Zet een korte samenvatting van de levertijd, de verzendkosten en de retourtermijn bij de koopknop, met een link naar het volledige beleid.

In de Consideration & Purchase Behavior-enquête van Baymard onder 1.032 respondenten zei 60% dat ze op de productpagina naar informatie over het retourbeleid zoeken, terwijl 44% van de onderzochte sites die informatie niet toont of ernaar linkt vanuit de belangrijkste productcontent (Baymard Institute (opent in een nieuw tabblad)). In de hierboven genoemde enquête uit 2026 over afgebroken aankopen noemde 20% een trage levering en 13% een onbevredigend retourbeleid.

<details class="product-policy">
  <summary>Shipping and returns</summary>
  <p>Ships in 1 to 2 business days. Free shipping on orders over $75.</p>
  <p>Free returns within 30 days. <a href="{{ shop.refund_policy.url }}">Read the return policy</a></p>
</details>

Shopify: schrijf je beleid onder Settings > Policies (Shopify Help Center (opent in een nieuw tabblad)). In Dawn kan een blok Collapsible row (inklapbare rij) op de productpagina tekst of de inhoud van een pagina tonen (broncode van Dawn (opent in een nieuw tabblad)), zodat één pagina over verzending en retourneren bij elk product kan verschijnen.

WooCommerce: WooCommerce maakt een pagina “Refund and Returns Policy” aan als concept (broncode van WooCommerce (opent in een nieuw tabblad)). Die blijft ongepubliceerd tot je haar bewerkt en publiceert.

Beantwoorden de productfoto’s de vragen van klanten?

Foto’s moeten het product vanuit verschillende hoeken laten zien, op schaal en in gebruik, omdat veel klanten de maat en pasvorm beoordelen aan de hand van foto’s in plaats van de specificaties.

Uit de tests van Baymard bleek dat 42% van de gebruikers de afmetingen van een product probeert af te leiden uit de foto’s, terwijl 37% van de onderzochte sites geen foto “op schaal” biedt waarop het product naast een persoon of een bekend voorwerp te zien is. En 23% biedt geen foto met een model, wat vooral belangrijk is bij kleding, accessoires en cosmetica (Baymard Institute (opent in een nieuw tabblad)).

Controleer ook of de galerij naar de juiste foto overschakelt als er een kleur wordt gekozen, of zoomen werkt op telefoons, en of elke afbeelding een alt-tekst heeft die beschrijft wat die weergave laat zien, zoals “Linnen overhemd, achteraanzicht”.

Zijn reviews makkelijk te vinden en te vertrouwen?

Toon de gemiddelde beoordeling en het aantal reviews bij de producttitel, link die naar alle reviews en reageer op negatieve reviews.

Baymard ontdekte dat 89% van de onderzochte sites niet reageert op negatieve reviews, en dat 63% klanten niet van de foto’s van de ene reviewer naar die van de volgende laat bladeren (Baymard Institute (opent in een nieuw tabblad)). Reviewwidgets die laat laden, kunnen bovendien de pagina omlaag duwen, dus reserveer er ruimte voor.

Shopify: het blok Product rating (productbeoordeling) van Dawn toont sterren uit een review-app, en het thema vermeldt dat daar een app voor nodig is (broncode van Dawn (opent in een nieuw tabblad)).

WooCommerce: onder WooCommerce > Settings > Products vind je bij de reviewopties onder meer “Enable product reviews” (productreviews inschakelen), “Show ‘verified owner’ label on customer reviews” (label “geverifieerde eigenaar” tonen bij klantreviews), “Reviews can only be left by ‘verified owners’” (alleen geverifieerde eigenaren kunnen reviews plaatsen) en “Enable star rating on reviews” (sterrenbeoordeling bij reviews inschakelen) (broncode van WooCommerce (opent in een nieuw tabblad)).

Is de knop “In winkelwagen” op een telefoon makkelijk te bereiken en aan te tikken?

Op een telefoon moeten klanten zonder zoeken de prijs kunnen zien, een variant kunnen kiezen en op “In winkelwagen” kunnen tikken, met bedieningselementen die groot genoeg zijn om te raken.

In de benchmark van Baymard uit 2026 had 52% van de desktopsites en 62% van de mobiele sites een UX op de productpagina die “middelmatig” of slechter was, en gebruikte 57% van de sites geen knoppen voor de maatkeuze, waardoor de maten verstopt zaten in dropdownmenu’s (Baymard Institute (opent in een nieuw tabblad)).

Open een productpagina op een echte telefoon en controleer:

  • Eerste scherm. In een gestapelde lay-out op de telefoon komt de galerij vaak eerst, dus een hoge foto kan de titel, de prijs en de knop onder het eerste scherm duwen.
  • Sticky koopbalken. Gebruik je er een, dan mag die gefocuste elementen niet afdekken. De samenvatting van het W3C van WCAG 2.2-criterium 2.4.11 (niveau AA) gebruikt een sticky footer die gefocuste elementen verbergt als voorbeeld (W3C (opent in een nieuw tabblad)).
  • Tikdoelen. WCAG 2.5.8 (niveau AA) stelt een minimum van 24 bij 24 CSS-pixels, met uitzonderingen (W3C (opent in een nieuw tabblad)); de themarichtlijnen van Shopify adviseren op mobiel minstens 48 bij 48 pixels (Shopify (opent in een nieuw tabblad)).
  • Horizontaal scrollen. WCAG 1.4.10 Reflow vereist dat content werkt bij een breedte van 320 CSS-pixels zonder dat je in twee richtingen hoeft te scrollen (W3C (opent in een nieuw tabblad)). Brede maattabellen en vergelijkingstabellen zijn veelvoorkomende boosdoeners.

Staan pop-ups het kopen in de weg?

Pop-ups die de productpagina meteen bij binnenkomst afdekken, verbergen de informatie waarvoor klanten kwamen. Kies dus liever voor kleine banners en beperk het aantal verzoeken om je aan te melden.

De richtlijnen van Google Search Central omschrijven opdringerige interstitials en dialoogvensters als elementen die het zicht op de content belemmeren, en raden kleine banners aan in plaats van overlays over de hele pagina (Google Search Central (opent in een nieuw tabblad)). Shopify merkt op dat pop-upcontent ook lay-outverschuivingen kan veroorzaken (Shopify Help Center (opent in een nieuw tabblad)). Elk dialoogvenster dat je houdt, moet met het toetsenbord te sluiten zijn; WCAG 2.1.2 No Keyboard Trap (niveau A) vereist dat de focus een onderdeel kan verlaten met alleen het toetsenbord (W3C (opent in een nieuw tabblad)).

Vinden klanten je pagina’s over vertrouwen en beleid?

Link vanuit de footer van elke pagina naar je pagina’s over terugbetalingen, verzending, privacy, voorwaarden en contact.

In de enquête van Baymard uit 2026 zei 19% van de respondenten dat ze een aankoop hadden afgebroken omdat ze de site hun kaartgegevens niet toevertrouwden. Duidelijk beleid en duidelijke contactgegevens zijn basissignalen dat een webshop betrouwbaar is.

Shopify: zodra je beleid toevoegt onder Settings > Policies, linkt Shopify er automatisch naar in de footer van de checkout; om het in de webshop te tonen, voeg je het toe aan een menu onder Content > Menus (Shopify Help Center (opent in een nieuw tabblad)) of zet je de footerinstelling Policy links (beleidslinks) van Dawn aan.

WooCommerce: publiceer de conceptpagina over terugbetalingen en voeg daarna je beleids- en contactpagina’s toe aan de footer.

Vindt de zoekfunctie producten en antwoorden?

De zoekfunctie moet de juiste producten tonen bij productnamen, tikfouten en synoniemen, en moet ook vragen als “retourneren” of “verzending” kunnen beantwoorden.

De zoekbenchmark van Baymard uit 2026 van meer dan 170 sites en apps beoordeelde 46% van de desktopervaringen, 58% van de mobiele ervaringen en 64% van de app-ervaringen als “middelmatig” of slechter, en vond op 66% van de sites problemen met zoekopdrachten die niet over producten gaan, zoals een zoekopdracht naar het retourbeleid die producten oplevert (Baymard Institute (opent in een nieuw tabblad), bijgewerkt op 29 april 2026).

Test je webshop met de naam van een bestseller, een verkeerd gespelde versie daarvan, een categoriewoord en “retourneren”. In Shopify levert de zoekfunctie van de webwinkel producten, blogposts en pagina’s op, met voorspellend zoeken en tolerantie voor tikfouten standaard ingeschakeld, en de app Search & Discovery voegt filters en het boosten van producten toe (Shopify Help Center (opent in een nieuw tabblad)). Een gewone pagina die verzending en retourneren samenvat, kan bij die zoekopdrachten dus verschijnen.

Kan iemand kopen met alleen een toetsenbord?

Elke stap, van het kiezen van een variant tot het bereiken van de checkout, moet werken met alleen het toetsenbord, met een zichtbare focusindicator.

WCAG 2.2 vereist dat alle functionaliteit met een toetsenbord werkt (2.1.1, niveau A), dat er geen toetsenbordvallen zijn (2.1.2, niveau A), dat er een zichtbare focusindicator is (2.4.7, niveau AA) en dat gefocuste elementen niet volledig door andere content worden verborgen (2.4.11, niveau AA) (W3C (opent in een nieuw tabblad)). Deze basis ontbreekt vaak. Uit de beoordeling door Baymard uit 2021 van 33 sites met de hoogste omzet bleek dat 45% functionaliteit had die niet met het toetsenbord te bedienen was, en dat 48% de focusindicator niet altijd zichtbaar hield (Baymard Institute (opent in een nieuw tabblad)). De scan van WebAIM van februari 2026 vond gemiddeld 56,1 gedetecteerde fouten per homepage, en 71,0 bij sites in de categorie Shopping (WebAIM (opent in een nieuw tabblad)).

Een test van vijf minuten:

  1. Laad een productpagina en druk op Tab zonder de muis aan te raken.
  2. Controleer of je altijd kunt zien waar de focus is.
  3. Kies een maat en een kleur, en wijzig het aantal.
  4. Druk op “In winkelwagen” en controleer of de focus naar de winkelwagenlade gaat en of die met het toetsenbord te sluiten is.
  5. Bereik de afrekenknop.
/* A visible focus style for keyboard users */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

Een gratis scan controleert veel van deze punten in ongeveer een minuut. Het Conversierapport zet paginacontroles, zoals de zichtbaarheid van de prijs, “In winkelwagen” op telefoons, informatie over verzending en retourneren, pop-ups, beleidslinks in de footer, zoeken, het aankooppad met het toetsenbord en horizontaal scrollen, om in aanbevelingen met prioriteiten. Het is gebaseerd op paginacontroles, niet op je verkoopcijfers, en geeft geen garantie op meer verkoop.

Veelgestelde vragen

Wat is de meest voorkomende reden waarom klanten een aankoop afbreken?

In de enquête van Baymard uit 2026 onder 1.083 Amerikaanse volwassenen was het meest gegeven antwoord “alleen aan het rondkijken” (42%). Van de overige redenen stonden extra kosten zoals verzending, belasting en toeslagen bovenaan met 40%, vóór trage levering met 20%.

Verhoogt het oplossen van deze problemen mijn conversieratio?

Dat kan niemand beloven. Het onderzoek beschrijft barrières die veel voorkomen in grote steekproeven van sites en klanten; of het wegnemen ervan jouw resultaten verandert, hangt af van je producten, prijzen en verkeer. Meet dus vóór en na elke wijziging.

Waar hoort informatie over verzending en retourneren op een productpagina?

Bij de prijs en de koopknop, als korte samenvatting met een link naar het volledige beleid. In het onderzoek van Baymard zei 60% van de respondenten dat ze op de productpagina naar informatie over het retourbeleid zoeken.

Moet de knop “In winkelwagen” op telefoons zichtbaar zijn zonder te scrollen?

Geen enkele regel vereist dat, maar klanten moeten de prijs snel kunnen zien en de knop snel kunnen bereiken. Een sticky koopbalk is een optie, zolang die geen gefocuste elementen of andere content verbergt.

Hoort toegankelijkheid bij conversie?

Ja, heel eenvoudig: een klant die de variantkiezer of de knop “In winkelwagen” niet met een toetsenbord of schermlezer kan bedienen, kan niet kopen. WCAG 2.2 niveau AA dekt deze basis af.

Bronnen

Alle handleidingen