Design della pagina prodotto PrestaShop: buone pratiche per la conversione

Ultima revisione: giugno 2026 — verificato con PrestaShop 1.7, 8 e 9. I percorsi dei template, gli hook e le posizioni nel back office indicati sotto sono aggiornati; in PrestaShop 9 gli URL dei prodotti non includono più per impostazione predefinita il percorso della categoria, un dettaglio importante se rinomini i prodotti (ne parliamo nelle sezioni su mobile e struttura della metà inferiore).

La homepage riceve la maggior parte dell'attenzione dai designer, ma la pagina prodotto riceve la maggior parte dell'attenzione dagli acquirenti. È l'ultima schermata che un visitatore vede prima di fare clic su "Aggiungi al carrello" oppure tornare indietro e, nella maggior parte dei negozi PrestaShop, è anche la più trascurata: configurata una volta quando è stato installato il tema, poi mai più rivista. Questa guida riguarda una cosa precisa: il design di quella pagina. Non la fotografia, non il copywriting, non quale widget di fiducia acquistare — ognuno di questi aspetti viene trattato più avanti — ma le scelte di layout che determinano se un visitatore già interessato al prodotto riesce davvero a raggiungere il pulsante di acquisto senza attrito.

Qui "design" non significa rendere la pagina più bella. Significa l'ordine in cui compaiono gli elementi, cosa si trova above the fold, come lo sguardo si muove dal prezzo al pulsante e quali file template o impostazioni del tema di PrestaShop devi toccare per cambiare qualcosa. Se sbagli la disposizione, anche una pagina piena di foto eccellenti e testi ben scritti converte male, perché il cliente non arriva mai alla parte che conta davvero.

Cosa significa "design della pagina prodotto" in PrestaShop

In un negozio PrestaShop 1.7, 8 o 9, la pagina prodotto viene generata dal controller product e assemblata a partire da alcuni template Smarty presenti in themes/your-theme/templates/catalog/ — soprattutto product.tpl, con l'area di acquisto a destra costruita tramite partial in catalog/_partials/ (riconoscerai product-add-to-cart.tpl, product-prices.tpl, product-variants.tpl, product-flags.tpl). La disposizione a due colonne "immagini a sinistra, box di acquisto a destra" usata da molti negozi è il layout predefinito del tema Classic. Saperlo è importante perché quasi ogni modifica di design che vorrai fare sarà una modifica a un template in quella cartella, uno spostamento di posizione in un hook o un'impostazione nel back office — non un mistero da risolvere con un redesign completo.

Gli hook che controllano ciò che appare intorno al box di acquisto principale sono quelli che userai più spesso: displayProductActions e displayProductPriceBlock stanno dentro l'area di acquisto, displayProductAdditionalInfo subito sotto, displayProductExtraContent alimenta le schede prodotto inferiori e displayFooterProduct gestisce i blocchi sotto il prodotto. Quindi cosa significa per te? Quando vuoi posizionare un badge, una stima di consegna o una frase rassicurante in un punto preciso, stai scegliendo un hook — non modificando file del tema sperando che il prossimo aggiornamento non cancelli tutto. Un modulo ben costruito si collega a questi hook invece di creare una derivazione del tuo product.tpl, ed è proprio questo che mantiene vive le modifiche di design durante gli aggiornamenti.

Se vuoi riordinare i moduli che finiscono nell'area di acquisto invece di riscrivere un template, il percorso più rapido è il back office: Design → Positions elenca ogni modulo collegato a ciascun hook e ti permette di trascinarlo più in alto o più in basso. È lì che risolvi il problema "un modulo spinge il mio pulsante sotto la piega" senza toccare nemmeno un file .tpl.

Il box di acquisto above the fold è l'unica scelta di design che conta sempre

Tutto ciò di cui un acquirente ha bisogno per decidere dovrebbe essere visibile senza scorrere: nome del prodotto, prezzo, immagine principale, selettore delle varianti, riga su disponibilità/scorte e pulsante Aggiungi al carrello. Questa è l'unica regola di design che sopravvive a ogni tendenza di redesign. Se un visitatore deve scorrere oltre una descrizione di 500 parole per trovare il prezzo, una parte significativa di utenti se ne andrà semplicemente: leggeranno "questo negozio mi sta facendo faticare" prima ancora di leggere una sola parola del tuo testo.

Nel tema Classic di PrestaShop il box di acquisto è già in alto, ma tre elementi spesso lo spingono verso il basso o lo compromettono:

• Una colonna immagini sovradimensionata. Se le immagini prodotto vengono caricate con proporzioni incoerenti, la colonna della galleria diventa molto alta e spinge il box di acquisto fuori dallo schermo sui laptop più piccoli. Correggi le dimensioni delle immagini alla fonte — ne parliamo in fotografia prodotto per e-commerce — non con rattoppi CSS.
• Un muro di testo nella descrizione breve. PrestaShop mostra la descrizione breve (il campo Riepilogo, description_short) direttamente dentro la colonna di acquisto. Limitati a due o tre righe di beneficio; la descrizione lunga va più in basso. Scrivere bene quel campo breve è una disciplina a sé — vedi come scrivere descrizioni prodotto che si posizionano e convertono.
• Moduli impilati sopra il pulsante. Ogni modulo agganciato a displayProductActions o al blocco prezzo spinge il pulsante verso il basso. Verifica cosa viene realmente eseguito in quell'area.

La gerarchia visiva: dove deve cadere lo sguardo, in ordine

Una pagina prodotto che converte guida lo sguardo lungo un percorso intenzionale: prima l'immagine (conferma "sì, è quello che cercavo"), poi nome e prezzo (i due dati che determinano il sì/no), quindi variante e disponibilità (posso avere proprio quella che voglio?) e infine il pulsante. Recensioni, consegna e rassicurazioni restano segnali di supporto attorno a questa struttura portante — senza mai competere con essa al primo colpo d'occhio.

L'errore di design più comune è dare agli elementi secondari un peso visivo primario. Un enorme banner "SPEDIZIONE GRATUITA" sopra il nome del prodotto, un carosello di prodotti correlati molto evidente prima ancora che il cliente abbia deciso se acquistare questo prodotto, un video in autoplay che cattura l'attenzione: ognuno di questi elementi sottrae focus alla struttura portante. Il test è brutalmente semplice: carica la pagina prodotto, guardala per un secondo, poi distogli lo sguardo. Sapresti dire il nome del prodotto, il prezzo e dove si trova il pulsante? Se no, la tua gerarchia sta lavorando contro se stessa.

Scelte di posizionamento che incidono davvero

Gran parte del lavoro di design su una pagina prodotto consiste nel decidere dove inserire alcuni elementi chiave. Questi posizionamenti sono decisioni di template/hook e, nella maggior parte dei negozi, hanno una risposta corretta e stabile:

La riga rassicurante sotto il pulsante merita una nota speciale, perché è la vittoria di design con il miglior rapporto impatto/sforzo dell'intera pagina: una singola riga che indica politica di reso, metodi di pagamento accettati e un segnale di sicurezza, posizionata dove lo sguardo si trova già nel momento dell'esitazione. La forma visiva di quei segnali — e se generano davvero fiducia o aggiungono solo rumore — è un tema a sé; vedi badge di fiducia e la questione più ampia di quanto il tuo negozio appaia affidabile.

Organizzare la metà inferiore: schede o un lungo scorrimento

