Bannerformaten webshop: de praktische gids

Zoek je op bannerformaten webshop, dan krijg je eindeloze lijsten met pixelafmetingen die elkaar tegenspreken. De reden is simpel: de pixelmaat hangt af van je theme en van het scherm, terwijl de vorm bepaalt of een banner werkt of niet. Deze gids begint bij de vijf beeldverhoudingen die vrijwel elke e-commercebanner dekken, en laat daarna zien hoe je een verhouding omrekent naar pixels, hoeveel tekst elke vorm aankan en hoe je één campagne over al die vormen uitrolt.

Vorm	Beeldverhouding	Waar je hem gebruikt
Website-hero	16:9	Bovenaan je homepage of een landingspagina
Breed	2:1	Categorieheaders en e-mailheaders
Smal	3:1	Actiebalken en smalle headers
Vierkant	1:1	Feedposts en actietegels op marktplaatsen
Story	9:16	Instagram- en Facebook-stories, verticale advertenties

Waarom pixellijstjes elkaar tegenspreken

Elk theme toont zijn bannersecties op een eigen breedte, en elk scherm laat ze weer anders zien. Daarom raadt de ene gids een bepaalde pixelmaat aan voor een herobanner en de andere gids een totaal andere. Sommige lijstjes plakken er zelfs de verkeerde verhouding op: 2.048 × 1.024 pixels wordt vaak 16:9 genoemd, maar dat is 2:1. Een banner die voor de ene vorm is ontworpen en in de andere wordt geüpload, wordt bijgesneden.

Werk dus in deze volgorde: zoek uit welke verhouding de sectie in je theme gebruikt, ontwerp op die verhouding en exporteer daarna op de breedte die je theme aanraadt.

Van verhouding naar pixels

Zodra je de verhouding en de breedte weet, volgt de hoogte vanzelf. Deel de breedte door het eerste getal van de verhouding en vermenigvuldig met het tweede.

Verhouding	Voorbeeldbreedte	Hoogte
16:9	1.920 px	1.080 px
2:1	2.048 px	1.024 px
3:1	1.800 px	600 px
1:1	1.080 px	1.080 px
9:16	1.080 px	1.920 px

In de documentatie van je theme staat de aanbevolen breedte per sectie. De richtlijnen van Shopify zelf vermelden bijvoorbeeld dat afbeeldingen tot 5.000 × 5.000 px groot mogen zijn en onder de 20 MB moeten blijven, en dat geeft ruim voldoende ruimte voor scherpe banners.

Ontwerp op de vorm, snijd er niet naartoe

Een 16:9-hero en een 9:16-story zijn dezelfde campagne in twee totaal verschillende kaders. Eén ontwerp maken en dat naar de andere vorm bijsnijden, hakt bijna altijd de kop, het product of de knop eraf. Pixelmaten kun je schalen; een verhouding kun je niet veranderen zonder iets kwijt te raken. Bouw elke vorm apart op, met het product en de tekst op de plek die bij dat kader past.

Een tekstbudget per banner

Banners mislukken vaker door te veel tekst dan door te weinig. Een handig budget:

Element	Houd het rond de
Kop	60 tekens
Subkop	100 tekens
Ondersteunende tekst	180 tekens
Knoptekst	30 tekens

Op de korte vormen gebruik je minder. In een 3:1-balk past meestal alleen een kop en een knop, en verder niets. Een kop die prima werkt in een desktophero, kan in een smalle banner op een telefoon onleesbaar worden.

Veilige zones per vorm

• 16:9-hero: houd tekst weg bij de buitenranden, waar veel themes navigatie, pijltjes of overlays plaatsen, en controleer hoe de sectie op mobiel bijsnijdt.
• 2:1 en 3:1: houd product en tekst binnen de middelste band; deze banners worden vaak op een heel kleine hoogte getoond.
• 1:1: gecentreerde composities zijn het veiligst, omdat feeds en tegels een afgeronde of bijgesneden preview kunnen tonen.
• 9:16-story: houd boven- en onderkant vrij van de profielnaam, knoppen en reactiebalk van het platform, en zet het product in het middelste derde deel.

Stijl per doel

Doel	Passende stijl	Nadruk in de tekst
Een product lanceren	Clean of premium	Productnaam en één voordeel
Een actie promoten	Bold	De aanbieding in de kop
Een voordeel uitlichten	Lifestyle	Het voordeel, in gebruik getoond
Naamsbekendheid opbouwen	Premium	Weinig tekst, vaak geen knop

Waarom AI-tekst op banners misgaat

Banners die volledig als beeld worden gegenereerd, gaan vaak de mist in bij de tekst: letters die bijna een woord vormen, of een merknaam met één verkeerd teken. De betrouwbare aanpak is om het beeld zonder tekst te genereren en daarna de kop, subkop en knop er als echte tekst overheen te zetten. Wat je intypt, is dan precies wat er staat, in elke vorm.

Eén campagne over vijf vormen

Een productlancering dek je meestal af met één productfoto:

1. Schrijf de kop één keer, binnen het budget hierboven.
2. Maak de 16:9-hero voor de homepage.
3. Maak de 2:1-header voor de lanceermail.
4. Maak de 1:1-post en de 9:16-story voor social media.
5. Gebruik de 3:1-balk voor de categoriepagina of een actiebalk over de hele site.

Houd overal dezelfde kop en dezelfde knopkleur aan, zodat mensen de campagne herkennen waar ze hem ook tegenkomen.

De hele set uit één productfoto

De productbannermaker van Shoupapp werkt met een foto die al in je bibliotheek staat. Je kiest het doel (een product lanceren, een actie promoten, een voordeel uitlichten, naamsbekendheid opbouwen), het formaat en de stijl (clean, lifestyle, premium of bold, of laat de keuze over). Typ je eigen kop, of laat het veld leeg en de tekst wordt voor je geschreven in het Engels, Spaans, Duits, Frans, Italiaans, Portugees, Nederlands, Turks of Pools.

Elk formaat wordt op zijn eigen vorm opgebouwd, en de tekst wordt als echte tekst over het beeld gezet, dus de spelling klopt altijd. De knop is optioneel en neemt je merkkleur over; de kleur van het label wordt automatisch gekozen zodat het leesbaar blijft. Laat dezelfde foto één keer per gewenste vorm lopen. Elke banner wordt als nieuw bestand naast het origineel opgeslagen, klaar om te downloaden of om af te maken in de fotobewerker. Banners kunnen ook een stap zijn in een automatisering, zodat nieuwe producten er meteen een krijgen zodra hun foto binnenkomt.

Soorten banners in een webshop

Banner	Gebruikelijke vorm	Wat erin moet
Hero op de homepage	16:9 op desktop, op mobiel vaak hoger	Product, kop, knop
Header van een collectie of categorie	2:1 of 3:1	Naam van de collectie, één product of een textuur
E-mailheader	2:1	Aanbieding en één product; moet leesbaar zijn in het voorbeeldvenster
Actietegel	1:1	De aanbieding, groot
Story of verticale advertentie	9:16	Product in het midden, tekst in de veilige zone

Hero's voor desktop en mobiel

Veel themes tonen de hero op de homepage op telefoons in een andere vorm, vaak hoger dan 16:9, en snijden de desktopafbeelding bij. Kijk of je theme je een aparte mobiele afbeelding laat uploaden. Zo ja, maak die dan: dezelfde boodschap, opgebouwd voor een hoog kader. Zo nee, houd het product en de kop dan in het midden van de 16:9-banner, want daar overleven ze de crop.

Bestandsformaat en gewicht

Banners zijn meestal de grootste afbeeldingen op een pagina, dus ze hebben de meeste invloed op de laadtijd. Sla fotografische banners op als JPG of WebP; PNG-bestanden van dezelfde banner zijn veel groter. Exporteer op de breedte waarop je theme de banner toont, niet groter. Controleer de pagina daarna op een mobiele verbinding: verschijnt de hero duidelijk later dan de rest van de pagina, dan is het bestand te zwaar.

Vragen over banners

Wat is het beste bannerformaat voor een Shopify-winkel?

Dat hangt af van het theme en de sectie. Kijk in de documentatie van het theme voor de breedte en ontwerp op de verhouding die de sectie gebruikt.

Kan ik beter JPG, PNG of WebP gebruiken?

Voor fotografische banners houden JPG of WebP de bestanden klein. Gebruik PNG alleen als je transparantie nodig hebt.

Kan ik dezelfde banner in elk formaat hergebruiken?

Hergebruik de boodschap, niet het bestand. Bouw elke vorm apart op.