Webshop homepage ontwerpen: blauwdruk per sectie

Een blauwdruk voor het ontwerp van je webshop-homepage per sectie: wat boven de vouw hoort, de volgorde, een checklist voor de lancering en tips voor mobiel.

Veelgestelde vragen

Wat moet er op de homepage van een webshop staan?

Minimaal: een header met zoekfunctie, winkelwagen en categorienavigatie; een hero die duidelijk maakt wat je verkoopt en één heldere vervolgstap biedt; een ingang naar je belangrijkste categorieën; een paar bestsellers of nieuwe producten; vertrouwenssignalen zoals verzending, retourneren en echte reviews; en een footer met voorwaarden en contactgegevens. Al het andere (redactionele blokken, nieuwsbriefinschrijving, social proof) is optioneel en moet zijn plek verdienen.

Wat hoort er boven de vouw op de homepage van een webshop?

Vier dingen: navigatie met zoekfunctie en winkelwagen, een kop die zegt wat je verkoopt, één primaire call-to-action die naar producten leidt en één zichtbare reden om de winkel te vertrouwen, zoals een regel over verzending of retourneren. Sterke productbeelden in de hero helpen bezoekers het assortiment te begrijpen zonder iets te hoeven lezen.

Hoeveel producten moet ik op de homepage tonen?

Er is geen vast aantal. Toon genoeg om het assortiment te vertegenwoordigen, meestal één rij of raster met bestsellers zonder carrousel, plus categorietegels, en verwijs daarna door naar de volledige collectie. Verkoop je maar een handvol producten, dan kun je ze allemaal tonen. Verkoop je er duizenden, dan moet de homepage mensen naar categorieën leiden in plaats van de hele catalogus te willen laten zien.

Moet een webshop-homepage een slider of carrousel hebben?

Eén statische hero is meestal duidelijker dan een roterende. Automatisch wisselende slides verbergen inhoud achter een timer, zijn lastiger toegankelijk te maken en maken de pagina vaak zwaarder. Wil je meerdere dingen promoten, geef ze dan elk een eigen tegel onder de hero.

Hoe laad ik de homepage van mijn webshop sneller?

Comprimeer afbeeldingen en geef ze de juiste afmetingen, gebruik moderne formaten zoals WebP of AVIF, laad de hero-afbeelding met prioriteit en gebruik lazy loading voor alles eronder, beperk scripts van derden (chatwidgets, pop-ups, tracking) en reserveer ruimte voor afbeeldingen zodat de layout niet verspringt tijdens het laden. PageSpeed Insights van Google en het Core Web Vitals-rapport in Search Console laten zien wat er op jouw pagina echt traag is.

Is de homepage of de productpagina belangrijker?

Product- en collectiepagina's zijn waar de meeste aankoopbeslissingen vallen, maar de homepage is vaak de eerste indruk voor directe, merkgerichte en terugkerende bezoekers. De taak ervan is routeren: elke bezoeker snel naar de juiste categorie of het juiste product brengen. Kijk in je eigen analytics hoeveel sessies op de homepage beginnen voordat je bepaalt waar je in investeert.

Kort antwoord: Een goede homepage voor een webshop heeft één taak: elke bezoeker snel bij de juiste producten brengen. Zet een duidelijke header (zoeken, winkelwagen, categorieën), een hero die zegt wat je verkoopt met één primaire knop, categorietegels, een korte rij bestsellers, vertrouwenssignalen (verzending, retourneren, reviews) en een bruikbare footer in die volgorde onder elkaar. Alles boven de vouw moet antwoord geven op: "wat voor winkel is dit, en waar klik ik?"

De blauwdruk in één oogopslag

Gebruik dit als startvolgorde. Laat secties weg die je niet met echte inhoud kunt vullen; een leeg blok "klantervaringen" doet meer kwaad dan helemaal geen blok.

#	Sectie	Taak	Houd het bij
1	Aankondigingsbalk	Eén actueel bericht: gratis-verzenddrempel, einde van een actie, uiterste bestelmoment	Eén regel
2	Header en navigatie	Zoeken, winkelwagen, account, hoofdcategorieën	5-7 links op het hoogste niveau
3	Hero	Zeg wat je verkoopt, geef één vervolgstap	Eén kop, één knop
4	Vertrouwensbalk	Verzending, retourneren, betaling, support	3-4 korte punten
5	Categorietegels	Leid shoppers naar wat ze zoeken	4-8 tegels
6	Bestsellers / nieuw binnen	Laat zien dat het assortiment echt is	Eén rij of raster
7	Waarde- of verhaalblok	Waarom jij en niet een andere winkel	Eén kort blok
8	Social proof	Echte reviews, pers, klantfoto's	Alleen als het echt is
9	Nieuwsbriefinschrijving	Bezoekers vangen die nog niet willen kopen	Eén veld
10	Footer	Voorwaarden, contact, overige links	Overzichtelijke kolommen

