Banner per negozio Shopify: dimensioni, immagini prodotto e saldi

Un buon banner per negozio Shopify misura 1920×1080 pixel, porta un solo titolo breve e un solo pulsante, e tiene entrambi al centro dell’inquadratura, perché la maggior parte dei temi taglia i lati sul telefono. Abbinalo a immagini prodotto caricate come quadrati 2048×2048 sullo stesso sfondo, e il negozio inizia a sembrare un brand invece di un catalogo. Il resto di questa pagina tratta le dimensioni, i layout che reggono su ogni schermo e come fare banner dei saldi che restano riconoscibili come tuoi.

Dimensioni di banner e immagini Shopify

Shopify non ti impone una dimensione unica per il banner: ogni tema decide quanto è alto l’hero e come lo ritaglia. Partire da un master 16:9 è l’abitudine più sicura, perché riempie lo schermo di un portatile e lascia altezza sufficiente per ritagliare per un telefono.

Le immagini prodotto quadrate contano più di quanto sembri. Quando ogni foto di una collezione ha la stessa forma, la griglia si allinea e l’occhio confronta i prodotti invece di notare bordi irregolari. 2048 pixel danno inoltre allo zoom nella pagina prodotto abbastanza dettaglio da valere un tocco. La dimensione dell’anteprima del link è spiegata in dimensioni dell’immagine Open Graph.

Come progettare un banner hero che regge sul telefono

Su un portatile l’hero è largo e basso. Su un telefono la stessa immagine viene spesso ritagliata quasi a quadrato, oppure il tema mette le parole sotto di essa. In ogni caso i bordi spariscono, e con loro tutto ciò che è importante ai bordi.

1. 1

   Parti da 1920×1080

   Disegna a tutta larghezza, poi segna una colonna centrale larga circa 1080 pixel. È la parte che un telefono ha più probabilità di conservare.

2. 2

   Scrivi una riga, non tre

   «È arrivata la selezione d’autunno.» vince su un titolo, un sottotitolo e un codice sconto che si contendono lo spazio. I dettagli stanno nella pagina della collezione.

3. 3

   Usa un pulsante con un verbo

   Scopri la selezione, Compra le candele, Guarda le novità. La maggior parte dei temi aggiunge il pulsante da sola, quindi lascia un’area calma dove andrà.

4. 4

   Lascia che lo sfondo porti il brand

   Una foto di prodotto con una stanza movimentata dietro compete con le parole. Un campo di colore o un materiale coerente dietro un prodotto ritagliato si legge con qualsiasi taglio.

5. 5

   Controllalo sul tuo telefono

   Le anteprime del tema aiutano, ma apri il negozio online su un telefono vero prima di considerarlo finito.

Immagini prodotto che sembrano un solo negozio

I clienti giudicano un negozio dalla griglia molto prima di leggere una descrizione. Se un prodotto sta su un fondale bianco, il successivo sul piano della cucina e il terzo su un lenzuolo, il negozio sembra improvvisato anche quando i prodotti sono eccellenti. Scegli un solo fondale e un solo modo di illuminare, e ripetilo.

Una sfumatura morbida dietro un prodotto ritagliato funziona bene perché dà profondità senza un vero set. Tienila a basso contrasto così il prodotto resta la cosa più luminosa dell’inquadratura. Altre impostazioni in sfondi per foto di prodotto.

Banner dei saldi Shopify che restano riconoscibili come tuoi

I saldi sono il punto in cui la maggior parte dei negozi perde il proprio stile. Il riflesso solito è il rosso, un’esplosione e la parola SALDI in maiuscolo, che somiglia a ogni altro negozio nello stesso fine settimana. Tieni il tuo sfondo e i tuoi caratteri e cambia solo le parole e, magari, l’intensità del colore.

• Di’ l’offerta in meno di sei parole: «Saldi d’inverno. 30% di sconto.»
• Metti la data di fine nel sopratitolo, così l’urgenza è onesta.
• Usa le stesse parole sull’hero, sull’intestazione dell’email e sulla storia, e tieni le parole della storia dentro la zona sicura centrale.
• Togli il banner quando i saldi finiscono. Un hero di saldi scaduti dice ai visitatori che nessuno bada al negozio.

Per i fine settimana intensi, i post social per il Black Friday e il design dei post per i saldi offrono layout e parole da prendere in prestito.

Un solo stile tra negozio, email e social

L’hero, la griglia dei prodotti, l’intestazione dell’email e il post Instagram sono visti dallo stesso cliente a pochi giorni di distanza. Quando condividono uno sfondo, un font per i titoli e una piccola palette, ognuno ricorda al cliente il precedente. È questo che significa in pratica la coerenza del brand per un negozio.

È qui che Gradiently aiuta un piccolo negozio. Disegna l’hero una volta su un Mark, uno sfondo sfumato vivo con cui solo tu puoi esportare una volta riservato, e Pro lo ridimensiona per la storia, l’intestazione email e l’anteprima del link in un solo passaggio. La creazione in blocco, anch’essa su Pro, riempie un modello di scheda prodotto da un foglio di calcolo di nomi e prezzi, così le grafiche di una nuova collezione escono coordinate. Un solo stile, ogni formato mostra il procedimento.