Lyhyesti
- 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.
Tällä sivulla
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.
Suunnittelukoko
Kuvasuhde
Suunnittelukoko
Kuvasuhde
Suunnittelukoko
Kuvasuhde
Suunnittelukoko
Kuvasuhde
Suunnittelukoko
Kuvasuhde
Suunnittelukoko
Kuvasuhde
Suunnittelukoko
Kuvasuhde
Pääkuva 16:9
1920 × 1080
Tuote 1:1
2048 × 2048
Blogibanneri 2:1
1200 × 600
Tarina 9:16
1080 × 1920
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.
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.
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.
radial-gradient(circle at 50% 38%, #f7f3ee 0%, #ece4da 45%, #d9cdbf 100%)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.
Alennuspääkuva säilyttää kaupan oman taustan ja typografian.
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 sisällä.
- Poista banneri alennuksen päättyessä. Vanhentunut alennuspääkuva kertoo, ettei kauppaa hoideta.
Kiireisiin viikonloppuihin Black Friday -somejulkaisut ja alennusjulkaisun suunnittelu 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 tarkoittaa kaupan arjessa.
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 näyttää työnkulun.
Usein kysyttyä
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.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme