Design della homepage per PrestaShop: prime impressioni che convertono

La homepage raramente è la pagina più importante: per la maggior parte dei negozi PrestaShop, le pagine che chiudono davvero le vendite sono quelle prodotto, e una quota consistente del traffico da Google arriva direttamente su categorie e prodotti, saltando del tutto la homepage. Ma la homepage è la tua pagina più visibile: è dove atterrano le ricerche del nome del brand, dove puntano gli annunci, dove arrivano i visitatori grazie al passaparola e da dove ripartono i clienti abituali. Il suo compito è ristretto e preciso: rispondere a "che negozio è questo e dove devo andare adesso?" abbastanza in fretta da far proseguire il visitatore invece di perderlo. Questa guida riguarda proprio la costruzione della homepage in PrestaShop: quali moduli e hook la piattaforma mette davvero a disposizione, dove configurarli nel back office e quali comportamenti predefiniti ti costano conversioni senza farsi notare.

Ultimo aggiornamento: giugno 2026.

Questo è l'articolo dedicato alla homepage nel nostro gruppo di guide sulla navigazione. La struttura che sta dietro la homepage, cioè come si annidano le categorie e come i clienti navigano e cercano, ha guide dedicate: le colleghiamo nei punti giusti invece di trattarle qui solo a metà.

Come viene costruita davvero una homepage PrestaShop

Questo spiazza i commercianti che arrivano da WordPress o da un'esperienza con page builder: in PrestaShop la homepage non è una pagina che modifichi in un unico punto. Il front controller è il controller index (IndexController), e ciò che viene renderizzato nel corpo della pagina dipende dai moduli agganciati a displayHome, l'hook principale per il contenuto della homepage nelle configurazioni Classic/predefinite. Intorno ci sono gli hook di layout condivisi da tutto il sito, soprattutto displayTop (l'intestazione) e gli hook del footer. Ogni blocco della homepage è l'output di un modulo separato, impilato secondo l'ordine dell'hook displayHome.

Nel tema Classic predefinito, un'installazione pulita di PrestaShop aggancia subito questi moduli a displayHome:

• ps_imageslider — il carosello di immagini a rotazione in alto.
• ps_banner — una singola immagine banner statica.
• ps_featuredproducts — la griglia "Prodotti popolari" che attinge dalla categoria "Home".
• ps_customtext — un blocco HTML/testo modificabile (è il "Blocco testo personalizzato" che vedi in fondo a una nuova installazione).

Controlli l'ordine e la presenza di ciascuno di questi elementi da Design → Positions nel back office: trova l'hook displayHome e trascina i blocchi modulo nella sequenza che vuoi, oppure sgancia quelli che non ti servono. Questa è la cosa più utile da capire su una homepage PrestaShop: non esiste un "editor della homepage", esiste una pila di moduli agganciati, e riordinare quella pila è il modo in cui la riprogetti senza toccare un file del tema.

Above the fold: cosa devono dire quei primi pixel

"Above the fold" è tutto ciò che appare sullo schermo prima che il visitatore scorra la pagina: circa i primi 600–700px su desktop, meno su telefono. In quello spazio la homepage deve comunicare tre cose, e la poesia vaga sul brand non ne comunica nessuna:

• Cosa vendi. "Sistemi doccia walk-in di lusso" o "Borse in pelle fatte a mano a Firenze", non "prodotti di qualità per la vita moderna", che non dice al visitatore se si trova nel negozio giusto. Questo va inserito in un vero H1, visibile, non sepolto in un'immagine. In PrestaShop l'H1 della homepage di solito è definito dal template home del tema o dal blocco contenuto superiore, e nelle installazioni predefinite spesso manca o è vuoto: vale la pena controllarlo.
• Perché sei diverso. Spedizione gratuita oltre una certa soglia, garanzia, produzione su ordinazione, spedizione il giorno successivo: il tuo vero motivo per comprare qui invece che su Amazon.
• Cosa fare dopo. Una chiamata all'azione chiara che sia meglio di "sfoglia": "Acquista la collezione", "Scopri le novità", "Trova la tua taglia".

Un test economico: mostra la homepage per tre secondi a qualcuno che non l'ha mai vista, poi chiudila e chiedi "cosa vende questo negozio?" Se non sa rispondere, il contenuto above-the-fold non sta funzionando, e nessuna rifinitura grafica più in basso nella pagina corregge una prima schermata confusa.

La questione dello slider: ps_imageslider e perché il predefinito ti penalizza

PrestaShop installa ps_imageslider agganciato alla homepage per impostazione predefinita, quindi la piattaforma stessa ti spinge verso un carosello a rotazione. Da anni la ricerca sull'usabilità indica la direzione opposta: il lavoro di Nielsen Norman Group ha rilevato che pochissimi utenti interagiscono con le slide dei caroselli e, tra quelli che lo fanno, la grande maggioranza interagisce solo con la prima slide; i banner a rotazione automatica attivano anche la "cecità ai banner", per cui i visitatori ignorano tutto ciò che assomiglia a una pubblicità. Tratta questi risultati come indicazioni, non come garanzie per il tuo negozio specifico: ma il meccanismo è solido e i costi sono concreti:

• Messaggi in competizione si indeboliscono a vicenda. Cinque slide con cinque offerte significano che il visitatore non ne assimila nessuna.
• Prestazioni. ps_imageslider carica più immagini a tutta larghezza più il JavaScript dello slider sulla pagina più visitata, proprio quella in cui i Core Web Vitals (in particolare LCP) contano di più, perché l'immagine della prima slide di solito è l'elemento largest contentful paint.
• Conflitto con i gesti su mobile. Un carosello scorribile entra in competizione con lo scorrimento verticale naturale, causando scorrimenti laterali accidentali.

La mossa pratica in PrestaShop: riduci ps_imageslider a una sola slide oppure sgancialo da Design → Positions e sostituiscilo con una sezione hero statica forte: una sola immagine, un titolo, un pulsante. Se gestisci davvero più campagne, usa una griglia statica di due o tre riquadri banner sotto la hero, così i visitatori vedono tutte le opzioni insieme invece di aspettare una rotazione. Creare banner hero responsive e griglie promozionali senza modificare i file del tema è esattamente lo scopo del nostro modulo banner: un editor visuale per banner con testo sovrapposto, timer per il conto alla rovescia e layout specifici per mobile, configurato dal back office. Che cosa ottieni in pratica? Sostituisci il carosello predefinito con una hero mirata e veloce, senza sviluppatore e senza fare un fork del tema, quindi la modifica sopravvive al prossimo aggiornamento di PrestaShop.

Indirizzare i visitatori: categorie in evidenza

Dopo che la hero ha detto chi sei, il blocco successivo risponde a "dove vado da qui?": e su una homepage questo significa punti di ingresso alle categorie, non l'intero menu. Mostra le 4–8 categorie di primo livello che coprono la maggior parte delle vendite, ciascuna come scheda immagine cliccabile con un'etichetta chiara e umana ("Docce walk-in", non "Categoria 1"; "Stivali da donna", non "Calzature A/I"). Una griglia visiva è quasi sempre più cliccata di un elenco testuale.

Il modo in cui quelle categorie sono strutturate sotto, quanto in profondità si annidano e come vengono nominate per clienti e Google, è una disciplina a parte; se è sbagliato in homepage, di solito è sbagliato ovunque. Trattiamo la struttura in sé in struttura delle categorie PrestaShop per una navigazione ottimizzata SEO, e il punto collegato, cioè perché l'intestazione in pagina di una categoria non dovrebbe copiare ciecamente il suo nome, in perché l'H1 della categoria non dovrebbe essere il nome della categoria.

La griglia della homepage inoltre non è la navigazione principale. Il menu persistente, cioè il mega menu che la maggior parte dei negozi desidera per un catalogo profondo, è una scelta separata con compromessi propri; la affrontiamo in modo completo in costruire un mega menu PrestaShop che converte e, dal punto di vista dell'esperienza di navigazione, in rendere le categorie facili da esplorare.

Prodotti in evidenza: cura la selezione, non scaricare tutto

Per impostazione predefinita ps_featuredproducts mostra i prodotti della categoria "Home", e il numero è configurabile: vai su Modules → Module Manager, trova "Featured products on the homepage" e imposta quanti prodotti mostrare (8–12 è il punto ideale per una o due righe pulite). Oltre quella soglia, la homepage si trasforma in una pagina categoria, tradendo il senso di un ingresso curato.

Cosa mettere in evidenza: bestseller (prodotti che hanno già dimostrato di convertire e rassicurano chi visita per la prima volta), novità con un badge "Nuovo" per dare ai clienti di ritorno un motivo per tornare, e una distribuzione di fasce di prezzo che comunichi l'ampiezza dell'offerta. Evita di mostrare prodotti esauriti, fuori produzione o in liquidazione: la homepage deve presentare il negozio al meglio. Nota un dettaglio meccanico: ps_featuredproducts prende i prodotti in base all'assegnazione alla categoria ("Home"), quindi "mettere in evidenza" un prodotto significa assegnarlo a quella categoria, non contrassegnarlo singolarmente.

Una riga di prodotti in homepage è una scorciatoia curata, non uno strumento di scoperta. Quando un visitatore sa più o meno cosa vuole ma non esattamente quale prodotto scegliere, il lavoro avviene nei filtri di categoria e nella ricerca, entrambi più profondi di quanto una homepage possa essere. Per cataloghi grandi, il filtraggio a faccette fa la differenza tra trovare un prodotto e rinunciare: vedi aiutare i clienti a trovare prodotti in cataloghi grandi e, per la pagina in cui vivono quei filtri, pagine categoria che convertono. Quando i visitatori digitano invece di navigare, la ricerca predefinita di PrestaShop è spesso l'anello debole: spieghiamo come correggerlo in ricerca intelligente per PrestaShop.

Riprova sociale: fiducia senza dire "fidati di noi"

La riprova sociale è qualsiasi prova che altre persone abbiano comprato da te e siano rimaste soddisfatte. Le forme che meritano spazio sopra o vicino alla prima schermata:

• Valutazioni aggregate — una valutazione a stelle e il numero di recensioni stabiliscono credibilità all'istante. Se usi Trustpilot, Google Reviews o un modulo recensioni prodotto per PrestaShop, mostra il widget invece di nasconderlo nel footer.
• Numeri concreti — "50.000+ ordini spediti" è più forte di "scelto da molti". Usa solo numeri che puoi davvero sostenere.
• Loghi "visto su" — menzioni su stampa o marketplace, particolarmente preziose per negozi più nuovi.
• Badge di fiducia — loghi dei metodi di pagamento accettati, indicatori SSL/pagamento sicuro, icone di garanzia, in una striscia orizzontale ordinata.

In PrestaShop questi elementi di solito vivono in un blocco ps_customtext o in un blocco HTML personalizzato agganciato a displayHome, così puoi posizionare la striscia esattamente dove vuoi rispetto alla hero e alla griglia prodotti.

Blocchi di contenuto: storia, differenziatori e SEO della homepage

Sotto le sezioni prodotto, alcuni blocchi di contenuto svolgono una doppia funzione: raccontano ai visitatori chi sei (conversione) e danno alla homepage testo reale indicizzabile (SEO). Tienili brevi e facili da scansionare: una storia del brand in due o tre frasi (non tutta la pagina Chi siamo), una riga icona-più-testo con i differenziatori ("Spedizione gratuita oltre €50", "Garanzia di 5 anni", "Spedizione prima delle 14:00") e, opzionalmente, un'anteprima dei tuoi due o tre ultimi articoli per comunicare freschezza.

Quest'ultimo punto si collega a una lacuna comune di PrestaShop: la piattaforma non ha un blog integrato, quindi un blocco "ultimi articoli" in homepage ha bisogno di un modulo contenuti alle spalle. Se non pubblichi ancora sul sito, ne parliamo in un blog integrato per PrestaShop senza WordPress.

Dal lato SEO, il tag title e la meta description della homepage si impostano nel back office sotto Shop Parameters → Traffic & SEO → SEO & URLs (modifica la voce pagina in stile "Index" / "pagenotfound" chiamata index), non in un file del tema. Punta a un titolo che unisca il brand alla categoria principale ("BrandName — Sistemi doccia walk-in"), una meta description che parta dalla proposta di valore, un H1 visibile con la parola chiave e circa 200–400 parole di testo naturale in homepage (di solito bastano la storia del brand e i blocchi differenziatori). Per organizzare tutto questo, cioè contenuti HTML flessibili posizionati tramite hook, con visibilità separata per desktop e mobile, il nostro modulo blocchi HTML ti permette di creare e posizionare blocchi personalizzati nelle pagine PrestaShop dal back office, per dispositivo. Il vantaggio: componi le sezioni contenuto della homepage senza modificare file .tpl, e puoi mostrare un set di blocchi più leggero sui telefoni.

La homepage mobile è una pagina diversa

Oggi più della metà delle sessioni sui negozi online avviene da telefono, e uno schermo da 375px non è un monitor da 1920px ristretto: è un layout diverso. Il modello a hook e moduli di PrestaShop aiuta, perché i nostri blocchi HTML e il modulo banner supportano la visibilità per dispositivo, così puoi nascondere o sostituire blocchi su mobile invece di comprimere sul telefono l'intera pila desktop, anche se per i moduli home nativi le varianti mobile richiedono in genere supporto da parte del tema o del modulo:

• Hero: il testo sovrapposto deve essere abbastanza grande da leggersi anche in piccolo; se la hero desktop usa testo fine su un'immagine carica, prepara una versione mobile separata e più semplice.
• Griglia categorie: al massimo due colonne, con aree di tocco ampie.
• Prodotti in evidenza: una riga a scorrimento orizzontale, con l'elemento successivo che spunta dal bordo, di solito batte una griglia compressa.
• Riprova sociale: consolida recensioni, numeri e badge in una sola striscia compatta invece di creare più sezioni impilate.

Il mobile è un tema abbastanza profondo da meritare un trattamento separato oltre la homepage: il quadro completo è in mobile commerce: il tuo negozio su telefono.

Cosa non mettere sulla homepage PrestaShop

• Tutto il catalogo. La homepage è una porta d'ingresso, non un magazzino: seleziona.
• Video in autoplay. Rallenta la pagina, consuma dati mobili e la maggior parte dei visitatori non lo guarda mai.
• Un pop-up all'arrivo. Un modale newsletter che si apre prima che il visitatore abbia visto un solo prodotto comunica disperazione e fa salire la frequenza di rimbalzo. I pop-up possono funzionare, ma in base a tempismo e intento, non al caricamento della pagina. La strategia (e come configurarla correttamente in PrestaShop) è in pop-up PrestaShop che convertono, e il caso specifico del benvenuto in pop-up di benvenuto fatti bene.
• Muri di testo. Nessuno legge paragrafi su una homepage: breve, scansionabile, guidato dai titoli.
• Flussi social incorporati. Caricano JavaScript di terze parti che rallenta la pagina e distrae dai prodotti. Collega invece i profili nel footer.

Misurare se la homepage funziona

La homepage ha un compito principale: indirizzare i visitatori più avanti. Quindi misura quello prima di tutto. Non giudicare su tre giorni di dati; osserva il trend su una finestra significativa. I numeri da monitorare:

Domande frequenti

Dove modifico davvero la homepage PrestaShop?

Non esiste un unico "editor della homepage". Il front controller è il controller index, e il corpo della pagina è composto dai moduli agganciati a displayHome. Riordini, aggiungi o rimuovi quei blocchi da Design → Positions, trovando l'hook displayHome e trascinando i blocchi modulo nell'ordine desiderato. Testi e SEO vivono altrove: il tag title e la meta description della homepage sono sotto Shop Parameters → Traffic & SEO → SEO & URLs (la voce pagina index).

Dovrei tenere il carosello predefinito ps_imageslider?

Di solito conviene ridurlo o sostituirlo. Le ricerche di usabilità (Nielsen Norman Group tra gli altri) rilevano con costanza che pochissimi utenti interagiscono con le slide dei caroselli, la maggior parte di chi lo fa interagisce solo con la prima, e i banner a rotazione automatica causano cecità ai banner. Lo slider carica anche più immagini a tutta larghezza più JavaScript sulla pagina più visitata, danneggiando LCP. Riducilo a una sola slide oppure sgancialo da Design → Positions e sostituiscilo con una hero statica e mirata.

Come cambio il numero di prodotti in evidenza mostrati in homepage?

Vai su Modules → Module Manager, trova "Featured products on the homepage" (ps_featuredproducts) e imposta il numero da mostrare: 8–12 è il punto ideale per una o due righe pulite. Nota il meccanismo: il blocco prende i prodotti assegnati alla categoria "Home", quindi "mettere in evidenza" un prodotto significa assegnarlo a quella categoria, non contrassegnarlo singolarmente.

Perché l'H1 della mia homepage manca o è vuoto?

Nelle installazioni predefinite l'H1 della homepage è definito dal template home del tema o dal blocco contenuto superiore, e spesso è vuoto o assente. È una vera lacuna SEO: la tua pagina più visibile dovrebbe avere un H1 chiaro, con parola chiave, che dica cosa vendi. Controllalo dopo ogni modifica al tema e impostalo tramite il blocco contenuto o il template home del tema invece di lasciarlo vuoto.

Posso mostrare un layout homepage diverso su mobile?

Per i moduli home nativi, le varianti mobile in genere richiedono supporto del tema o del modulo: PrestaShop non sostituisce da solo i blocchi in base al dispositivo. I nostri moduli blocchi HTML e banner aggiungono visibilità per dispositivo, così puoi nascondere o sostituire blocchi sui telefoni (una hero più semplice, una griglia categorie a due colonne, un'unica striscia di fiducia consolidata) invece di comprimere la pila desktop su uno schermo da 375px.

Il filo conduttore per una homepage PrestaShop: è un dispositivo di instradamento, assemblato da moduli agganciati a displayHome e ordinato da Design → Positions, non una pagina che scrivi una volta e dimentichi. Dì cosa vendi nella prima schermata, sostituisci il carosello predefinito con una hero mirata, manda i visitatori verso categorie ben strutturate e una ricerca che funzioni davvero, dimostra che sei affidabile e rimuovi tutto ciò che intralcia: poi guarda i clic in uscita, non l'istinto, per capire se sta funzionando.