Kort fortalt
- Et Shopify-banner, heltebilledet øverst på forsiden, fungerer godt i 1920×1080 pixels.
- Produktbilleder til Shopify uploades bedst som kvadrater i 2048×2048 pixels, så gitteret forbliver jævnt og zoom forbliver skarp.
- De fleste Shopify-temaer beskærer heltebilledet anderledes på telefoner, så overskrifter og knapper hører hjemme i en central kolonne på omkring 1080 pixels.
- Produktfotos ligner én butik, når de deler baggrund, lysretning og samme mængde luft omkring produktet.
- Udsalgsbannere, e-mails og opslag på sociale medier bør genbruge butikkens baggrund og skrift, så kunden genkender butikken, før de har læst et ord.
På denne side
Et godt Shopify-banner er 1920×1080 pixels, har én kort overskrift og én knap og holder begge i midten af rammen, fordi de fleste temaer skærer siderne væk på en telefon. Kombinér det med produktbilleder uploadet som kvadrater i 2048×2048 på samme baggrund, så begynder butikken at ligne et brand frem for et katalog. Resten af siden handler om størrelserne, de layouts, der overlever alle skærme, og hvordan du laver udsalgsbannere, der stadig ligner dig.
Størrelser til Shopify-bannere og billeder
Shopify tvinger dig ikke til én bannerstørrelse: hvert tema bestemmer, hvor højt heltebilledet er, og hvordan det beskæres. At arbejde ud fra en master i 16:9 er den sikreste vane, fordi den fylder en bærbar skærm og efterlader nok højde til at beskære til en telefon.
Størrelse at designe i
Format
Størrelse at designe i
Format
Størrelse at designe i
Format
Størrelse at designe i
Format
Størrelse at designe i
Format
Størrelse at designe i
Format
Størrelse at designe i
Format
Helt 16:9
1920 × 1080
Produkt 1:1
2048 × 2048
Blogbanner 2:1
1200 × 600
Story 9:16
1080 × 1920
Kvadratiske produktbilleder betyder mere, end man skulle tro. Når hvert foto i en kollektion har samme form, flugter gitteret, og øjet sammenligner produkter i stedet for at bemærke ujævne kanter. 2048 pixels giver også zoom på en produktside nok detaljer til at være værd at trykke på. Størrelsen på linkforhåndsvisningen forklares i størrelse på Open Graph-billeder.
Sådan designer du et heltebanner, der overlever en telefon
På en bærbar er heltebilledet bredt og lavt. På en telefon beskæres det samme billede ofte til næsten kvadratisk, eller temaet stabler ordene nedenunder. Uanset hvad forsvinder kanterne, så alt vigtigt ved kanterne forsvinder også.
- 1
Start i 1920×1080
Design hele bredden, og markér så en central kolonne på omkring 1080 pixels. Den kolonne er det, en telefon mest sandsynligt beholder.
- 2
Skriv én linje, ikke tre
»Efterårskollektionen er her.« slår en overskrift, en underoverskrift og en rabatkode, der kæmper om pladsen. Detaljerne hører til på kollektionssiden.
- 3
Brug én knap med et udsagnsord
Shop kollektionen, Shop lys, Se nyhederne. De fleste temaer tilføjer knappen for dig, så efterlad et roligt område, hvor den skal sidde.
- 4
Lad baggrunden bære brandet
Et produktfoto med et travlt rum bagved konkurrerer med ordene. Et ensartet farvefelt eller materiale bag et fritlagt produkt kan læses i enhver beskæring.
- 5
Tjek det på din egen telefon
Temaets forhåndsvisninger hjælper, men åbn den live butik på en rigtig telefon, før du kalder det færdigt.
Et heltebillede med ordene i den centrale kolonne, så en beskæring på telefon beholder hele budskabet.
Produktbilleder, der ligner én butik
Kunder bedømmer en butik på dens gitter, længe før de læser en beskrivelse. Står ét produkt på en hvid baggrund, det næste på et køkkenbord og det tredje på et lagen, føles butikken improviseret, selv når produkterne er fremragende. Vælg én baggrund og én måde at lyssætte på, og gentag den.
Føles improviseret
- En ny baggrund til hvert produkt
- Lys fra venstre på ét foto, ovenfra på det næste
- Produkter, der fylder rammen på nogle billeder og er bittesmå på andre
- Blandede formater: nogle stående, nogle kvadratiske
- Tekst og mærker bagt ind i fotoet
Føles som et brand
- Én baggrundsfarve eller gradient til hele sortimentet
- Lys fra samme side hver gang
- Produktet fylder cirka 70 til 80 procent af rammen
- Hvert billede et kvadrat i 2048×2048
- Mærker tilføjet af temaet, så fotos forbliver rene
En blød gradient bag et fritlagt produkt fungerer godt, fordi den giver dybde uden en rigtig opstilling. Hold kontrasten lav, så produktet forbliver det lyseste i rammen. Der er flere opstillinger i baggrunde til produktfotos.
radial-gradient(circle at 50% 38%, #f7f3ee 0%, #ece4da 45%, #d9cdbf 100%)Shopify-udsalgsbannere, der stadig ligner dig
Udsalg er der, hvor de fleste butikker mister deres udtryk. Den sædvanlige refleks er rød, et stjerneudbrud og ordet UDSALG med versaler, som ligner alle andre butikker samme weekend. Behold din egen baggrund og skrift, og skift kun ordene og måske farvens intensitet.
Udsalgets heltebillede beholder butikkens egen baggrund og skrift.
Det samme budskab som story i 1080×1920, så udsalget fremstår som én kampagne.
- Sig tilbuddet med under seks ord: »Vinterudsalg. 30 % rabat.«
- Sæt slutdatoen i overlinjen, så hasten er ærlig.
- Brug de samme ord på heltebilledet, e-mailheaderen og storyen, og hold storyens ord inden for den centrale sikre zone.
- Tag banneret ned, når udsalget slutter. Et forældet udsalgsbanner fortæller besøgende, at ingen passer butikken.
Til travle weekender har Black Friday-opslag til sociale medier og design af udsalgsopslag layouts og formuleringer, du kan låne.
Ét udtryk i butik, e-mail og sociale medier
Heltebilledet, produktgitteret, e-mailheaderen og Instagram-opslaget ses af den samme kunde inden for få dage. Når de deler baggrund, overskriftsskrift og en lille palet, minder hver af dem kunden om den forrige. Det er, hvad brandkonsistens betyder i praksis for en butik.
Det er her, Gradiently hjælper en lille butik. Design heltebilledet én gang på en Mark, en levende gradientbaggrund, som kun du kan eksportere med, når du har sikret dig den, og Pro tilpasser det til storyen, e-mailheaderen og linkforhåndsvisningen i ét trin. Opret i serie, også med Pro, udfylder en skabelon til produktkort ud fra et regneark med navne og priser, så grafikken til en ny kollektion kommer ud ens. Ét udtryk i alle størrelser viser arbejdsgangen.
Spørgsmål, folk stiller
Hvilken størrelse skal et Shopify-banner have?
Design forsidens heltebillede i 1920×1080 pixels, og hold overskrift og knap i en central kolonne på omkring 1080 pixels, fordi de fleste temaer beskærer siderne på telefoner.
Hvad er den bedste størrelse til produktbilleder på Shopify?
Et kvadrat på 2048×2048 pixels. Det holder kollektionsgitteret jævnt og giver produktzoom nok detaljer.
Hvorfor ser mit Shopify-banner beskåret ud på mobil?
Temaer tilpasser et bredt banner til en smallere telefonskærm ved at skære siderne væk eller ændre højden. Hold vigtige ord og produkter i midten af billedet.
Skal jeg sætte tekst på mit Shopify-bannerbillede?
Kort tekst er fint, hvis den står centralt, men mange temaer lader dig tilføje overskrift og knap som levende tekst over billedet, hvilket forbliver skarpt og er lettere at ændre.
Hvordan får jeg mine produktfotos til at se ensartede ud?
Brug én baggrund, lys fra samme side, kvadratiske billeder i 2048×2048 og lad produktet fylde en lignende del af hver ramme.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil