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

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.

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.

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. 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. 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. 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. 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. 5

   Check het op je eigen telefoon

   Themavoorbeelden helpen, maar open de echte winkel op een echte telefoon voordat je het af noemt.

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.

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.

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.

• 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.
• 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 en ontwerp van salesposts 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 in de praktijk voor een webshop betekent.

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 laat de werkwijze zien.