Kortversionen
- En Shopify-banner, herobilden högst upp på startsidan, fungerar bra i 1920×1080 pixlar.
- Shopify-produktbilder laddas bäst upp som kvadrater på 2048×2048 pixlar så att rutnätet förblir jämnt och zoomen skarp.
- De flesta Shopify-teman beskär herobilden olika på mobiler, så rubriker och knappar hör hemma i en central kolumn på cirka 1080 pixlar.
- Produktfoton ser ut som en butik när de delar bakgrund, ljusriktning och lika mycket luft runt produkten.
- Reabanners, e-post och sociala inlägg bör återanvända butikens bakgrund och typografi så att en kund känner igen butiken innan hen läst ett ord.
På den här sidan
En bra Shopify-banner är 1920×1080 pixlar, har en kort rubrik och en knapp, och håller båda mitt i ramen, eftersom de flesta teman beskär bort sidorna på en mobil. Para ihop den med produktbilder uppladdade som kvadrater på 2048×2048 på samma bakgrund, så börjar butiken se ut som ett varumärke snarare än en katalog. Resten av sidan går igenom storlekarna, layouterna som överlever varje skärm och hur du gör reabanners som ändå ser ut som du.
Storlekar för Shopify-banner och bilder
Shopify tvingar inte på dig en enda bannerstorlek: varje tema bestämmer hur hög herobilden är och hur den beskärs. Att utgå från en huvudfil i 16:9 är den tryggaste vanan, eftersom den fyller en laptopskärm och lämnar tillräcklig höjd för att beskäras för en mobil.
Storlek att designa
Format
Storlek att designa
Format
Storlek att designa
Format
Storlek att designa
Format
Storlek att designa
Format
Storlek att designa
Format
Storlek att designa
Format
Hero 16:9
1920 × 1080
Produkt 1:1
2048 × 2048
Bloggbanner 2:1
1200 × 600
Story 9:16
1080 × 1920
Kvadratiska produktbilder betyder mer än de ser ut. När varje foto i en kollektion har samma form linjerar rutnätet och ögat jämför produkter i stället för att lägga märke till ojämna kanter. 2048 pixlar ger också zoomen på en produktsida tillräckligt med detaljer för att vara värd ett tryck. Storleken på länkförhandsvisningen förklaras i storlek på Open Graph-bild.
Så designar du en herobanner som överlever en mobil
På en laptop är heron bred och låg. På en mobil beskärs samma bild ofta till en nästan kvadrat, eller så staplar temat orden under den. Hur som helst försvinner kanterna, och allt viktigt i kanterna försvinner med dem.
- 1
Börja i 1920×1080
Designa i full bredd och markera sedan en central kolumn på cirka 1080 pixlar. Den kolumnen är det en mobil mest sannolikt behåller.
- 2
Skriv en rad, inte tre
”Höstkollektionen är här.” slår en rubrik, en underrubrik och en rabattkod som slåss om utrymmet. Detaljerna hör hemma på kollektionssidan.
- 3
Använd en knapp med ett verb
Handla kollektionen, Handla ljus, Se nyheterna. De flesta teman lägger till knappen åt dig, så lämna en lugn yta där den ska sitta.
- 4
Låt bakgrunden bära varumärket
Ett produktfoto med ett stökigt rum bakom konkurrerar med orden. Ett enhetligt färgfält eller material bakom en frilagd produkt läses i vilken beskärning som helst.
- 5
Kontrollera den på din egen mobil
Temaförhandsvisningar hjälper, men öppna den levande butiken på en riktig mobil innan du kallar den färdig.
En hero med orden i den centrala kolumnen, så att en mobilbeskärning behåller hela budskapet.
Produktbilder som ser ut som en butik
Kunder bedömer en butik efter dess rutnät långt innan de läser en beskrivning. Om en produkt står på en vit sweep, nästa på en köksbänk och den tredje på ett lakan känns butiken improviserad även när produkterna är utmärkta. Välj en fond och ett sätt att belysa, och upprepa det.
Känns improviserat
- En ny bakgrund för varje produkt
- Ljus från vänster i ett foto, uppifrån i nästa
- Produkter som fyller ramen i vissa bilder, pyttesmå i andra
- Blandade former: några stående, några kvadratiska
- Text och märken inbrända i fotot
Känns som ett varumärke
- En fondfärg eller gradient för hela sortimentet
- Ljus från samma sida varje gång
- Produkten fyller cirka 70 till 80 procent av ramen
- Varje bild en kvadrat på 2048×2048
- Märken som läggs till av temat, så att fotona förblir rena
En mjuk gradient bakom en frilagd produkt fungerar bra eftersom den ger djup utan en riktig scen. Håll den låg i kontrast så att produkten förblir det ljusaste i ramen. Fler upplägg finns i bakgrunder för produktfoton.
radial-gradient(circle at 50% 38%, #f7f3ee 0%, #ece4da 45%, #d9cdbf 100%)Shopify-reabanners som ändå ser ut som du
Rea är där de flesta butiker tappar sitt utseende. Den vanliga reflexen är rött, en stjärnexplosion och ordet REA i versaler, vilket ser ut som alla andra butiker samma helg. Behåll din egen bakgrund och typografi och ändra bara orden och kanske färgens intensitet.
Rea-heron behåller butikens egen bakgrund och typografi.
Samma budskap som en story på 1080×1920, så att reorna läses som en kampanj.
- Säg erbjudandet på under sex ord: ”Vinterrea. 30 % rabatt.”
- Sätt slutdatumet i överrubriken så att brådskan är ärlig.
- Använd samma ord på heron, e-posthuvudet och storyn, och håll storyns ord inom den centrala säkra zonen.
- Ta ner bannern när reorna är slut. En gammal rea-hero talar om för besökarna att ingen passar butiken.
För hektiska helger har sociala inlägg för Black Friday och design av rea-inlägg layouter och formuleringar att låna.
Ett utseende över butik, e-post och sociala medier
Heron, produktrutnätet, e-posthuvudet och Instagram-inlägget ses av samma kund med några dagars mellanrum. När de delar en bakgrund, ett rubrik-typsnitt och en liten palett påminner var och en kunden om den förra. Det är vad konsekvent varumärke betyder i praktiken för en butik.
Här hjälper Gradiently en liten butik. Designa heron en gång på en Mark, en levande gradientbakgrund som bara du kan exportera med när du säkrat den, och Pro ändrar storlek på den till storyn, e-posthuvudet och länkförhandsvisningen i ett steg. Massskapande, också i Pro, fyller en produktkortsmall från ett kalkylblad med namn och priser, så att en ny kollektions grafik kommer ut matchande. Ett utseende, alla storlekar visar arbetsflödet.
Vanliga frågor
Vilken storlek ska en Shopify-banner ha?
Designa startsidans hero i 1920×1080 pixlar och håll rubriken och knappen i en central kolumn på cirka 1080 pixlar, eftersom de flesta teman beskär sidorna på mobiler.
Vilken är den bästa storleken på Shopify-produktbilder?
En kvadrat på 2048×2048 pixlar. Den håller kollektionsrutnätet jämnt och ger produktzoomen tillräckligt med detaljer.
Varför ser min Shopify-banner beskuren ut på mobilen?
Teman passar in en bred banner på en smalare mobilskärm genom att skära bort sidorna eller ändra höjden. Håll viktiga ord och produkter i mitten av bilden.
Ska jag lägga text på min Shopify-bannerbild?
Kort text går bra om den sitter centralt, men många teman låter dig lägga rubriken och knappen som levande text över bilden, vilket förblir skarpt och är enklare att ändra.
Hur får jag mina produktfoton att se enhetliga ut?
Använd en fond, ljus från samma sida, kvadratiska bilder på 2048×2048 och produkten som fyller ungefär lika stor del av varje ram.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil