# Shopify-kaupan banneri: koot, tuotekuvat ja alennukset

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

Kauppa tuntuu luotettavalta, kun banneri, tuoteruudukko, tarjousgrafiikat ja sähköpostit näyttävät samasta paikasta tulevilta. Näin toteutat sen Shopifyn käyttämissä kuvakoissa.

## The short version

- Shopify-kaupan banneri eli etusivun pääkuva toimii hyvin koossa 1920×1080 pikseliä.
- Shopifyn tuotekuvat kannattaa ladata neliöinä koossa 2048×2048, jotta ruudukko pysyy tasaisena ja zoomaus terävänä.
- Useimmat Shopify-teemat rajaavat pääkuvaa eri tavalla puhelimissa. Siksi otsikot ja painikkeet kuuluvat keskelle noin 1080 pikseliä leveään sarakkeeseen.
- Tuotekuvat näyttävät samalta kaupalta, kun tausta, valon suunta ja tuotteen ympärillä oleva tila ovat yhtenäisiä.
- Alennusbannerien, sähköpostien ja somejulkaisujen tulee käyttää kaupan taustaa ja typografiaa, jotta asiakas tunnistaa sen ennen lukemista.

Hyvä **Shopify-kaupan banneri** on 1920×1080 pikseliä. Siinä on yksi lyhyt otsikko ja yksi painike keskellä kuvaa, sillä useimmat teemat leikkaavat sivut pois puhelimessa. Yhdistä siihen samalla taustalla olevat 2048×2048-neliötuotekuvat, niin kauppa alkaa näyttää brändiltä eikä pelkältä luettelolta. Tällä sivulla käydään läpi koot, kaikilla näytöillä toimivat asettelut ja oman näköiset alennusbannerit.

## Shopifyn banneri- ja kuvakoot

Shopify ei pakota yhteen bannerikokoon: teema päättää pääkuvan korkeuden ja rajauksen. 16:9-pääversio on turvallisin tapa, koska se täyttää kannettavan näytön ja jättää tarpeeksi korkeutta puhelinrajaukseen.

| Käyttöpaikka | Suunnittelukoko | Kuvasuhde |
| --- | --- | --- |
| Etusivun pääbanneri | 1920×1080 px | 16:9 |
| Tuotekuva | 2048×2048 px | 1:1 |
| Blogiartikkelin banneri | 1200×600 px | 2:1 |
| Sähköpostin otsakekuva | 1200×600 px | 2:1 |
| Linkkiesikatselu kauppaa jaettaessa | 1200×630 px | 1,91:1 |
| Instagramin somevirran julkaisu | 1080×1350 px | 4:5 |
| Instagram-tarina | 1080×1920 px | 9:16 |

Pienen kaupan perussarja. Suunnittele jokainen koko erikseen, älä venytä yhtä kuvaa kaikkiin.

- Pääkuva 16:9: 1920 × 1080
- Tuote 1:1: 2048 × 2048
- Blogibanneri 2:1: 1200 × 600
- Tarina 9:16: 1080 × 1920

Kaupan neljä muotoa mittakaavassa. Pääkuva ja tarina ovat vastakohtia, minkä vuoksi yksi tiedosto ei kata molempia.