Sotto il box di acquisto si trova la metà di dettaglio della pagina — descrizione lunga, specifiche, recensioni, informazioni di spedizione. Qui la scelta di design è la struttura: uno scorrimento infinito unico seppellisce tutto ciò che viene dopo la prima schermata, mentre schede ben costruite permettono a chi cerca dettagli di saltare direttamente a specifiche o recensioni. Il tema Classic di PrestaShop mette già in schede descrizione e scheda tecnica; la domanda è se ti servono più sezioni (guida all'installazione, garanzia, taglie) rispetto alle due schede native. È un argomento dedicato con un percorso modulo specifico — schede prodotto: aggiungere specifiche, guide e contenuti personalizzati spiega esattamente come aggiungere schede personalizzate senza modificare i file del tema. Se vuoi aggiungere queste sezioni dal back office invece che dal template, il nostro modulo Product Extra Info Tabs si collega a displayProductExtraContent e ti permette di combinare schede valide per tutto il catalogo (una scheda "Spedizione" condivisa ovunque) con schede specifiche per prodotto, così la metà inferiore resta organizzata senza una derivazione del tema che il prossimo aggiornamento cancellerebbe.

Una regola di design per la metà inferiore, indipendentemente da come la strutturi: non lasciare che un widget recensioni a scorrimento infinito continui senza fine, perché spinge il footer — con politica di reso, contatti e segnali di fiducia — permanentemente fuori portata. Impagina le recensioni, così la pagina ha una fine.

Il mobile è un design diverso, non lo stesso design rimpicciolito

Più della metà del traffico sulle pagine prodotto di un tipico negozio PrestaShop arriva da mobile, e un layout che funziona su desktop non funziona automaticamente su telefono. La disposizione desktop a due colonne collassa in una singola colonna impilata, e l'ordine di quella pila diventa una scelta di design da prendere in modo intenzionale. Se lo fai bene, la pagina sembra nativa; se lo fai male, il prezzo finisce sotto un'immagine a tutto schermo e il pulsante resta da qualche parte lontano.

• Ordine della pila: immagine, nome, prezzo, variante, pulsante — poi descrizione. La decisione di acquisto deve essere raggiungibile con il minimo scorrimento.
• Galleria scorrevole: l'area immagine dovrebbe scorrere orizzontalmente, non imporre una lista verticale di miniature che occupa lo schermo prima che appaia il prezzo.
• Aggiungi al carrello fisso: una barra inferiore fissa con prezzo e pulsante mantiene l'azione di acquisto a portata di mano, indipendentemente da quanto il cliente scorra tra specifiche e recensioni. È il pattern mobile con il maggiore impatto.
• Sezioni comprimibili: descrizione, specifiche e recensioni come accordion, mostrando le prime righe con un interruttore "leggi di più", così la pagina resta di lunghezza sensata su uno schermo piccolo.

Se costruisci da solo la barra mobile fissa, si tratta di un piccolo blocco nel product.tpl del tema child che riutilizza gli stessi partial di prezzo e aggiunta al carrello già renderizzati dal box di acquisto principale, mostrato solo sui viewport piccoli. Il punto è riutilizzare i partial esistenti, non duplicare il markup, così una futura modifica al blocco prezzo aggiornerà entrambi in una volta sola:

{* themes/your-child-theme/templates/catalog/product.tpl — sticky mobile buy bar *}
<div class="mpr-sticky-buy d-md-none">
  {block name='product_prices'}
    {include file='catalog/_partials/product-prices.tpl' product=$product}
  {/block}
  {block name='product_add_to_cart'}
    {include file='catalog/_partials/product-add-to-cart.tpl' product=$product}
  {/block}
</div>

/* custom.css — pin it to the bottom on phones only */
.mpr-sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 1030; background: #fff;
  padding: .5rem .75rem;
  box-shadow: 0 -2px 8px rgba(0,0,0,.08);
}

(La utility Bootstrap d-md-none la nasconde dalla larghezza tablet in su, quindi su desktop resta il normale pulsante nel flusso della pagina.)

Scelte di design che ti costano conversioni in silenzio

Alcune scelte di "design" diffuse lavorano attivamente contro la pagina. Nessuna riguarda il gusto: ognuna elimina un motivo concreto per cui un acquirente pronto se ne va:

• Video prodotto in autoplay. Rallenta la pagina, consuma dati su mobile e sequestra la struttura visiva. Mostra invece un pulsante play. (Se il video vende il tuo prodotto, il modo giusto per usarlo è trattato in integrazione YouTube per video prodotto che vendono.)
• Overlay pop-up "anche altri clienti hanno visto". Interrompono la decisione nel momento peggiore. Lascia che i prodotti correlati vivano nella pagina, sotto la piega, dove devono stare — la strategia è spiegata in cross-selling e upselling.
• Nascondere il prezzo dietro "richiedi un preventivo". In un negozio B2C questo fa perdere subito la maggior parte dei visitatori. Se il tuo modello lo richiede davvero, mostra almeno un intervallo, così la pagina non diventa un vicolo cieco.
• Un campo coupon invadente e vuoto. Richiamare l'attenzione su una casella sconto per cui il cliente non ha un codice lo manda su Google a cercarne uno, e alcuni non tornano più.

La velocità della pagina è un vincolo di design, non un pensiero successivo

Le pagine prodotto sono le pagine più pesanti di un negozio PrestaShop: galleria, JavaScript delle varianti, recensioni e moduli di prodotti correlati vengono tutti caricati qui. Un design che sembra perfetto ma impiega quattro secondi a renderizzare su telefono ha già perso il cliente per cui hai combattuto, con il layout, per conquistarne l'attenzione. Tratta il budget prestazionale come parte del design: punta a un Largest Contentful Paint sotto i 2,5 secondi su mobile e mantieni la pagina entro quel limite caricando in lazy loading immagini di prodotti correlati e recensioni sotto la piega, rinviando i moduli recensione finché il cliente non scorre vicino a essi, precaricando la prima immagine prodotto e facendo selezione rigorosa sul numero di script di terze parti (chat, heatmap, analytics) che lasci entrare nella pagina.

