# Banner til Shopify: størrelser, produktbilder og salg

[Canonical HTML page](https://gradiently.design/nb/guide/shopify-store-design)

En butikk virker troverdig når banneret, produktoversikten, salgsgrafikken og e-postene ser ut som de kommer fra samme sted. Slik får du det til med størrelsene Shopify faktisk bruker.

## The short version

- 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.

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.

| Hvor det vises | Størrelse å designe i | Forhold |
| --- | --- | --- |
| Toppbanner på forsiden | 1920×1080 px | 16:9 |
| Produktbilde | 2048×2048 px | 1:1 |
| Banner til blogginnlegg | 1200×600 px | 2:1 |
| E-posttopp | 1200×600 px | 2:1 |
| Lenkeforhåndsvisning når butikken deles | 1200×630 px | 1,91:1 |
| Instagram-innlegg i feeden | 1080×1350 px | 4:5 |
| Instagram Story | 1080×1920 px | 9:16 |

Grunnsettet for en liten butikk. Design hver størrelse bevisst i stedet for å strekke ett bilde så det passer til alle.

- Toppbilde 16:9: 1920 × 1080
- Produkt 1:1: 2048 × 2048
- Bloggbanner 2:1: 1200 × 600
- Story 9:16: 1080 × 1920

De fire formene en butikk bruker, tegnet i riktig målestokk. Toppbildet og storyen er motsetninger, så én fil dekker aldri begge.

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](https://gradiently.design/nb/guide/open-graph-image-size).

## 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 bredt toppbanner til Shopify med sentrert tekst om høstkolleksjonen på en myk gradientbakgrunn

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](https://gradiently.design/nb/guide/product-photo-backgrounds).

Varm stein i studio: `radial-gradient(circle at 50% 38%, #f7f3ee 0%, #ece4da 45%, #d9cdbf 100%)`

En varm, brukket hvit som går over i stein langs kantene, som lys samlet på et bord. Den kler keramikk, lys, hudpleie og tekstiler.

## 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.

Et bredt salgsbanner til Shopify med teksten Vintersalg 30% rabatt, slutter søndag

Salgsbanneret beholder butikkens egen bakgrunn og typografi.

En stående Instagram Story med samme vintersalg, bakgrunn og tekst som salgsbanneret

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](https://gradiently.design/nb/guide/social-media-safe-zones).
- 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](https://gradiently.design/nb/guide/black-friday-post-ideas) og [design av salgsinnlegg](https://gradiently.design/nb/guide/sale-post-design) 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](https://gradiently.design/nb/guide/brand-consistency) betyr i praksis for en butikk.

- Hyllehvit: #f7f3ee
- Stein: #d9cdbf
- Valnøtt: #8a6f5a
- Blekk: #2f2a26
- Terrakottaaksent: #c8553d

En rolig butikkpalett: to bakgrunner, en mellomtone, en tekstfarge og én aksent spart til knapper og salgstekst.

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](https://gradiently.design/nb/guide/one-look-every-size) viser arbeidsflyten.

> **Skriv alternativ tekst ved opplasting** Shopify lar deg legge til alternativ tekst på alle produktbilder og bannere. Beskriv med enkle ord hva bildet viser. Det hjelper dem som bruker skjermleser, og gir søkemotorene noe å forstå.

## FAQ

### 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.