Design della homepage ecommerce: guida sezione per sezione

Come progettare la homepage di un ecommerce sezione per sezione: cosa mettere above the fold, l'ordine dei blocchi, la checklist di lancio e le note per il mobile.

Domande frequenti

Cosa deve includere la homepage di un ecommerce?

Come minimo: un header con ricerca, carrello e navigazione per categorie; un hero che dica cosa vendi e proponga un solo passo successivo chiaro; un accesso alle categorie principali; qualche bestseller o novità; elementi di fiducia come spedizioni, resi e recensioni vere; e un footer con le policy e i contatti. Tutto il resto (blocchi editoriali, iscrizione alla newsletter, prova sociale) è facoltativo e deve guadagnarsi il suo spazio.

Cosa va above the fold nella homepage di un ecommerce?

Quattro elementi: una navigazione con ricerca e carrello, un titolo che dica cosa vendi, un'unica call to action principale che porti ai prodotti e un motivo visibile per fidarsi del negozio, come una riga su spedizioni o resi. Immagini di prodotto efficaci nell'hero aiutano i visitatori a capire il catalogo senza leggere nulla.

Quanti prodotti mostrare nella homepage?

Non esiste un numero universale. Mostra abbastanza prodotti da rappresentare l'assortimento, di solito una riga o una griglia di bestseller senza carosello più le tessere delle categorie, e poi rimanda alla collezione completa. Se vendi pochi prodotti puoi mostrarli tutti. Se ne vendi migliaia, la homepage deve indirizzare verso le categorie, non cercare di esporre il catalogo.

La homepage di un ecommerce deve avere uno slider o un carosello?

Un singolo hero statico di solito comunica più chiaramente di uno a rotazione. Le slide automatiche nascondono i contenuti dietro un timer, sono più difficili da rendere accessibili e spesso appesantiscono la pagina. Se devi promuovere più cose, dai a ciascuna una tessera dedicata sotto l'hero.

Come rendere più veloce la homepage del mio ecommerce?

Comprimi le immagini e dimensionale correttamente, usa formati moderni come WebP o AVIF, carica l'immagine dell'hero con priorità e in lazy loading tutto ciò che sta sotto, limita gli script di terze parti (chat, popup, tracciamento) e riserva lo spazio alle immagini perché il layout non si sposti durante il caricamento. PageSpeed Insights di Google e il report Core Web Vitals di Search Console mostrano cosa rallenta davvero la tua pagina.

È più importante la homepage o la scheda prodotto?

Le pagine prodotto e collezione sono il luogo in cui si prende la maggior parte delle decisioni d'acquisto, ma la homepage è spesso la prima impressione per chi arriva in modo diretto, dal brand o ritorna. Il suo compito è smistare: portare rapidamente ogni visitatore alla categoria o al prodotto giusto. Controlla nei tuoi dati analitici quante sessioni iniziano dalla homepage prima di decidere dove investire.

In breve: una buona homepage ecommerce ha un solo compito: portare ogni visitatore ai prodotti giusti, in fretta. Metti, in quest'ordine, un header chiaro (ricerca, carrello, categorie), un hero che dica cosa vendi con un solo pulsante principale, le tessere delle categorie, una breve riga di bestseller, gli elementi di fiducia (spedizioni, resi, recensioni) e un footer utile. Tutto ciò che sta above the fold deve rispondere a "che negozio è questo e dove devo cliccare?"

La guida in sintesi

Usala come ordine di partenza. Elimina le sezioni che non riesci a riempire con contenuti veri: un blocco "testimonianze" vuoto fa più danni di nessun blocco.

#	Sezione	Compito	Da mantenere a
1	Barra annunci	Un messaggio tempestivo: soglia di spedizione gratuita, fine dei saldi, termine ultimo per la consegna	Una riga
2	Header e navigazione	Ricerca, carrello, account, categorie principali	5-7 link di primo livello
3	Hero	Dire cosa vendi, proporre un solo passo successivo	Un titolo, un pulsante
4	Fascia di fiducia	Spedizioni, resi, pagamenti, assistenza	3-4 voci brevi
5	Tessere delle categorie	Indirizzare chi acquista in base a ciò che cerca	4-8 tessere
6	Bestseller / novità	Dimostrare che il catalogo è reale	Una riga o una griglia
7	Blocco valori o storia	Perché scegliere voi e non un altro negozio	Un breve blocco
8	Prova sociale	Recensioni vere, stampa, foto dei clienti	Solo se autentica
9	Iscrizione alla newsletter	Raccogliere i visitatori non ancora pronti ad acquistare	Un solo campo
10	Footer	Policy, contatti, link secondari	Colonne ordinate