Come capire se il tuo design converte davvero

Le opinioni sul design costano poco; l'unico verdetto onesto arriva da una metrica: il tasso di aggiunta al carrello della pagina, cioè la quota di visitatori della pagina prodotto che aggiungono l'articolo al carrello. Il back office di PrestaShop non ti fornisce direttamente quel numero: Stats → Best-selling products mostra quantità venduta e visualizzazioni pagina per prodotto (un utile indicatore vendite/visualizzazioni), e l'elenco Orders → Shopping carts mostra i carrelli mentre si formano, ma il vero tasso di aggiunta al carrello arriva dai tuoi strumenti di analytics. Qualunque fonte tu usi, la disciplina è cambiare una cosa alla volta — spostare la riga rassicurante, accorciare la descrizione breve, correggere l'ordine mobile — e osservare la stessa metrica su abbastanza traffico da vedere una tendenza reale, non rumore di settimana in settimana. Una modifica di layout che "sembra migliore" ma non muove alcun numero è solo arredamento spostato.

Una pagina prodotto PrestaShop ad alta conversione non è una pagina più bella: è una pagina in cui la struttura portante (immagine, nome, prezzo, variante, pulsante) è raggiungibile con un solo sguardo, i segnali di supporto si trovano esattamente dove servono allo sguardo, lo stack mobile è progettato secondo le sue regole invece di essere ereditato dal desktop, e tutto si renderizza rapidamente. Se costruisci bene questa architettura, fotografia, testi e widget di fiducia che aggiungerai dopo lavoreranno tutti meglio, perché finalmente il cliente riuscirà a vederli.

Domande frequenti

Devo modificare direttamente product.tpl per cambiare il layout della pagina prodotto?

Solo in un tema child, e solo quando un hook o un'impostazione del back office non possono fare il lavoro. Modificare direttamente il product.tpl del tema parent significa che il prossimo aggiornamento del tema sovrascriverà il tuo lavoro. L'ordine più pulito è: prima prova Design → Positions per riordinare i moduli agganciati, poi un modulo che si collega all'hook giusto, e solo alla fine un override del template posizionato in themes/your-child-theme/templates/catalog/, così sopravvive agli aggiornamenti.

Dove appare davvero la descrizione breve nella pagina prodotto?

Il campo Riepilogo (description_short) viene renderizzato dentro la colonna di acquisto vicino al prezzo, above the fold — non nelle schede inferiori. È proprio per questo che deve restare breve: due o tre righe di beneficio. La Descrizione completa viene renderizzata più in basso, di solito in una scheda. Incollare lo stesso testo lungo in entrambi è la causa più comune di un box di acquisto spinto fuori dallo schermo.

Perché un modulo si trova sopra il mio pulsante Aggiungi al carrello, e come lo sposto?

È agganciato a displayProductActions o a displayProductPriceBlock, che vengono renderizzati dentro l'area di acquisto. Vai in Design → Positions, trova quell'hook e trascina il modulo sotto quelli che devono venire prima — oppure sgancialo, se non deve stare sopra il pulsante. Non serve modificare template.

PrestaShop ha una barra mobile Aggiungi al carrello fissa integrata?

Il tema Classic non ne include una per impostazione predefinita. Puoi aggiungerla tramite un modulo che si aggancia alla pagina prodotto oppure con un piccolo blocco nel tema child che riutilizza i partial esistenti di prezzo e aggiunta al carrello (mostrato sopra), così non duplichi il markup. È la singola modifica mobile con il maggiore impatto sulla pagina, quindi vale la pena farla bene invece che con un pulsante copiato e incollato.

In PrestaShop 9, l'URL prodotto è cambiato in modo da influenzare il lavoro di design?

Sì — PrestaShop 9 rimuove per impostazione predefinita la categoria dall'URL prodotto, quindi lo slug viene generato solo dal nome del prodotto. Non cambia il layout, ma significa che rinominare un prodotto può rigenerare l'URL semplificato e rompere i link in ingresso se non è presente un redirect. Se mantieni struttura canonica e redirect durante una migrazione, uno strumento dedicato come il nostro modulo SEO Revolution mantiene sotto controllo slug e redirect, così una rinomina non ti costa ranking in silenzio.