Shopify Hero-afbeelding Best Practices (Gids 2026)

Het eerste wat een bezoeker ziet in je Shopify-winkel is niet een productpagina — het is de homepage-hero. Die ene banner bepaalt de toon, de prijsperceptie en of iemand überhaupt verder scrolt. Dat maakt de Shopify hero-afbeelding het visueel met de grootste impact op je hele site. Doe je het verkeerd, dan verlies je bezoekers binnen twee seconden; doe je het goed, dan werkt elke pagina erna harder.

Deze gids behandelt de hero-specifieke zaken die echt het verschil maken: ideale afmetingen en beeldverhoudingen, hoe de afbeelding wordt bijgesneden op mobiel, enkele hero versus slideshow, leesbare tekst en de bestandsgroottekeuzes die je homepage snel houden.

Hero-afmetingen en beeldverhoudingen

Een hero verschilt van een productfoto. Productafbeeldingen zijn vierkant of 4:5 en staan netjes in een raster; de hero is volledige breedte, van rand tot rand over de viewport. Die breedte is precies wat het lastig maakt — een desktopbrowser kan 1440 px breed zijn terwijl een telefoon slechts 390 px heeft, en één afbeelding moet beide formaten aankunnen.

Dit is wat je uploadt voor een volledige-breedte homepage-hero:

Een paar regels die je later herstelwerk besparen:

• Upload circa 1920-2560 px breed. Breed genoeg om scherp te blijven op grote monitoren, klein genoeg om snel te laden. Een origineel van 8000 px verspilt alleen bandbreedte.
• Ontwerp voor 16:9, maar vertrouw dat nooit op mobiel. De meeste thema's snijden de hero op telefoons bij naar iets dicht bij 4:5 of vierkant, waardoor de linker- en rechterkanten van je desktopafbeelding verdwijnen.
• Laat Shopify het formaat regelen. Upload een scherpe JPG of PNG en Shopify converteert automatisch naar WebP voor ondersteunde browsers — dat is het grootste deel van je verkeer.

Als je de bijpassende specificaties voor de rest van je winkel wilt, behandelt onze Shopify productafbeelding afmetingen referentie de galerij- en collectieafmetingen in detail.

Mobiel bijsnijden en het focuspunt

Meer dan de helft van het Shopify-verkeer komt via mobiel, maar de meeste heroes worden ontworpen op een desktop en alleen op een desktop gecontroleerd. Daar gaat het mis. Wanneer het thema je brede 16:9-banner bijsnijdt naar een langwerpig mobielvorm, gebeurt dat doorgaans vanuit het midden — alles wat belangrijk is bij de linker- of rechterkant wordt afgekapt.

Houd het onderwerp in de veilige zone

Behandel de middelste 60% van de hero als het enige echt veilige gebied. Plaats je product, je model en vooral je koptekst binnen die middelste strook. De buitenste randen zijn decoratieve ademboten die mobiel wegknipt.

Gebruik de focuspuntinstelling van je thema

De meeste moderne Shopify-thema's (Dawn en zijn afgeleiden) laten je in de thema-editor een focuspunt instellen — een klein doelwit dat je sleept naar het deel van de afbeelding dat altijd zichtbaar moet blijven. Stel het in op je product of gezicht, niet op de lege lucht. Deze ene instelling lost het merendeel van de 'mijn hero ziet er stuk uit op mobiel' klachten op.

Enkele hero versus slideshow

De slideshow is het meest overgebruikte homepage-element en bijna altijd de verkeerde keuze. Het voelt alsof je meer laat zien, maar de data én de mechanica pleiten er allebei tegen.

Waarom één hero meestal wint

• Aandacht versnippert. Een roterende banner vraagt bezoekers twee of drie concurrerende boodschappen te lezen; de meesten lezen geen van alle en scrollen door.
• De meeste dia's worden nooit gezien. De overgrote meerderheid van de bezoekers wacht niet op dia twee, dus het aanbod dat je daar hebt verstopt, bestaat in de praktijk niet.
• Slideshows zijn zwaar. Elke dia is een extra grote afbeelding om te laden, wat je LCP en je mobiele snelheidsscore drukt.
• Automatische rotatie schaadt. Een banner die beweegt terwijl iemand leest is een gebruikersprobleem, geen feature.

Kies je één sterkste boodschap — je bestseller, je lancering, of je kernbelofte — en geef die het volledige podium. Één afbeelding, één koptekst, één knop.

Wanneer een slideshow verdedigbaar is

Er zijn smalle uitzonderingen: een echte multi-campagnemoment (een uitverkoop met drie afzonderlijke aanbiedingen) of een merk dat echt visueel-gedreven is. Beperk het ook dan tot twee of drie handmatig doorgeschoven dia's, nooit automatisch roterend, en accepteer de snelheidskosten bewust.

Tekstoverlays leesbaar houden

Een hero draagt bijna altijd een koptekst en een knop, en onleesbare tekst over een drukke foto is de meest voorkomende hero-fout. De afbeelding en de woorden moeten samen worden ontworpen, niet zomaar gestapeld en op het beste gehoopt.

Bouw negatieve ruimte in