Cosa va above the fold

"Above the fold" è tutto ciò che il visitatore vede prima di scorrere, e cambia a seconda del dispositivo. Progetta separatamente per lo schermo di un laptop e per quello di uno smartphone, invece di tracciare un'unica linea su un mockup. Qualunque sia il dispositivo, queste quattro cose devono essere visibili senza scorrere:

Navigazione con ricerca e carrello. Chi sa già cosa vuole userà prima la ricerca. Su desktop non nasconderla dietro un'icona.
Un titolo che nomini il prodotto. "Tazze in ceramica fatte a mano, spedite da Portland" vale più di "Benvenuti nel nostro negozio". Dì la categoria con parole semplici.
Una sola call to action principale. "Scopri le tazze" oppure "Scopri le novità". Un secondo link più discreto va bene; tre pulsanti di pari peso no.
Un motivo per fidarsi di voi. Una soglia di spedizione gratuita, un periodo di reso o un numero di recensioni che potete davvero sostenere. Usate solo affermazioni dimostrabili.

Nell'hero usa una vera foto di prodotto o di utilizzo, non un'immagine stock che potrebbe appartenere a qualsiasi negozio. L'immagine è il modo più rapido per far capire al visitatore di essere nel posto giusto.

Note sezione per sezione

Header e navigazione

Limita le categorie di primo livello a ciò che cercherebbe chi arriva per la prima volta, usando le parole che usa lui. Metti la ricerca in un campo ben visibile, tieni aggiornato il numero di articoli nel carrello e fai in modo che il logo riporti alla home. Con un catalogo ampio un mega menu può funzionare, ma verifica che sia utilizzabile con il trackpad e con la tastiera. Per approfondire il resto del negozio, leggi le nostre best practice per il design di un sito ecommerce.

Hero

L'hero deve avere un solo messaggio. Se hai una promozione stagionale, fanne l'hero per tutta la sua durata, poi torna al messaggio di sempre. Evita le slide a rotazione automatica: nascondono i contenuti dietro un timer e sono più difficili da rendere accessibili. Se hai più campagne, dai a ciascuna una tessera più in basso nella pagina.

Tessere delle categorie

È la sezione che fa il lavoro più pesante. Ogni tessera ha bisogno di una foto chiara e di un'etichetta semplice ("Scarpe da corsa donna", non "Collezione Stride"). Ordinale in base a ciò che vuoi vendere di più o a ciò che i visitatori cercano di più, non in ordine alfabetico.

Bestseller e novità

Mostra prodotti veri con prezzi veri, non una griglia generica. Ogni scheda ha bisogno di immagine, nome, prezzo e link; aggiungi le valutazioni solo se hai recensioni autentiche. Mantieni coerenti le proporzioni delle immagini, così la griglia resta ordinata. Chiudi la riga con un link "Vedi tutto" verso la pagina della collezione.

Fiducia e prova sociale

Chi acquista esita su costi di spedizione, resi e sull'affidabilità del negozio. Rispondi a questi dubbi nella homepage con righe brevi e precise: tempi di consegna, periodo di reso, metodi di pagamento accettati e un modo per contattarvi. Per le recensioni, mostra quelle vere, con nomi o etichette di verifica, secondo ciò che la tua piattaforma consente. Non inventare mai testimonianze o valutazioni: oltre a essere scorretto, in molti paesi è contrario alle norme sulla tutela dei consumatori.

Footer

Il footer è il posto in cui chi acquista con attenzione cerca le policy. Includi spedizioni, resi, privacy, termini e condizioni, contatti e un link alla guida alle taglie o alle FAQ, se le hai. Trovi esempi di layout negli esempi di design del footer di un sito.

Note per il mobile

La maggior parte dei negozi riceve una buona quota di visite da smartphone, quindi controlla nei tuoi dati analitici com'è la ripartizione. Progetta la homepage mobile come un layout a sé, non come una pagina desktop compressa.

