3.5 Homepage & categoriepaginas

Je homepage is geen catalogus en geen kunstwerk — het is een wegwijzer. In de eerste vijf seconden moet een bezoeker snappen wát je verkoopt, vóór wie het is en waarom hij het bij jou koopt. Categoriepagina’s zijn vervolgens de snelweg naar het product. Dit hoofdstuk laat zien hoe je beide inricht zodat ze leiden naar de koop.

Na dit hoofdstuk kun je:

Je kunt een waardepropositie in één zin schrijven en de vijf-seconden-test toepassen.
Je bouwt een hero met één primaire CTA en weet waarom carrousels en meerdere knoppen de doorklik verlagen.
Je richt een homepage in als verkeersverdeler met USP-balk, bestsellers, categorie-instappunten, social proof en opt-in.
Je weet wat wel en niet boven de vouw hoort, en plaatst de SEO-collectietekst onderaan een categoriepagina.
Je kunt homepage- en categoriepagina’s beoordelen met benchmarks zoals bounce rate en doorklikratio.

Kernconcepten

Waardepropositie — in één zin: wat verkoop je, voor wie, en waarom bij jou en niet bij de concurrent. Dit hoort bovenaan de homepage.

Hero — het eerste, bovenste blok van de homepage: een sterk beeld, je waardepropositie en een primaire CTA.

Above the fold — wat zichtbaar is zonder scrollen. Hier vallen de eerste indruk en de eerste klik.

USP-balk — een strook met drie tot vier kernbeloften (gratis verzending, 14 dagen retour, snelle levering, NL-voorraad) die vertrouwen geeft.

Categorie-instappunt — een visueel blok dat doorlinkt naar een categorie, zodat de homepage als verkeersverdeler werkt.

Categoriepagina (collectiepagina) — de pagina die alle producten binnen een categorie toont, met filters, sortering en productkaarten.

Productkaart — de tegel per product op een categoriepagina: foto, naam, prijs, sterren en soms een snelle “in winkelwagen”.

Collectiebeschrijving — een korte SEO-tekst boven of onder de productrijen die de categorie beschrijft en op brede zoektermen rankt.

Stap-voor-stap workflow: homepage

Schrijf je waardepropositie in één zin. “Handgemaakte leren tassen, levenslang te repareren, binnen 1 dag in huis.” Test of een vreemde in vijf seconden snapt wat je doet.
Bouw de hero: sterk beeld plus die zin plus één primaire CTA (“Shop de collectie” of “Bekijk bestsellers”). Eén knop, niet vijf.
Plaats direct onder de hero een USP-balk met je drie tot vier sterkste beloften.
Toon bestsellers of uitgelichte producten. Mensen kopen wat anderen kopen; geef je sterkste paarden de etalage.
Zet categorie-instappunten neer zodat bezoekers met een specifiek doel meteen de juiste afslag nemen.
Voeg social proof toe: sterrenscore, aantal tevreden klanten, bekende keurmerken of pers (zie 4.4 Trust & social proof).
Plaats een e-mail-opt-in met een concrete reden om in te schrijven (bijvoorbeeld 10 procent korting op de eerste bestelling). Dit voedt je owned channel (zie 8.2 Tooling & lijstopbouw).
Sluit af met een merkblok (kort “waarom wij”) en een nette footer met service- en juridische links.

Stap-voor-stap workflow: categoriepagina

Zet een korte, herkenbare collectie-intro bovenaan (één tot twee zinnen voor de bezoeker, plus een uitgebreidere SEO-tekst onderaan).
Toon overzichtelijke productkaarten: consistente foto, naam, prijs, sterren. Houd ze uniform — wisselende fotostijlen ogen rommelig.
Bied filters vanaf circa 15 producten: maat, kleur, prijs, beschikbaarheid.
Bied sortering: populariteit, prijs oplopend/aflopend, nieuw. Standaard op “populairste” of “bestsellers”.
Toon voorraad-/leverstatus op de kaart waar relevant (“Op voorraad”, “Nog 2”).
Voorkom lege filterresultaten: toon bij geen resultaat alternatieven in plaats van een doodlopend “geen producten gevonden”.
Plaats de SEO-collectiebeschrijving onderaan, zodat hij rankt maar de bezoeker eerst de producten ziet.

Wat hoort wel/niet boven de vouw

Boven de vouw (wel)	Onder de vouw (kan later)
Waardepropositie in één zin	Uitgebreid merkverhaal
Eén sterke primaire CTA	Blog-/contentblokken
Sterk hero-beeld	Lange social proof-galerij
Eventueel USP-balk	E-mail-opt-in (mag ook midden)
Hoofdnavigatie	Footer met juridische links

Voorbeeldwireframe (in tekst)

Homepage van een merk in handgemaakte leren tassen:

[NAVIGATIE]  Logo | Tassen | Accessoires | Over ons | Zoeken | Winkelwagen

[HERO]
Beeld: tas in gebruik, sfeervol.
Kop: "Handgemaakte leren tassen — levenslang te repareren."
Subkop: "Voor 22:00 besteld, morgen in huis. 14 dagen bedenktijd."
CTA: [Shop de collectie]

[USP-BALK]
Gratis verzending vanaf 75 euro | 14 dagen retour | Handgemaakt in NL | Levenslange reparatie

[BESTSELLERS]
4 productkaarten met foto, naam, prijs, sterren.

[CATEGORIE-INSTAPPUNTEN]
Tegels: "Schoudertassen" | "Laptoptassen" | "Accessoires"

[SOCIAL PROOF]
"4,8 uit 1.240 reviews" + 3 uitgelichte klantreviews met foto.

[E-MAIL-OPT-IN]
"10 procent korting op je eerste bestelling. Schrijf je in."

[MERKBLOK]
Kort verhaal: waarom wij, ambacht, garantie.

[FOOTER]
Klantenservice | Voorwaarden & privacy | Contact | Maatgids | Social

Categoriepagina “Schoudertassen”:

[INTRO] "Schoudertassen" + één zin.
[FILTERS] Kleur | Maat | Prijs | Beschikbaarheid     [SORTEREN] Populairste ▾
[PRODUCTRASTER] uniforme kaarten: foto, naam, prijs, sterren, "Op voorraad"
[SEO-TEKST onderaan] 2 tot 3 alinea's die de categorie beschrijven en op brede termen mikken.

Formules & benchmarks

Homepage-doorklikratio naar product/categorie:

Homepage-CTR = bezoekers die doorklikken naar een product- of categoriepagina / homepagebezoekers × 100

Een homepage die zijn werk doet, stuurt het overgrote deel van de bezoekers dieper de shop in. Een hoge bounce op de homepage betekent meestal een onduidelijke waardepropositie of een trage of rommelige hero.

Waarom is een mooiere, voller gevulde hero vaak juist slechter dan een kale?

De verleiding is groot om de hero vol te zetten: een carrousel met vijf boodschappen, drie knoppen, een achtergrondvideo. Het voelt als ‘meer waarde tonen’. In de praktijk werkt het averechts, en de cijfers laten zien waarom.

Stel: je homepage trekt 10.000 bezoekers per maand en je doorklik naar product of categorie zit op gemiddeld 55 procent. Elke extra knop in de hero splitst de aandacht. Bezoekers scannen above the fold in enkele seconden; zien ze vijf gelijkwaardige opties, dan kiezen velen er geen — verlamming door keuze. Een carrousel maakt het erger: onderzoek naar sliders laat keer op keer zien dat vrijwel alleen de eerste slide wordt bekeken, dus je beste boodschap op slide drie ziet bijna niemand.

Knip je terug naar één heldere zin plus één primaire CTA en til je de doorklik van 55 naar 65 procent, dan stuur je 1.000 extra bezoekers per maand dieper de shop in — zonder één euro extra advertentiegeld. De kale hero wint omdat hij de aandacht bundelt in plaats van versnippert.

Metric	Slecht	Gemiddeld	Goed
Bounce rate homepage	Meer dan 60 procent	40 tot 60 procent	Minder dan 40 procent
Doorklik naar product/categorie	Minder dan 50 procent	50 tot 70 procent	Meer dan 70 procent
Categoriepagina naar productpagina	Minder dan 30 procent	30 tot 50 procent	Meer dan 50 procent
E-mail-opt-in conversie (homepage)	Minder dan 1 procent	1 tot 3 procent	Meer dan 3 procent

Tools

Tool	Functie	Wanneer kiezen
Shopify Theme Editor / WP-themabuilder	Homepage en categorie visueel opbouwen	Standaard; geen losse tool nodig
Microsoft Clarity / Hotjar	Heatmaps en scroll-diepte op de homepage	Je wilt zien hoe ver mensen scrollen en waar ze klikken
Klaviyo / Omnisend	E-mail-opt-in pop-up en lijstopbouw	Je wilt de homepage je e-maillijst laten voeden
Searchanise / Boost (collectie-filters)	Filteren en sorteren op categoriepagina’s	Grote collecties die meer filterkracht nodig hebben
PageSpeed Insights	Hero- en homepagesnelheid meten	Controle dat je hero-beeld de pagina niet vertraagt

Veelgemaakte fouten

Onduidelijke waardepropositie. Een mooie hero zonder boodschap laat bezoekers raden — en weglopen.
Te veel CTA’s in de hero. Vijf knoppen is geen keuze maar verlamming. Eén primaire CTA.
Carrousels/sliders die niemand bekijkt. Bezoekers zien meestal alleen de eerste slide; zet je beste boodschap statisch neer.
Trage hero. Een zwaar achtergrondvideo of ongecomprimeerd beeld vertraagt juist de eerste indruk (zie 3.7 Snelheid & Core Web Vitals).
Geen bestsellers tonen. Je verstopt je sterkste verkopers in plaats van ze te etaleren.
Categoriepagina zonder filters of sortering bij een grote collectie: de bezoeker verdwaalt.
Lege filterresultaten zonder alternatief. Een doodlopend “geen producten” jaagt mensen weg.
SEO-tekst bovenaan de categoriepagina die de producten wegduwt. Zet hem onderaan.
Wisselende productfoto-stijlen op de categoriepagina: oogt onprofessioneel en verlaagt vertrouwen.