Neliötuotekuvat ovat tärkeämpiä kuin miltä vaikuttaa. Kun kokoelman kuvat ovat samanmuotoisia, ruudukko kohdistuu ja katse vertaa tuotteita epätasaisten reunojen sijaan. 2048 pikseliä antaa tuotesivun zoomaukselle riittävästi yksityiskohtia. Linkkiesikatselun kokoa käsittelee [Open Graph -kuvan koko](https://gradiently.design/fi/guide/open-graph-image-size).

## Suunnittele puhelimessa toimiva pääbanneri

Kannettavalla pääkuva on leveä ja matala. Puhelimessa sama kuva rajataan usein lähes neliöksi tai teema pinoaa sanat sen alle. Kummassakin reunat katoavat, ja niillä oleva tärkeä sisältö katoaa mukana.

1. **Aloita koosta 1920×1080** Suunnittele koko leveydelle ja merkitse keskelle noin 1080 pikselin sarake. Se on alue, jonka puhelin todennäköisimmin säilyttää.
2. **Kirjoita yksi rivi, älä kolmea** ”Syysvalikoima on täällä.” voittaa otsikon, alaotsikon ja tilasta taistelevan alennuskoodin. Lisätiedot kuuluvat kokoelmasivulle.
3. **Käytä yhtä verbillistä painiketta** Osta valikoimasta, Osta kynttilöitä, Katso uutuudet. Useimmat teemat lisäävät painikkeen puolestasi, joten jätä sille rauhallinen alue.
4. **Anna taustan kantaa brändiä** Tuotekuva vilkkaassa huoneessa kilpailee sanojen kanssa. Yhtenäinen värikenttä tai materiaali taustastaan irrotetun tuotteen takana toimii kaikissa rajauksissa.
5. **Tarkista omalla puhelimellasi** Teeman esikatselu auttaa, mutta avaa julkaistu kauppa oikealla puhelimella ennen kuin pidät työtä valmiina.

Leveä Shopify-pääbanneri Syysvalikoima on täällä, sanat keskitettyinä pehmeällä liukuväritaustalla

Pääkuvan sanat ovat keskisarakkeessa, joten puhelinrajaus säilyttää koko viestin.

## Tuotekuvat, jotka näyttävät yhdeltä kaupalta

Asiakas arvioi kauppaa ruudukosta ennen kuvauksen lukemista. Jos yksi tuote on valkoisella taustalla, toinen keittiötasolla ja kolmas lakanalla, kauppa tuntuu improvisoidulta, vaikka tuotteet olisivat erinomaisia. Valitse yksi tausta ja valaistustapa ja toista niitä.

### Tuntuu improvisoidulta

- Eri tausta joka tuotteella
- Yhdessä valo vasemmalta, seuraavassa ylhäältä
- Osassa tuote täyttää kuvan, toisissa se on pieni
- Sekamuotoja: osa pystyjä, osa neliöitä
- Teksti ja merkit poltettuina kuvaan

### Tuntuu brändiltä

- Yksi taustaväri tai liukuväri koko valikoimalle
- Valo samalta puolelta joka kerta
- Tuote täyttää noin 70:stä 80:een prosenttia kuvasta
- Jokainen kuva 2048×2048-neliö
- Teema lisää merkit, kuvat pysyvät siisteinä

Pehmeä liukuväri taustastaan irrotetun tuotteen takana tuo syvyyttä ilman lavastusta. Pidä kontrasti matalana, jotta tuote on kuvan kirkkain asia. Lisää asetelmia on oppaassa [tuotekuvien taustat](https://gradiently.design/fi/guide/product-photo-backgrounds).

Lämmin studiokivi: `radial-gradient(circle at 50% 38%, #f7f3ee 0%, #ece4da 45%, #d9cdbf 100%)`

Lämmin luonnonvalkoinen laskeutuu reunoilla kiven sävyyn kuin pöydälle kerääntyvä valo. Se imartelee keramiikkaa, kynttilöitä, ihonhoitoa ja tekstiilejä.

## Oman näköiset Shopify-alennusbannerit

Alennuksissa moni kauppa menettää ilmeensä. Tavallinen reaktio on punainen, tähtikuvio ja suurin kirjaimin ALE, jolloin kauppa näyttää samalta kuin kaikki muut sinä viikonloppuna. Säilytä oma tausta ja typografia. Muuta vain sanoja ja ehkä värin voimakkuutta.

Leveä Shopify-alennusbanneri Talviale. 30% alennusta, päättyy sunnuntaina

Alennuspääkuva säilyttää kaupan oman taustan ja typografian.

Saman talvialebannerin pystysuuntainen Instagram-tarinaversio yhtenäisellä taustalla ja sanoilla

Sama viesti 1080×1920-tarinana, jotta alennus näyttää yhdeltä kampanjalta.

- Kerro tarjous alle kuudella sanalla: ”Talviale. 30% alennusta.”
- Aseta päättymisaika ylätunnisteeseen, jotta kiireellisyys on rehellistä.
- Käytä samoja sanoja pääkuvassa, sähköpostin otsakekuvassa ja tarinassa. Pidä tarinan sanat keskimmäisen [turva-alueen](https://gradiently.design/fi/guide/social-media-safe-zones) sisällä.
- Poista banneri alennuksen päättyessä. Vanhentunut alennuspääkuva kertoo, ettei kauppaa hoideta.

Kiireisiin viikonloppuihin [Black Friday -somejulkaisut](https://gradiently.design/fi/guide/black-friday-post-ideas) ja [alennusjulkaisun suunnittelu](https://gradiently.design/fi/guide/sale-post-design) tarjoavat lainattavia asetteluja ja sanoituksia.

## Sama ilme kaupassa, sähköpostissa ja somessa

Sama asiakas näkee pääkuvan, tuoteruudukon, sähköpostin otsakekuvan ja Instagram-julkaisun muutaman päivän sisällä. Kun niissä on yhteinen tausta, otsikkofontti ja pieni paletti, jokainen muistuttaa edellisestä. Tätä [brändin johdonmukaisuus](https://gradiently.design/fi/guide/brand-consistency) tarkoittaa kaupan arjessa.

- Hyllyvalkoinen: #f7f3ee
- Kivi: #d9cdbf
- Pähkinänruskea: #8a6f5a
- Muste: #2f2a26
- Terrakottakorostus: #c8553d

Rauhallinen kauppapaletti: kaksi taustaa, keskisävy, tekstimuste ja yksi korostus painikkeille ja tarjoussanalle.

Tässä Gradiently auttaa pientä kauppaa. Suunnittele pääkuva kerran Markille, elävälle liukuväritaustalle, jolla vain sinä voit viedä töitä lunastettuasi sen. Pro muuttaa sen tarinaksi, sähköpostin otsakekuvaksi ja linkkiesikatseluksi yhdessä vaiheessa. Myös Prohon kuuluva eräluonti täyttää tuotekorttipohjan nimien ja hintojen taulukosta, joten uuden kokoelman grafiikat ovat yhtenäisiä. [Yksi ilme, kaikki koot](https://gradiently.design/fi/guide/one-look-every-size) näyttää työnkulun.

> **Kirjoita alt-teksti ladatessasi** Shopify antaa lisätä alt-tekstin jokaiseen tuotekuvaan ja banneriin. Kuvaile kuvan sisältö tavallisin sanoin. Se auttaa ruudunlukijan käyttäjää ja antaa hakukoneille ymmärrettävää sisältöä.

## FAQ

### Minkä kokoinen Shopify-kaupan bannerin tulee olla?

Suunnittele etusivun pääkuva koossa 1920×1080 ja pidä otsikko ja painike noin 1080 pikseliä leveässä keskisarakkeessa, sillä useimmat teemat rajaavat sivut puhelimissa.

### Mikä on paras Shopify-tuotekuvan koko?

2048×2048 pikselin neliö. Se pitää kokoelmaruudukon tasaisena ja antaa tuotezoomaukseen riittävästi yksityiskohtia.

### Miksi Shopify-banneri näyttää rajatulta mobiilissa?

Teemat sovittavat leveän bannerin puhelimen kapealle näytölle leikkaamalla sivuja tai muuttamalla korkeutta. Pidä tärkeät sanat ja tuotteet kuvan keskellä.

### Kannattaako Shopify-bannerikuvaan lisätä tekstiä?

Lyhyt teksti toimii keskellä, mutta monissa teemoissa otsikon ja painikkeen voi lisätä aitona tekstinä kuvan päälle. Se pysyy terävänä ja on helpompi muuttaa.

### Miten saan tuotekuvista yhtenäiset?

Käytä yhtä taustaa, valoa samalta puolelta, 2048×2048-neliökuvia ja tuotetta samankokoisena suhteessa jokaiseen kuvaan.