Kortversjonen
- Et banner til Shopify, toppbildet øverst på forsiden, fungerer godt i 1920×1080 piksler.
- Produktbilder til Shopify bør lastes opp som kvadrater i 2048×2048 piksler, slik at rutenettet blir jevnt og zoomen skarp.
- De fleste Shopify-temaer beskjærer toppbildet annerledes på mobil, så overskrifter og knapper bør ligge i en midtkolonne på omtrent 1080 piksler.
- Produktbilder ser ut som én butikk når bakgrunn, lysretning og mengden plass rundt produktet er den samme.
- Salgsbannere, e-poster og innlegg bør bruke butikkens bakgrunn og typografi, slik at kunden kjenner igjen butikken før første ord.
På denne siden
Et godt banner til Shopify er 1920×1080 piksler, har én kort overskrift og én knapp, og plasserer begge midt i bildet. De fleste temaer beskjærer nemlig sidene på mobil. Kombiner det med produktbilder lastet opp som kvadrater i 2048×2048 på samme bakgrunn, så begynner butikken å ligne en merkevare fremfor en katalog. Resten av denne siden dekker størrelsene, oppsettene som fungerer på alle skjermer, og hvordan du lager salgsbannere som fortsatt ligner deg.
Størrelser på bannere og bilder i Shopify
Shopify krever ikke én bestemt bannerstørrelse: hvert tema bestemmer høyden på toppbildet og hvordan det beskjæres. Et utgangspunkt i 16:9 er det tryggeste, fordi det fyller skjermen på en bærbar datamaskin og gir nok høyde til beskjæring for mobil.
Størrelse å designe i
Forhold
Størrelse å designe i
Forhold
Størrelse å designe i
Forhold
Størrelse å designe i
Forhold
Størrelse å designe i
Forhold
Størrelse å designe i
Forhold
Størrelse å designe i
Forhold
Toppbilde 16:9
1920 × 1080
Produkt 1:1
2048 × 2048
Bloggbanner 2:1
1200 × 600
Story 9:16
1080 × 1920
Kvadratiske produktbilder betyr mer enn det kan se ut til. Når alle bildene i en kolleksjon har samme form, blir rutenettet jevnt, og øyet sammenligner produkter i stedet for å se ujevne kanter. 2048 piksler gir også zoomen på produktsiden nok detaljer til at det er verdt å trykke. Størrelsen på lenkeforhåndsvisninger forklares i størrelse på Open Graph-bilder.
Slik lager du et toppbanner som tåler mobilvisning
På en bærbar datamaskin er toppbildet bredt og lavt. På mobil blir det samme bildet ofte beskåret til nesten et kvadrat, eller temaet plasserer teksten under det. Uansett forsvinner kantene, og dermed også viktig innhold langs kantene.
- 1
Start med 1920×1080
Design i hele bredden, og marker deretter en midtkolonne på omtrent 1080 piksler. Den kolonnen er mest sannsynlig å bli bevart på mobil.
- 2
Skriv én linje, ikke tre
«Høstkolleksjonen er her.» fungerer bedre enn en overskrift, en undertittel og en rabattkode som kjemper om plassen. Detaljene hører hjemme på kolleksjonssiden.
- 3
Bruk én knapp med et verb
Se kolleksjonen, Se lysene, Se nyhetene. De fleste temaer legger til knappen for deg, så la det være et rolig område der den skal stå.
- 4
La bakgrunnen bære merkevaren
Et produktbilde med et travelt rom i bakgrunnen konkurrerer med teksten. Et gjennomgående fargefelt eller materiale bak et frilagt produkt fungerer ved enhver beskjæring.
- 5
Sjekk på din egen mobil
Forhåndsvisninger av temaet hjelper, men åpne den publiserte butikken på en ekte mobil før du kaller den ferdig.
Et toppbilde med teksten i midtkolonnen, slik at hele budskapet overlever beskjæring på mobil.
Produktbilder som ser ut som én butikk
Kunder vurderer en butikk ut fra produktoversikten lenge før de leser en beskrivelse. Hvis ett produkt står mot en hvit bakgrunn, det neste på en kjøkkenbenk og det tredje på et laken, virker butikken improvisert selv om produktene er gode. Velg én bakgrunn og én måte å belyse på, og gjenta dem.
Virker improvisert
- Ulik bakgrunn for hvert produkt
- Lys fra venstre i ett bilde og ovenfra i det neste
- Produktene fyller noen bilder og er små i andre
- Ulike former: noen stående, noen kvadratiske
- Tekst og merker bakt inn i bildet
Virker som en merkevare
- Én bakgrunnsfarge eller gradient for hele sortimentet
- Lys fra samme side hver gang
- Produktet fyller omtrent 70 til 80 prosent av bildet
- Alle bilder er kvadrater i 2048×2048
- Temaet legger til merker, så bildene holdes rene
En myk gradient bak et frilagt produkt fungerer godt fordi den gir dybde uten en fysisk kulisse. Hold kontrasten lav, slik at produktet fortsatt er det lyseste i bildet. Du finner flere oppsett i bakgrunner til produktbilder.
radial-gradient(circle at 50% 38%, #f7f3ee 0%, #ece4da 45%, #d9cdbf 100%)Salgsbannere til Shopify som fortsatt ligner deg
Det er under salg at de fleste butikker mister uttrykket sitt. Den vanlige refleksen er rødt, en stjerneform og ordet SALG i store bokstaver. Det ligner alle andre butikker samme helg. Behold din egen bakgrunn og typografi, og endre bare teksten og kanskje fargestyrken.
Salgsbanneret beholder butikkens egen bakgrunn og typografi.
Samme budskap som en story i 1080×1920, slik at salget fremstår som én kampanje.
- Beskriv tilbudet med under seks ord: «Vintersalg. 30% rabatt.»
- Sett sluttdatoen i overlinjen, slik at tidspresset er ærlig.
- Bruk samme tekst på toppbanneret, e-posttoppen og storyen, og hold teksten i storyen innenfor den sentrale sikre sonen.
- Ta ned banneret når salget er slutt. Et utdatert salgsbanner forteller besøkende at ingen passer butikken.
For travle helger har Black Friday-innlegg og design av salgsinnlegg oppsett og formuleringer du kan låne.
Ett uttrykk i butikk, e-post og sosiale medier
Toppbildet, produktoversikten, e-posttoppen og Instagram-innlegget ses av samme kunde med få dagers mellomrom. Når de deler bakgrunn, overskriftsskrift og en liten palett, minner hvert av dem kunden om det forrige. Det er hva en konsekvent merkevare betyr i praksis for en butikk.
Her hjelper Gradiently en liten butikk. Design toppbanneret én gang på en Mark, en levende gradientbakgrunn som bare du kan eksportere med når du har sikret deg den. Pro tilpasser det til story, e-posttopp og lenkeforhåndsvisning i ett trinn. Opprett i serie, også med Pro, fyller en produktkortmal fra et regneark med navn og priser, slik at grafikken til en ny kolleksjon får samme uttrykk. Ett uttrykk, alle størrelser viser arbeidsflyten.
Spørsmål folk stiller
Hvilken størrelse bør et banner til Shopify ha?
Design toppbanneret på forsiden i 1920×1080 piksler, og hold overskriften og knappen i en midtkolonne på omtrent 1080 piksler. De fleste temaer beskjærer sidene på mobil.
Hva er den beste størrelsen på produktbilder til Shopify?
Et kvadrat i 2048×2048 piksler. Det holder produktoversikten jevn og gir produktzoomen nok detaljer.
Hvorfor ser Shopify-banneret mitt beskåret ut på mobil?
Temaer får et bredt banner til å passe på en smalere mobilskjerm ved å kutte sidene eller endre høyden. Hold viktige ord og produkter midt i bildet.
Bør jeg legge tekst på bannerbildet i Shopify?
Kort tekst fungerer hvis den står sentralt, men mange temaer lar deg legge overskrift og knapp som levende tekst over bildet. Det holder teksten skarp og gjør den enklere å endre.
Hvordan får jeg produktbildene mine til å se ensartede ut?
Bruk én bakgrunn, lys fra samme side, kvadratiske bilder i 2048×2048 og produkter som fyller omtrent like mye av hvert bilde.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår