# Shopify banner: formaten, productfoto’s en sale-ontwerpen

[Canonical HTML page](https://gradiently.design/nl/guide/shopify-store-design)

Een webshop wekt vertrouwen als de banner, het productraster, de salegrafieken en de e-mails allemaal van dezelfde afzender lijken. Zo bereik je dat met de formaten die Shopify echt gebruikt.

## The short version

- Een Shopify banner, de heroafbeelding bovenaan de homepage, werkt goed op 1920×1080 pixels.
- Productfoto’s voor Shopify upload je het best als vierkant van 2048×2048 pixels, zodat het raster gelijkmatig blijft en inzoomen scherp blijft.
- De meeste Shopify-thema’s snijden de hero op telefoons anders bij, dus koppen en knoppen horen in een middenkolom van ongeveer 1080 pixels breed.
- Productfoto’s ogen als één winkel als ze dezelfde achtergrond, lichtrichting en ruimte rond het product delen.
- Salebanners, e-mails en socialposts hergebruiken best de achtergrond en het lettertype van de winkel, zodat een klant de shop herkent voordat hij een woord leest.

Een goede **Shopify banner** is 1920×1080 pixels, draagt één korte kop en één knop, en houdt beide midden in het beeld, omdat de meeste thema’s op een telefoon de zijkanten wegsnijden. Combineer hem met productfoto’s van 2048×2048 pixels op dezelfde achtergrond, en je winkel ziet er uit als een merk in plaats van een catalogus. De rest van deze pagina behandelt de formaten, de lay-outs die op elk scherm overeind blijven en hoe je salebanners maakt die nog steeds als jij aanvoelen.

## Formaten voor Shopify banners en afbeeldingen

Shopify dwingt je geen vast bannerformaat op: elk thema bepaalt zelf hoe hoog de hero staat en hoe die bijgesneden wordt. Vertrekken vanuit een 16:9-origineel is de veiligste gewoonte, want het vult een laptopscherm en laat genoeg hoogte over om voor een telefoon bij te snijden.

| Waar het verschijnt | Formaat om te ontwerpen | Verhouding |
| --- | --- | --- |
| Hero-banner op de homepage | 1920×1080 px | 16:9 |
| Productfoto | 2048×2048 px | 1:1 |
| Banner voor een blogbericht | 1200×600 px | 2:1 |
| E-mailheader | 1200×600 px | 2:1 |
| Linkvoorbeeld als de shop gedeeld wordt | 1200×630 px | 1,91:1 |
| Instagram-feedpost | 1080×1350 px | 4:5 |
| Instagram Story | 1080×1920 px | 9:16 |

De basisset voor een kleine webshop. Ontwerp elk formaat bewust in plaats van één afbeelding overal op te rekken.

- Hero 16:9: 1920 × 1080
- Product 1:1: 2048 × 2048
- Blogbanner 2:1: 1200 × 600
- Story 9:16: 1080 × 1920

De vier vormen waarin een webshop leeft, op schaal getekend. De hero en de story zijn elkaars tegenpool, daarom dekt één bestand nooit beide.

Vierkante productfoto’s doen meer dan je denkt. Als elke foto in een collectie dezelfde vorm heeft, loopt het raster netjes op één lijn en vergelijkt het oog producten in plaats van ruwe randen op te merken. Met 2048 pixels heeft de zoomfunctie op een productpagina bovendien genoeg detail om de moeite waard te zijn. Het formaat van het linkvoorbeeld lees je in [Open Graph-afbeeldingsformaat](https://gradiently.design/nl/guide/open-graph-image-size).

## Een herobanner ontwerpen die een telefoon overleeft

Op een laptop is de hero breed en laag. Op een telefoon wordt hetzelfde beeld vaak bijgesneden tot bijna vierkant, of zet het thema de tekst eronder. In beide gevallen verdwijnen de randen, en alles wat belangrijk is aan de randen verdwijnt mee.

1. **Begin op 1920×1080** Ontwerp de volle breedte en teken dan een middenkolom van ongeveer 1080 pixels breed. Die kolom houdt een telefoon waarschijnlijk over.
2. **Schrijf één regel, geen drie** ‘De herfstcollectie is er.’ wint van een kop, een subkop en een kortingscode die om ruimte vechten. Details horen op de collectiepagina.
3. **Gebruik één knop met een werkwoord** Bekijk de collectie, Shop kaarsen, Ontdek het nieuwe. De meeste thema’s voegen de knop zelf toe, dus laat een rustig vlak vrij waar hij komt.
4. **Laat de achtergrond het merk dragen** Een productfoto met een drukke kamer erachter concurreert met de tekst. Een vast kleurvlak of materiaal achter een vrijgesteld product leest op elke uitsnede.
5. **Check het op je eigen telefoon** Themavoorbeelden helpen, maar open de echte winkel op een echte telefoon voordat je het af noemt.

Een brede Shopify-herobanner met de tekst De herfstcollectie is er, gecentreerd op een zachte verloopachtergrond

Een hero met de tekst in de middenkolom, zodat een telefoonuitsnede de hele boodschap behoudt.

## Productfoto’s die als één winkel ogen

Klanten beoordelen een winkel op het raster lang voordat ze een beschrijving lezen. Staat het ene product op een witte achtergrond, het volgende op een keukenblad en het derde op een laken, dan voelt de winkel geïmproviseerd, ook al zijn de producten uitstekend. Kies één achtergrond en één manier van belichten en herhaal die.

### Voelt geïmproviseerd

- Elke keer een andere achtergrond
- Licht van links in de ene foto, van boven in de volgende
- Producten die het beeld vullen en producten die piepklein zijn
- Gemengde vormen: de ene staand, de andere vierkant
- Tekst en labels in de foto zelf

### Voelt als een merk

- Eén achtergrondkleur of verloop voor het hele assortiment
- Elke keer licht van dezelfde kant
- Het product vult ongeveer 70 tot 80 procent van het beeld
- Elke foto een vierkant van 2048×2048
- Labels die het thema toevoegt, zodat de foto’s schoon blijven

Een zacht verloop achter een vrijgesteld product werkt goed, omdat het diepte geeft zonder echte set. Houd het contrast laag, zodat het product het helderste punt in het beeld blijft. Meer opstellingen vind je bij [achtergronden voor productfoto’s](https://gradiently.design/nl/guide/product-photo-backgrounds).

Warm studiosteen: `radial-gradient(circle at 50% 38%, #f7f3ee 0%, #ece4da 45%, #d9cdbf 100%)`

Een warm gebroken wit dat naar de randen in steengrijs overgaat, als licht dat op een tafel valt. Het staat mooi bij keramiek, kaarsen, huidverzorging en textiel.

## Shopify salebanners die nog steeds als jij voelen

Bij uitverkoop verliezen de meeste winkels hun gezicht. De reflex is rood, een sterburst en het woord SALE in hoofdletters, en dat lijkt op elke andere winkel in hetzelfde weekend. Houd je eigen achtergrond en lettertype aan en verander alleen de woorden en eventueel de intensiteit van de kleur.

Een brede salebanner voor een Shopify-winkel met de tekst Wintersale 30% korting, tot zondag

De salehero behoudt de eigen achtergrond en het lettertype van de winkel.

Een verticale Instagram Story-versie van dezelfde wintersalebanner, met dezelfde achtergrond en woorden

Dezelfde boodschap als story van 1080×1920, zodat de sale als één campagne leest.

- Zeg de aanbieding in minder dan zes woorden: ‘Wintersale. 30% korting.’
- Zet de einddatum in de eyebrow, zodat de urgentie eerlijk is.
- Gebruik dezelfde woorden op de hero, de e-mailheader en de story, en houd de tekst van de story binnen de centrale [veilige zone](https://gradiently.design/nl/guide/social-media-safe-zones).
- Haal de banner weg als de sale voorbij is. Een verlopen salehero vertelt bezoekers dat niemand op de winkel let.

Voor drukke weekenden bieden [socialposts voor Black Friday](https://gradiently.design/nl/guide/black-friday-post-ideas) en [ontwerp van salesposts](https://gradiently.design/nl/guide/sale-post-design) lay-outs en teksten om te lenen.

## Eén look voor winkel, e-mail en social

De hero, het productraster, de e-mailheader en de Instagrampost ziet dezelfde klant binnen een paar dagen. Delen ze een achtergrond, een koptype en een klein palet, dan herinnert elk onderdeel aan het vorige. Dat is wat [merkconsistentie](https://gradiently.design/nl/guide/brand-consistency) in de praktijk voor een webshop betekent.

- Schapwit: #f7f3ee
- Steen: #d9cdbf
- Walnoot: #8a6f5a
- Inkt: #2f2a26
- Terracottaaccent: #c8553d

Een rustig winkelpalet: twee achtergronden, een middentoon, een inkttint voor tekst en één accent voor knoppen en salewoorden.

Hier helpt Gradiently een kleine webshop. Ontwerp de hero één keer op een Mark, een levende verloopachtergrond die alleen jij kunt exporteren zodra je hem claimt, en Pro schaalt hem in één stap om naar de story, de e-mailheader en het linkvoorbeeld. Bulk aanmaken, ook op Pro, vult een productkaartsjabloon vanuit een spreadsheet met namen en prijzen, zodat de beelden van een nieuwe collectie bij elkaar passen. [Eén look, elk formaat](https://gradiently.design/nl/guide/one-look-every-size) laat de werkwijze zien.

> **Schrijf alt-tekst terwijl je uploadt** In Shopify kun je bij elke productfoto en banner alt-tekst toevoegen. Beschrijf in gewone woorden wat er op de afbeelding staat. Het helpt gebruikers van schermlezers en geeft zoekmachines iets om te begrijpen.

## FAQ

### Welk formaat moet een Shopify banner hebben?

Ontwerp de homepagina-hero op 1920×1080 pixels en houd de kop en knop in een middenkolom van ongeveer 1080 pixels breed, omdat de meeste thema’s de zijkanten op telefoons wegsnijden.

### Wat is het beste formaat voor Shopify-productfoto’s?

Een vierkant van 2048×2048 pixels. Het houdt het collectieraster gelijkmatig en geeft de productzoom genoeg detail.

### Waarom wordt mijn Shopify banner op mobiel bijgesneden?

Thema’s passen een brede banner in een smaller telefoonscherm door de zijkanten af te snijden of de hoogte te veranderen. Houd belangrijke woorden en producten in het midden van het beeld.

### Moet ik tekst op mijn Shopify bannerafbeelding zetten?

Korte tekst is prima als die centraal staat, maar in veel thema’s kun je kop en knop als live tekst over het beeld leggen, wat scherp blijft en makkelijker te wijzigen is.

### Hoe zorg ik dat mijn productfoto’s consistent zijn?

Gebruik één achtergrond, licht van dezelfde kant, vierkante beelden van 2048×2048 en een product dat in elk beeld een vergelijkbaar deel vult.