Best Practice per l'Immagine Hero di Shopify (Guida 2026)
L'hero della homepage Shopify è la prima impressione del tuo store — dimensioni, ritaglio mobile, overlay di testo e velocità di caricamento: ecco come farlo convertire.
La prima cosa che un visitatore vede sul tuo store Shopify non è una scheda prodotto — è l'hero della homepage. Quel singolo banner definisce il tono, la percezione del prezzo e se qualcuno scorrerà più in basso. Questo rende l'immagine hero di Shopify il visual più strategico dell'intero sito. Sbagliarlo significa perdere l'utente nei primi due secondi; farlo bene fa lavorare meglio ogni altra pagina dopo di esso.
Questa guida affronta i dettagli che fanno davvero la differenza: dimensioni e rapporti d'aspetto ideali, come l'immagine viene ritagliata su mobile, hero singolo vs slideshow, come mantenere il testo leggibile e le scelte sul peso del file per mantenere la homepage veloce.
Dimensioni e rapporti d'aspetto dell'hero
L'hero è diverso da una foto prodotto. Le immagini prodotto sono quadrate o 4:5 e vivono in una griglia ordinata; l'hero è a tutta larghezza, si estende da un bordo all'altro del viewport. Proprio quella larghezza lo rende complicato — un browser desktop può essere largo 1440 px mentre uno smartphone è a 390 px, quindi un'unica immagine deve adattarsi a forme molto diverse.
Ecco cosa caricare per un hero a tutta larghezza sulla homepage:
| Utilizzo | Dimensione di upload consigliata | Rapporto d'aspetto |
|---|---|---|
| Hero desktop a tutta larghezza | 1920 x 1080 px | 16:9 |
| Hero grande / retina | 2560 x 1440 px | 16:9 |
| Banner alto e immersivo | 2000 x 1000 px | 2:1 |
| Visualizzazione ritagliata su mobile (da pianificare) | rende ~4:5 o 1:1 | varia per tema |
| Formato file | Sorgente JPG o PNG | Shopify serve WebP |
Alcune regole che evitano lavoro inutile:
- Carica immagini da circa 1920-2560 px di larghezza. Abbastanza larghe per restare nitide su monitor grandi, abbastanza piccole da caricarsi velocemente. Un originale da 8000 px spreca solo banda.
- Progetta per 16:9, ma non fidarti del mobile. La maggior parte dei temi ritaglia l'hero a qualcosa vicino a 4:5 o quadrato sugli smartphone, quindi i bordi sinistro e destro dell'immagine desktop spesso spariscono.
- Lascia che Shopify gestisca il formato. Carica un JPG o PNG nitido e Shopify converte automaticamente in WebP per i browser compatibili — ovvero la maggior parte del tuo traffico.
Se vuoi le specifiche corrispondenti per il resto del tuo store, il nostro riferimento alle dimensioni delle immagini prodotto Shopify copre in dettaglio le dimensioni della galleria e delle collezioni.
Ritaglio su mobile e punto focale
Più della metà del traffico Shopify proviene da mobile, eppure la maggior parte degli hero vengono progettati su desktop e verificati solo su desktop. È qui che si rompono. Quando il tema ritaglia il tuo banner 16:9 in una forma più alta per mobile, di solito ritaglia dal centro — quindi tutto ciò che è importante vicino al bordo sinistro o destro viene tagliato via.
Mantieni il soggetto nella zona sicura
Considera il 60% centrale dell'hero come l'unica area davvero sicura. Posiziona il prodotto, il modello e soprattutto il titolo all'interno di quella fascia centrale. I bordi esterni sono respiro decorativo che il mobile eliminerà.
Usa l'impostazione del punto focale del tema
La maggior parte dei temi Shopify moderni (Dawn e i suoi derivati) ti permette di impostare un punto focale nell'editor del tema — un piccolo mirino che trascini sulla parte dell'immagine che deve rimanere sempre in inquadratura. Impostalo sul prodotto o sul viso, non sul cielo vuoto. Questa singola impostazione risolve la maggior parte dei problemi del tipo "il mio hero sembra rotto su mobile".
Hero singolo vs slideshow
La slideshow è la funzionalità homepage più abusata e quasi sempre la scelta sbagliata. Sembra che tu stia mostrando di più, ma sia i dati che la meccanica parlano contro di essa.
Perché un hero singolo di solito vince
- L'attenzione si frammenta. Un banner rotante chiede ai visitatori di leggere due o tre messaggi in competizione; la maggior parte non ne legge nessuno e scorre oltre.
- La maggior parte delle slide non viene mai vista. La stragrande maggioranza dei visitatori non aspetta la seconda slide, quindi l'offerta che hai messo lì potrebbe tranquillamente non esistere.
- Le slideshow sono pesanti. Ogni slide è un'altra immagine grande da caricare, che abbassa il tuo LCP e il punteggio di velocità su mobile.
- La rotazione automatica nuoce. Un banner che si muove mentre qualcuno lo sta leggendo è un problema di usabilità, non una funzionalità.
Scegli il tuo messaggio singolo più forte — il tuo bestseller, il tuo lancio o la tua promessa principale — e dagli tutto lo spazio. Un'immagine, un titolo, un pulsante.
Quando una slideshow è giustificabile
Esistono eccezioni limitate: un momento genuinamente multi-campagna (una promozione che richiede tre offerte distinte) o un brand davvero visual-first. Anche in questi casi, limitati a due o tre slide con avanzamento manuale, mai con rotazione automatica, e accetta consapevolmente il costo in velocità.
Mantenere i testi overlay leggibili
Un hero quasi sempre porta un titolo e un pulsante, e il testo illeggibile su una foto affollata è l'errore hero più comune. L'immagine e le parole devono essere progettate insieme, non sovrapposte e sperate.
Costruisci spazio negativo
La soluzione più pulita è un'immagine che abbia già spazio vuoto dove andrà il testo — una parete liscia, un gradiente morbido o uno sfondo aperto su un lato. Se pianifichi la foto attorno al copy, raramente hai bisogno di trattamenti pesanti per renderla leggibile.
Aggiungi un overlay o gradiente sottile
Quando l'immagine è affollata, inserisci un overlay semi-trasparente (circa 20-40% nero, o un gradiente direzionale) dietro il testo. È la differenza tra un titolo che risalta e uno che sparisce nell'immagine. Mantienilo sottile — una campitura nera pesante rende l'intero store cupo.
Mantieni il copy breve e ad alto contrasto
Un titolo hero è di cinque-otto parole, non un paragrafo. Abbinalo a un pulsante orientato all'azione ("Scopri la collezione," non "Invia"), e controlla il contrasto su uno smartphone in piena luce, dove l'abbagliamento e il ritaglio più stretto espongono prima i testi deboli.
Peso del file, formato e velocità di caricamento
L'hero è, per definizione, l'elemento visibile più grande quando la tua homepage si carica — il che lo rende il tuo Largest Contentful Paint (LCP) nella maggior parte dei casi. Google misura l'LCP direttamente, e un hero lento penalizza sia le conversioni che il posizionamento nei risultati di ricerca. La velocità qui non è opzionale.
| Obiettivo | Raccomandazione |
|---|---|
| Peso del file hero (servito) | Sotto ~200 KB dopo compressione WebP |
| Larghezza di upload | 1920-2560 px (non 8000 px) |
| Formato | Carica JPG/PNG; Shopify serve WebP |
| Caricamento | Immediato — non usare mai lazy-load per l'hero |
Tre abitudini per mantenere l'hero veloce:
- Dimensiona correttamente la sorgente. Un upload da 2560 px è più che sufficiente; gli originali sovradimensionati sono la causa principale di una homepage lenta.
- Non usare mai il lazy-load per l'hero. Le immagini sotto la piega dovrebbero caricarsi in lazy, ma l'hero è sopra la piega e deve dipingersi immediatamente. Applicargli il lazy-load danneggia direttamente l'LCP.
- Sfrutta il WebP. La conversione automatica WebP di Shopify taglia tipicamente il peso dell'hero del 30-70% rispetto al JPEG, senza perdita di qualità visibile. Non devi convertire nulla tu stesso — carica solo file sorgente nitidi.
Scegliere un'immagine on-brand che converte
Le specifiche tecniche fanno sì che un hero si carichi e venga ritagliato correttamente; è l'immagine vera e propria a spingere qualcuno ad acquistare. Un hero che converte fa tre cose: mostra il prodotto (o il risultato del suo utilizzo), lascia spazio per il messaggio e riflette inconfondibilmente il tuo brand. Una foto stock generica di uno sconosciuto sorridente non fa nessuna delle tre.
Per la maggior parte degli store, l'hero più efficace è uno di tre tipi: una scena lifestyle pulita che mostra il prodotto in uso reale, uno scatto centrato sul prodotto con respiro per il titolo, o un semplice banner valore-proposta con un singolo prodotto su uno sfondo del colore del brand. Qualunque tu scelga, deve rispecchiare i colori, la luce e l'atmosfera delle tue schede prodotto — un hero che sembra scollegato dal catalogo erode silenziosamente la fiducia.
Produrre visual hero rapidamente con l'AI
Il collo di bottiglia raramente è sapere come appare un buon hero — è produrne uno on-brand senza un servizio fotografico. È qui che l'AI si inserisce perfettamente in un workflow Shopify. Con uno strumento come HedaAI, carichi una foto reale del tuo prodotto (più angolazioni danno risultati migliori) e ottieni in pochi minuti un set completo di 12 immagini e-commerce — 8 immagini principali e da galleria più 4 banner in stile A+ — generate in pochi minuti. Quei banner A+ larghi e le scene lifestyle sono esattamente il tipo di visual puliti e on-brand che puoi ritagliare in un hero homepage, e poiché provengono tutti dalla stessa pipeline condividono i colori reali, l'illuminazione e l'inquadratura del tuo prodotto.
Per essere chiari su cosa fa: HedaAI genera le immagini — scatti su sfondo bianco puro, scene lifestyle, infografiche e banner larghi — non il tema Shopify né il layout dell'hero stesso. Tu inserisci il visual nella sezione hero del tuo tema, imposti il punto focale e aggiungi il titolo. Un'elaborazione gratuita ti dà un'anteprima con filigrana per valutare la qualità, e il primo pagamento rimuove le filigrane e sblocca i download HD 2K a $1.00 per prodotto (i nuovi account ricevono $2 di crediti gratuiti, circa due prodotti gratis). Puoi sfogliare esempi reali prima/dopo o consultare i dettagli sui prezzi prima di impegnarti.
Per i fondamenti di illuminazione e inquadratura alla base di qualsiasi buona immagine sorgente, i nostri consigli sulla fotografia prodotto Shopify si abbinano bene a questa guida, e la guida alle immagini prodotto Shopify copre le immagini da galleria che i visitatori vedono dopo che l'hero ha fatto il suo lavoro.
Il punto chiave
L'hero Shopify ha due secondi per fare la prima impressione più pesante del tuo sito. Carica un'immagine nitida da 1920-2560 px, progetta per 16:9 ma imposta un punto focale per mobile, scegli un hero singolo anziché una slideshow, costruisci spazio per un testo leggibile e mantienilo sotto ~200 KB così si carica per primo. Fai bene queste cinque cose e la tua homepage guadagna lo scroll — che l'immagine venga da uno studio fotografico, dal tuo smartphone o dall'AI.