Mantieni breve l'hero. Titolo, immagine e pulsante devono essere visibili insieme sullo schermo di un telefono tipico, senza dover scorrere oltre l'header.
Abbondanza di area di tocco. Pulsanti, filtri e voci di menu devono avere dimensioni e spaziatura adatte ai pollici. Prova su un dispositivo vero.
Comprimi la navigazione con criterio. Un'icona del menu va bene, ma tieni ricerca e carrello visibili nella barra dell'header.
Usa lo scorrimento orizzontale con parsimonia. Una riga di prodotti che scorre di lato è accettabile se fa intuire chiaramente che c'è altro contenuto; una griglia in colonna è più sicura.
Evita i popup a schermo intero all'arrivo. Bloccano la pagina e possono danneggiare sia l'usabilità sia la visibilità sui motori di ricerca. Ritardali o sostituiscili con un blocco di iscrizione integrato nella pagina.
Occhio alla tastiera. Assicurati che il campo email per l'iscrizione non venga coperto quando si apre la tastiera sullo schermo.

Velocità e accessibilità: le basi

Una homepage bellissima ma lenta perde i visitatori prima che la vedano. Le leve più importanti sono quasi sempre le immagini e gli script di terze parti.

Comprimi le immagini e usa formati moderni come WebP o AVIF.
Assegna alle immagini larghezza e altezza esplicite, così il layout non si sposta durante il caricamento.
Carica per prima l'immagine dell'hero; usa il lazy loading per quelle sotto.
Controlla ogni script di terze parti (chat, popup, tracker) e rimuovi ciò che non usi.
Scrivi veri testi alternativi per le immagini di prodotti e categorie.
Verifica che il testo abbia un contrasto sufficiente con lo sfondo e che ogni elemento interattivo funzioni con la tastiera.

Usa PageSpeed Insights di Google sul tuo URL online per vedere quali file specifici ti rallentano.

Checklist della homepage

Copiala nelle tue note di lancio:

[ ] L'header ha ricerca e carrello visibili e 5-7 link chiari alle categorie
[ ] Il titolo dell'hero dice con parole semplici cosa vendiamo
[ ] Un solo pulsante principale, che porta ai prodotti e non a una pagina "Chi siamo"
[ ] L'immagine dell'hero mostra un prodotto vero o un uso reale
[ ] Spedizioni e resi riassunti above the fold o appena sotto
[ ] Le tessere delle categorie usano il linguaggio dei clienti e coprono le gamme principali
[ ] I bestseller mostrano prezzi veri e rimandano alle pagine prodotto
[ ] Recensioni e citazioni stampa presenti solo se autentiche
[ ] L'iscrizione alla newsletter è un solo campo con un vantaggio chiaro
[ ] Il footer include policy, contatti e metodi di pagamento
[ ] Nessun carosello automatico che nasconda contenuti chiave
[ ] Layout mobile verificato su un telefono vero
[ ] Immagini compresse, dimensionate e dotate di testo alternativo
[ ] Title e meta description scritti appositamente per la homepage

Errori comuni

Voler mostrare tutto. La homepage è uno smistamento, non un catalogo.
Testo dell'hero vago. Se uno sconosciuto non capisce cosa vendi in cinque secondi, riscrivi il titolo.
Promuovere cinque cose allo stesso modo. Quando tutto è in evidenza, niente lo è.
Urgenza finta. I conto alla rovescia che si azzerano a ogni visita minano la fiducia.
Ignorare chi ritorna. Valuta un blocco "continua lo shopping" o "visti di recente" se la tua piattaforma lo supporta.

Per i principi generali della homepage al di là dell'ecommerce, le nostre guide su come progettare una homepage e il design della homepage di un sito web vanno più a fondo, e se stai ancora scegliendo una piattaforma, consulta i migliori website builder per l'ecommerce.

Metterlo in pratica

Inizia scrivendo i contenuti prima di progettare: il titolo, i nomi delle categorie, le righe su spedizioni e resi e i tuoi sei prodotti migliori. Poi disponili nell'ordine indicato sopra. Se vuoi partire avvantaggiato con il layout, il piano gratuito di We.Inc ti permette di pubblicare fino a tre siti a partire da template già pronti; il builder AI che genera un sito da un prompt parte dal piano Starter a $20 al mese. Puoi iscriverti qui. Qualunque strumento tu usi, controlla ogni sezione con la checklist prima del lancio.