De schoonste oplossing is een afbeelding die al lege ruimte heeft waar de tekst komt — een vlakke muur, een zacht verloop of een open achtergrond aan één kant. Als je de foto rondom de tekst plant, heb je zelden zware behandelingen nodig om hem leesbaar te maken.

Voeg een subtiele overlay of verloop toe

Wanneer de afbeelding druk is, plaats je een semi-transparante overlay (circa 20-40% zwart, of een directioneel verloop) achter de tekst. Dat is het verschil tussen een koptekst die opvalt en één die opgaat in de foto. Houd het subtiel — een zwaar zwart waas maakt de hele winkel somber.

Houd de tekst kort en met hoog contrast

Een hero-koptekst telt vijf tot acht woorden, geen alinea. Combineer het met één actiegericht knopje ('Bekijk de collectie', niet 'Versturen'), en controleer het contrast op een telefoon in daglicht, waar glare en het strakkere bijsnijden zwakke tekst het snelst blootlegt.

Bestandsgrootte, formaat en laadsnelheid

De hero is per definitie het grootste zichtbare element bij het laden van je homepage — wat hem in de meeste gevallen je Largest Contentful Paint (LCP) maakt. Google meet LCP rechtstreeks, en een trage hero schaadt zowel conversie als zoekmachineranking. Snelheid hier is geen optie.

Drie gewoontes houden de hero snel:

• Gebruik de juiste brongrootte. Een upload van 2560 px is ruim voldoende; te grote originelen zijn de belangrijkste oorzaak van een trage homepage.
• Laad de hero nooit lazy. Afbeeldingen onder de vouw moeten lazy laden, maar de hero staat boven de vouw en moet direct worden weergegeven. Lazy-laden schaadt de LCP rechtstreeks.
• Vertrouw op WebP. Shopify's automatische WebP-conversie snijdt het herogewicht doorgaans 30-70% terug ten opzichte van JPEG, zonder zichtbaar kwaliteitsverlies. Je converteert zelf niets — upload gewoon scherpe bronbestanden.

Een merkwaardige afbeelding kiezen die converteert

Specificaties zorgen ervoor dat een hero correct laadt en wordt bijgesneden; de daadwerkelijke afbeelding bepaalt of iemand wil kopen. Een converterende hero doet drie dingen: hij toont het product (of het resultaat van gebruik ervan), laat ruimte voor de boodschap en ziet er onmiskenbaar uit als jouw merk. Een generieke stockfoto van een glimlachende vreemdeling doet geen van die drie.

Voor de meeste winkels is de sterkste hero een van drie typen: een strakke lifestyle-scène die het product in gebruik toont, een zelfverzekerde productgerichte opname met ademboten voor de koptekst, of een simpele waardepropositie-banner met één product op een merkkleurige achtergrond. Wat je ook kiest, het moet de kleuren, belichting en sfeer van je productpagina's weerspiegelen — een hero die los aanvoelt van de catalogus tast stilletjes het vertrouwen aan.

Snel hero-visuals maken met AI

De bottleneck is zelden weten hoe een goede hero eruitziet — het is er één produceren die on-brand is zonder een fotoshoot. Hier past AI naadloos in een Shopify-workflow. Met een tool zoals HedaAI upload je één echte foto van je product (meer hoeken leveren betere resultaten) en krijg je een volledige set van 12 e-commerce afbeeldingen — 8 hoofd- en galerij-afbeeldingen plus 4 A+-stijl bannerafbeeldingen — in minuten gegenereerd. Die brede A+-bannerafbeeldingen en lifestyle-scènes zijn precies het soort strakke, on-brand visuals die je kunt bijsnijden tot een homepage-hero, en omdat ze allemaal uit dezelfde pipeline komen, delen ze de echte kleur, belichting en compositie van je product.

Om duidelijk te zijn over wat het doet: HedaAI genereert de afbeeldingen — hoofdafbeeldingen op witte achtergrond, lifestyle-scènes, infographics en brede banners — niet het Shopify-thema of de hero-layout zelf. Je plaatst de visual in de hero-sectie van je thema, stelt het focuspunt in en voegt je koptekst toe. Een gratis run geeft je een voorbeeld met watermerk om de kwaliteit te beoordelen, en je eerste betaling verwijdert watermerken en ontgrendelt 2K HD-downloads voor $1.00 per product (nieuwe accounts krijgen $2 aan gratis tegoed, genoeg voor ongeveer twee producten gratis). Je kunt echte voor-en-na-voorbeelden bekijken of de volledige prijsinformatie raadplegen voordat je beslist.

Voor de belichtings- en compositiefundamenten achter een goede bronafbeelding passen onze Shopify productfotografie tips goed bij deze gids, en de Shopify productafbeelding gids behandelt de galerij-afbeeldingen die bezoekers zien nadat de hero zijn werk heeft gedaan.

De conclusie

Je Shopify hero heeft twee seconden om een eerste indruk te maken en doet het zwaarste werk op je site. Upload een scherpe afbeelding van 1920-2560 px, ontwerp voor 16:9 maar stel een mobiel focuspunt in, kies een enkele hero boven een slideshow, bouw ruimte in voor leesbare tekst en houd hem onder ~200 KB zodat hij als eerste laadt. Doe die vijf dingen goed en je homepage verdient de scroll — of de afbeelding nu uit een studio komt, van je telefoon, of van AI.