# Shopify-banner: storlekar, produktbilder och reaerbjudanden [Canonical HTML page](https://gradiently.design/sv/guide/shopify-store-design) En butik känns pålitlig när bannern, produktrutnätet, reagrafiken och e-posten ser ut att komma från samma ställe. Så kommer du dit med de storlekar Shopify faktiskt använder. ## The short version - 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. 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. | Var den visas | Storlek att designa | Format | | --- | --- | --- | | Herobanner på startsidan | 1920×1080 px | 16:9 | | Produktbild | 2048×2048 px | 1:1 | | Banner för blogginlägg | 1200×600 px | 2:1 | | E-posthuvud | 1200×600 px | 2:1 | | Länkförhandsvisning när butiken delas | 1200×630 px | 1,91:1 | | Instagram-inlägg i flödet | 1080×1350 px | 4:5 | | Instagram Story | 1080×1920 px | 9:16 | Kärnuppsättningen för en liten butik. Designa varje storlek med avsikt i stället för att sträcka en bild till att passa alla. - Hero 16:9: 1920 × 1080 - Produkt 1:1: 2048 × 2048 - Bloggbanner 2:1: 1200 × 600 - Story 9:16: 1080 × 1920 De fyra former en butik lever i, ritade i skala. Heron och storyn är varandras motsatser, vilket är varför en fil aldrig täcker båda. 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](https://gradiently.design/sv/guide/open-graph-image-size). ## 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 bred Shopify-herobanner med texten Höstkollektionen är här, med orden centrerade på en mjuk gradientbakgrund 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](https://gradiently.design/sv/guide/product-photo-backgrounds). Varm studiosten: `radial-gradient(circle at 50% 38%, #f7f3ee 0%, #ece4da 45%, #d9cdbf 100%)` Ett varmt benvitt som faller mot sten i kanterna, som ljus som samlats på ett bord. Det smickrar keramik, ljus, hudvård och textilier. ## 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. En bred reabanner för en Shopify-butik med texten Vinterrea 30 % rabatt, slutar söndag Rea-heron behåller butikens egen bakgrund och typografi. En stående Instagram Story-version av samma vinterreabanner, med matchande bakgrund och ord 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](https://gradiently.design/sv/guide/social-media-safe-zones). - 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](https://gradiently.design/sv/guide/black-friday-post-ideas) och [design av rea-inlägg](https://gradiently.design/sv/guide/sale-post-design) 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](https://gradiently.design/sv/guide/brand-consistency) betyder i praktiken för en butik. - Hyllvit: #f7f3ee - Sten: #d9cdbf - Valnöt: #8a6f5a - Bläck: #2f2a26 - Terrakottaaccent: #c8553d En lugn butikspalett: två bakgrunder, en mellanton, ett bläck för text och en accent som sparas till knappar och reaord. 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](https://gradiently.design/sv/guide/one-look-every-size) visar arbetsflödet. > **Skriv alt-text medan du laddar upp** Shopify låter dig lägga till alt-text på varje produktbild och banner. Beskriv vad som finns i bilden med enkla ord. Det hjälper användare av skärmläsare och ger sökmotorer något att förstå. ## FAQ ### 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.