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.

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.

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]

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