Checklist

Sjablonen

Homepage-hero-invuller

WAARDEPROPOSITIE (één zin):
[Wat] voor [wie], [waarom bij ons].

HERO-KOP: [korte, krachtige variant van de waardepropositie]
HERO-SUBKOP: [geruststelling: levertijd / retour / herkomst]
PRIMAIRE CTA: [Shop de collectie / Bekijk bestsellers]

USP-BALK (3 tot 4):
- [Belofte 1, bijv. gratis verzending vanaf bedrag]
- [Belofte 2, bijv. 14 dagen retour]
- [Belofte 3, bijv. snelle levering]
- [Belofte 4, optioneel]

E-MAIL-OPT-IN HAAK:
[Concrete reden, bijv. 10 procent korting op je eerste bestelling]

Oefen het zelf

Case: redt deze homepage zijn doorklik?

Een webshop in handgemaakte leren tassen krijgt 8.000 homepagebezoekers per maand. De huidige homepage heeft een hero-carrousel met vijf slides, drie knoppen above the fold en een autoplay-achtergrondvideo. De bounce rate op de homepage is 58 procent en de doorklik naar product of categorie zit op 48 procent.

De eigenaar twijfelt: de hero ziet er ‘rijk’ uit, dus waarom zou kaalslag helpen? Beoordeel de homepage aan de hand van de benchmarks uit dit hoofdstuk, benoem de drie grootste problemen, en schat in hoeveel extra doorklikkers een opgeruimde hero kan opleveren als je de doorklik naar het ‘goede’ niveau tilt.

Toon uitwerking

Stap 1 — Toets aan de benchmarks. Bounce 58 procent valt in de band 40 tot 60 procent (gemiddeld), maar tegen de bovengrens. Doorklik 48 procent zit onder de 50 procent: dat is ‘slecht’ volgens de tabel. De homepage doet zijn werk dus net niet.

Stap 2 — De drie grootste problemen.

De carrousel met vijf slides: vrijwel alleen de eerste slide wordt gezien, dus vier boodschappen zijn verspild en de echte waardepropositie raakt verstopt.
Drie knoppen above the fold: keuzeverlamming, geen duidelijke primaire CTA.
De autoplay-achtergrondvideo vertraagt de eerste indruk en kan above the fold zwaar laden — slecht voor de hero-snelheid.

Stap 3 — Reken de winst. Til je de doorklik van 48 naar het ‘goede’ niveau van meer dan 70 procent, neem voorzichtig 65 procent. Verschil: 65 min 48 is 17 procentpunt. Op 8.000 bezoekers is dat 0,17 keer 8.000 is 1.360 extra doorklikkers per maand — zonder extra advertentiebudget.

Oordeel: de homepage faalt op het belangrijkste punt (doorklik). Vervang de carrousel door één statische boodschap, houd één primaire CTA en vervang of comprimeer de video. De winst zit niet in ‘rijker’, maar in helderder.

Test jezelf

Snelle kennischeck — homepage & categoriepaginas

Waarom presteert een hero met één primaire CTA meestal beter dan een hero met vijf knoppen?
Waar hoort de uitgebreide SEO-collectietekst op een categoriepagina?
Wat is het belangrijkste doel van de vijf-seconden-test op je homepage?
Wat doe je het best bij een filtercombinatie die nul producten oplevert?

Samenvatting

Je homepage is een wegwijzer, geen catalogus: zet je waardepropositie in één zin bovenaan en doe de vijf-seconden-test.
Eén primaire CTA in de hero verslaat een carrousel met vijf slides en meerdere knoppen; sliders worden vrijwel alleen op de eerste slide bekeken.
Richt de homepage in als verkeersverdeler met USP-balk, bestsellers, categorie-instappunten, social proof en een e-mail-opt-in met concrete reden.
Streef naar meer dan 70 procent doorklik naar product of categorie en minder dan 40 procent bounce; onder 50 procent doorklik faalt je homepage op het belangrijkste punt.
Op categoriepagina’s: uniforme productkaarten, filters vanaf circa 15 producten, alternatieven bij lege filterresultaten en de SEO-tekst onderaan.

Lees verder

3.3 Store-structuur — de navigatie achter je instappunten
3.4 High-converting productpaginas — de bestemming van je homepage
4.4 Trust & social proof — vertrouwenssignalen plaatsen
5.1 Funnel-lekken — waar bezoekers afhaken
8.2 Tooling & lijstopbouw — je opt-in laten renderen