# Shopify-banner: størrelser, produktbilleder og udsalg [Canonical HTML page](https://gradiently.design/da/guide/shopify-store-design) En webshop virker troværdig, når banneret, produktgitteret, udsalgsgrafikken og e-mailene ser ud til at komme fra samme sted. Her er vejen dertil med de størrelser, Shopify faktisk bruger. ## The short version - 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. 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. | Hvor det vises | Størrelse at designe i | Format | | --- | --- | --- | | Heltebanner på forsiden | 1920×1080 px | 16:9 | | Produktbillede | 2048×2048 px | 1:1 | | Banner til blogindlæg | 1200×600 px | 2:1 | | E-mailheader | 1200×600 px | 2:1 | | Linkforhåndsvisning, når butikken deles | 1200×630 px | 1,91:1 | | Instagram-feedopslag | 1080×1350 px | 4:5 | | Instagram-story | 1080×1920 px | 9:16 | Grundsættet til en lille butik. Design hver størrelse bevidst i stedet for at strække ét billede, så det passer til dem alle. - Helt 16:9: 1920 × 1080 - Produkt 1:1: 2048 × 2048 - Blogbanner 2:1: 1200 × 600 - Story 9:16: 1080 × 1920 De fire former, en butik lever i, tegnet i skala. Heltebilledet og storyen er hinandens modsætninger, og derfor dækker én fil aldrig begge. 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](https://gradiently.design/da/guide/open-graph-image-size). ## 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 bredt Shopify-heltebanner med teksten Efterårskollektionen er her, centreret på en blød gradientbaggrund 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](https://gradiently.design/da/guide/product-photo-backgrounds). Varm studiesten: `radial-gradient(circle at 50% 38%, #f7f3ee 0%, #ece4da 45%, #d9cdbf 100%)` En varm råhvid, der falder til stengrå i kanterne, som lys samlet på et bord. Den klæder keramik, lys, hudpleje og tekstiler. ## 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. Et bredt udsalgsbanner til en Shopify-butik med teksten Vinterudsalg 30 % rabat, slutter søndag Udsalgets heltebillede beholder butikkens egen baggrund og skrift. En lodret Instagram-story-udgave af det samme vinterudsalgsbanner med matchende baggrund og ord 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](https://gradiently.design/da/guide/social-media-safe-zones). - 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](https://gradiently.design/da/guide/black-friday-post-ideas) og [design af udsalgsopslag](https://gradiently.design/da/guide/sale-post-design) 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](https://gradiently.design/da/guide/brand-consistency) betyder i praksis for en butik. - Hyldehvid: #f7f3ee - Sten: #d9cdbf - Valnød: #8a6f5a - Blæk: #2f2a26 - Terrakottaaccent: #c8553d En rolig butikspalet: to baggrunde, en mellemtone, en blæktone til skrift og én accent forbeholdt knapper og udsalgsord. 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](https://gradiently.design/da/guide/one-look-every-size) viser arbejdsgangen. > **Skriv alt-tekst, mens du uploader** Shopify lader dig tilføje alt-tekst til hvert produktbillede og banner. Beskriv, hvad der er på billedet, med almindelige ord. Det hjælper brugere af skærmlæsere og giver søgemaskiner noget at forstå. ## FAQ ### 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.