Wat hoort er boven de vouw

"Boven de vouw" is alles wat een bezoeker ziet voordat hij scrolt, en dat verschilt per apparaat. Ontwerp apart voor een laptopscherm en voor een telefoon, in plaats van één lijn op een mockup. Welk apparaat ook, deze vier dingen moeten zichtbaar zijn zonder te scrollen:

Navigatie met zoekfunctie en winkelwagen. Shoppers die weten wat ze willen, gebruiken eerst de zoekfunctie. Verstop die op desktop niet achter een icoon.
Een kop die het product noemt. "Handgemaakte keramische mokken, verzonden vanuit Portland" wint van "Welkom in onze winkel." Noem de categorie in gewone woorden.
Eén primaire call-to-action. "Shop mokken" of "Bekijk nieuw binnen." Een tweede, rustigere link is prima; drie even grote knoppen niet.
Eén reden om je te vertrouwen. Een gratis-verzenddrempel, een retourtermijn of een aantal reviews dat je echt kunt onderbouwen. Gebruik alleen claims die je kunt bewijzen.

Gebruik een echte product- of sfeerfoto in de hero, geen stockfoto die bij elke winkel zou kunnen horen. De afbeelding is de snelste manier voor een bezoeker om te bevestigen dat hij op de juiste plek is.

Notities per sectie

Header en navigatie

Houd de hoofdcategorieën beperkt tot wat een nieuwe bezoeker zou zoeken, in de woorden die hij zelf gebruikt. Zet de zoekfunctie in een zichtbaar veld, houd de teller van de winkelwagen actueel en laat het logo naar de homepage linken. Heb je een grote catalogus, dan kan een megamenu werken, maar test of het bruikbaar is met een trackpad en met het toetsenbord. Meer richtlijnen voor de rest van de winkel vind je in onze best practices voor het ontwerp van een webshop.

Hero

De hero heeft één boodschap. Draai je een seizoensactie, maak die dan de hero zolang ze loopt en ga daarna terug naar je tijdloze boodschap. Vermijd automatisch wisselende slides: ze verbergen inhoud achter een timer en zijn lastiger toegankelijk te maken. Heb je meerdere campagnes, geef ze dan elk een eigen tegel lager op de pagina.

Categorietegels

Dit is het werkpaard van de pagina. Elke tegel heeft een duidelijke foto en een eenvoudig label ("Hardloopschoenen voor dames", niet "Stride Collection"). Sorteer ze op wat je het liefst verkoopt of waar bezoekers het meest om vragen, niet alfabetisch.

Bestsellers en nieuw binnen

Toon echte producten met echte prijzen, geen generiek raster. Elke kaart heeft een afbeelding, naam, prijs en link; voeg beoordelingen alleen toe als je echte reviews hebt. Houd de beeldverhoudingen gelijk zodat het raster netjes oogt. Sluit de rij af met een link "Alles bekijken" naar de collectiepagina.

Vertrouwen en social proof

Shoppers aarzelen over verzendkosten, retourneren en of de winkel betrouwbaar is. Beantwoord dat op de homepage in korte, concrete regels: levertijden, retourtermijn, geaccepteerde betaalmethoden en een contactmogelijkheid. Toon bij reviews echte beoordelingen, met naam of een label "geverifieerd" voor zover je platform dat ondersteunt. Verzin nooit klantervaringen of beoordelingen; dat is zowel onethisch als op veel plaatsen in strijd met de consumentenwetgeving.

Footer

In de footer zoeken zorgvuldige shoppers naar de voorwaarden. Neem verzending, retourneren, privacy, algemene voorwaarden en contact op, plus een link naar je maattabel of FAQ als je die hebt. Indelingen behandelen we in voorbeelden van footerontwerp.

Tips voor mobiel

De meeste winkels zien een groot deel van hun bezoek op telefoons, dus bekijk in je eigen analytics hoe de verdeling is. Ontwerp de mobiele homepage als een eigen layout, niet als een samengeperste desktoppagina.

Houd de hero kort. Kop, afbeelding en knop moeten op een gangbaar telefoonscherm allemaal zichtbaar zijn zonder voorbij de header te scrollen.
Maak tikdoelen ruim. Knoppen, filters en menu-items hebben genoeg grootte en tussenruimte nodig voor duimen. Test op een echt toestel.
Klap de navigatie slim in. Een menu-icoon is prima, maar houd zoeken en winkelwagen zichtbaar in de headerbalk.
Gebruik horizontaal scrollen spaarzaam. Een productrij die zijwaarts scrolt is acceptabel als die zichtbaar laat zien dat er meer komt; een gestapeld raster is veiliger.
Vermijd schermvullende pop-ups bij aankomst. Ze blokkeren de pagina en kunnen zowel de bruikbaarheid als de vindbaarheid schaden. Stel ze uit of vervang ze door een inline inschrijfblok.
Let op het toetsenbord. Zorg dat het e-mailveld voor de nieuwsbrief niet verborgen raakt als het schermtoetsenbord opent.

Basis voor snelheid en toegankelijkheid

Een prachtige homepage die langzaam laadt, verliest bezoekers voordat ze hem zien. De grootste hefbomen zijn bijna altijd afbeeldingen en scripts van derden.

Comprimeer afbeeldingen en gebruik moderne formaten zoals WebP of AVIF.
Geef afbeeldingen een expliciete breedte en hoogte zodat de layout niet verspringt tijdens het laden.
Laad de hero-afbeelding als eerste; gebruik lazy loading voor afbeeldingen daaronder.
Controleer elk script van derden (chat, pop-ups, trackers) en verwijder wat je niet gebruikt.
Schrijf echte alt-teksten voor product- en categorieafbeeldingen.
Controleer of tekst voldoende contrast heeft met de achtergrond en of elk interactief element met het toetsenbord werkt.

Gebruik PageSpeed Insights van Google op je live URL om te zien welke bestanden je pagina specifiek vertragen.

Homepagechecklist

Kopieer dit naar je lanceringsnotities:

[ ] Header heeft zichtbare zoekfunctie, winkelwagen en 5-7 duidelijke categorielinks
[ ] De kop van de hero zegt in gewone woorden wat we verkopen
[ ] Eén primaire knop; die leidt naar producten, niet naar een pagina "Over ons"
[ ] Hero-afbeelding toont een echt product of echt gebruik
[ ] Verzending en retourneren samengevat boven of net onder de vouw
[ ] Categorietegels gebruiken de taal van de klant en dekken de hoofdassortimenten
[ ] Bestsellers tonen echte prijzen en linken naar productpagina's
[ ] Reviews en pers alleen getoond als ze echt zijn
[ ] Nieuwsbriefinschrijving is één veld met een duidelijk voordeel
[ ] Footer bevat voorwaarden, contactgegevens en betaalmethoden
[ ] Geen automatische carrousel die belangrijke inhoud verbergt
[ ] Mobiele layout gecontroleerd op een echte telefoon
[ ] Afbeeldingen gecomprimeerd, op maat gemaakt en voorzien van alt-tekst
[ ] Paginatitel en metabeschrijving specifiek voor de homepage geschreven

Veelgemaakte fouten

Alles willen tonen. De homepage is een router, geen catalogus.
Vage hero-tekst. Als een vreemde in vijf seconden niet ziet wat je verkoopt, herschrijf dan de kop.
Vijf dingen even hard promoten. Als alles wordt uitgelicht, valt niets meer op.
Nep-urgentie. Aftelklokken die bij elk bezoek opnieuw beginnen, ondermijnen het vertrouwen.
Terugkerende bezoekers negeren. Overweeg een blok "verder winkelen" of "recent bekeken" als je platform dat ondersteunt.

Voor bredere homepageprincipes buiten ecommerce gaan onze gidsen over hoe je een homepage ontwerpt en het ontwerpen van een website-homepage dieper in. Kies je nog een platform? Bekijk dan de beste websitebuilders voor ecommerce.

In de praktijk brengen

Begin met het schrijven van de inhoud voordat je gaat ontwerpen: je kop, je categorienamen, je regels over verzending en retourneren en je zes beste producten. Plaats ze daarna in de volgorde hierboven. Wil je een voorsprong op de layout, dan kun je met het gratis abonnement van We.Inc tot drie sites publiceren vanuit kant-en-klare templates; de AI-builder die op basis van een prompt een site opzet, begint bij het Starter-abonnement voor $20 per maand. Je kunt je hier aanmelden. Welke tool je ook gebruikt, loop elke sectie langs de checklist voordat je live gaat.

Gratis beginnen · Geen creditcard nodig

Umair Ali Sadaqat

Oprichter van We.Inc

Umair is de oprichter van We.Inc. Hij schrijft over websites bouwen met AI, bureaus en de bedrijfsvoering van een webstudio.

Klaar om iets moois te bouwen?

Sluit je aan bij 15,000+ bedrijven die We.Inc gebruiken om te lanceren, te groeien en te automatiseren, allemaal vanuit één platform.