Blocchi HTML: aggiungere contenuti personalizzati ovunque nel tuo negozio PrestaShop

Aggiornato a giugno 2026, i nomi degli hook e la tabella dei moduli nativi qui sotto si applicano a PrestaShop 1.7, 8 e 9. Nei back office moderni, le posizioni si gestiscono da Design → Posizioni.

Prima o poi ogni negozio PrestaShop incontra lo stesso limite: ti serve un contenuto che il tema non era stato pensato per ospitare. Una barra per la spedizione gratuita sopra la griglia prodotti. Un avviso "spedizione entro Natale se ordini entro il 19 dicembre" nell'intestazione. Una coppia di badge di fiducia subito sotto il pulsante di aggiunta al carrello. Nulla di tutto questo appartiene davvero a una descrizione prodotto, a una pagina CMS o a una categoria: deve comparire in un punto preciso di pagine specifiche, e restare lì anche dopo gli aggiornamenti del tema. È esattamente il lavoro di un blocco HTML personalizzato: inserisce markup arbitrario in una posizione nominata del negozio senza farti aprire nemmeno un file di template.

Questa guida riguarda proprio questo: portare HTML personalizzato nel punto giusto di PrestaShop e controllare dove viene mostrato. Non parla di stile (quella è una disciplina a parte; vedi CSS e JavaScript personalizzati in PrestaShop senza compromettere gli aggiornamenti) e non parla di rinominare le pagine statiche nel menu (nomi visualizzati delle pagine CMS tratta quel tema). Qui restiamo sulla meccanica del posizionamento.

Perché usare blocchi HTML invece di modificare il tema

Potresti aprire themes/your-theme/templates/catalog/product.tpl e inserire quel badge direttamente nel codice. Ci sono due buoni motivi per non farlo. Primo, il prossimo aggiornamento del tema, o una risincronizzazione del tema figlio, può sovrascrivere la modifica e far sparire il badge senza avvisi. Secondo, una modifica al template è invisibile a chi non è sviluppatore: non puoi disattivarla per una promozione del fine settimana né cambiare il testo dal back office. Quando il contenuto viene creato tramite un modulo come ps_customtext o un modulo dedicato ai blocchi HTML, viene salvato nel database e renderizzato attraverso il sistema di hook di PrestaShop, quindi sopravvive agli aggiornamenti e lo gestisci da Moduli o Design senza toccare file. Perché è importante? Puoi cambiare un messaggio promozionale alle 9 del mattino prima di una vendita flash e rimuoverlo a mezzanotte, in autonomia, senza rischi per il tema.

I moduli nativi che lo fanno già

Prima di acquistare qualcosa, sappi che PrestaShop include tre moduli gratuiti che coprono i casi più comuni. Di norma sono disponibili nelle installazioni standard basate su Classic e, se mancano, possono essere installati o attivati dal Gestore moduli:

Per la maggior parte delle esigenze del tipo "mi serve solo un paragrafo di HTML da qualche parte", la risposta è ps_customtext. Vai su Moduli → Gestore moduli, cerca "testo personalizzato", fai clic su Configura, incolla il tuo HTML nell'editor (passa alla vista sorgente/codice con il pulsante <> se vuoi markup pulito) e salva. Per impostazione predefinita viene renderizzato in displayHome. Il limite, e il motivo per cui molti commercianti finiscono per superarlo, è che ps_customtext ti dà un solo blocco modificabile legato a un solo hook, senza targeting per pagina e senza pianificazione.

Capire le posizioni: gli hook che decidono dove si trova "ovunque"

"Ovunque" in PrestaShop non significa letteralmente qualsiasi pixel: significa qualsiasi hook registrato. Un hook è un punto di inserimento con nome che il tema richiama mentre renderizza una pagina, e un modulo collegato a quell'hook vi inserisce il proprio output. Puoi vedere ogni posizione in Design → Posizioni (nelle versioni più vecchie: Moduli → Posizioni), dove sono elencati ogni hook e i moduli attualmente innestati al suo interno, nell'ordine di renderizzazione. Queste sono le posizioni più importanti per i contenuti personalizzati:

• displayBanner, fascia a larghezza piena in cima alla pagina, sopra l'intestazione. È il posto naturale per barre di annuncio valide in tutto il negozio e messaggi sulla soglia per la spedizione gratuita. Visibile prima di qualsiasi scorrimento, su ogni pagina.
• displayNav1 / displayNav2 / displayTop, all'interno della fascia dell'intestazione (a sinistra/destra della navigazione, riga superiore di servizio). Utile per un numero di telefono breve, una nota su Paese/spedizione o una riga USP sottile.
• displayHome, il corpo della pagina iniziale, alternato a caroselli di prodotti e riquadri di categoria. Ideale per proposte di valore e sezioni promozionali in evidenza.
• displayProductAdditionalInfo, nella pagina prodotto, direttamente sotto l'area di aggiunta al carrello. È qui che promesse di consegna, badge di garanzia e icone dei metodi di pagamento rendono davvero, perché l'acquirente li legge esattamente nel momento in cui esita.
• displayFooterBefore / displayFooter, sopra e dentro il piè di pagina, su ogni pagina. Badge di fiducia, inviti alla newsletter, link secondari.
• displayLeftColumn / displayRightColumn, barre laterali (dove il tema le prevede). Aiuti per i filtri, promo di categoria, richiami all'assistenza.

La mossa pratica quando non conosci una posizione per nome: apri la pagina che vuoi modificare e, in Design → Posizioni, usa Innestare un modulo (il pulsante "Aggancia un modulo"), il menu a tendina elenca tutte le posizioni agganciabili e il testo di aiuto descrive dove viene renderizzata ciascuna. Puoi anche trascinare un modulo verso l'alto o verso il basso dentro un hook per decidere se il tuo blocco deve stare sopra o sotto, per esempio, il banner di categoria.

La parte che i blocchi nativi non fanno, e perché i commercianti scelgono un modulo dedicato

Il modulo nativo ps_customtext va benissimo finché non ti serve una delle cose di cui i negozi reali hanno effettivamente bisogno:

• Targeting per pagina / per controller. "Mostra questa guida alle taglie solo nella categoria Scarpe, solo nelle pagine prodotto." I blocchi nativi vengono renderizzati nel loro hook ovunque quell'hook venga eseguito; non hanno filtri per pagina.
• Più posizionamenti e controllo dell'attivazione. Una barra "Ultimo giorno per la consegna entro Natale" dovrebbe essere un blocco con nome, che puoi attivare, disattivare e spostare senza modificare un template. La pianificazione per intervallo di date è una funzione separata: non dare per scontato che un modulo di blocchi la includa, a meno che tu non veda campi data nel suo back office.
• Più blocchi indipendenti nello stesso hook. Un'istanza di ps_customtext è un blocco; gestire cinque messaggi diversi su cinque posizioni diventa rapidamente scomodo.
• Contenuti compatibili con il multinegozio. Mostra contenuti di blocco diversi per negozio/lingua quando il modulo salva righe per lingua e negozio. Il targeting per gruppo clienti è uno strato di regole separato, non qualcosa che il blocco di testo standard espone.
• Blocchi consapevoli del consenso. Se il blocco contiene tracciamento o media incorporati, un controllo per categoria di cookie permette di renderizzarlo solo quando il visitatore non ha negato quella categoria.

È questo il vuoto che un modulo dedicato ai blocchi HTML colma: una libreria di blocchi con nome, ciascuno assegnato a uno o più hook, con posizionamento per tipo di pagina, scelta del layout, contenuti multilingua/per negozio, controllo per categoria di cookie e, in moduli come MPR HTML Blocks, iniezione nei template per le posizioni in cui il tema ha dimenticato di esporre un hook utile. Cosa ottieni in concreto? Smetti di modificare template e di installare un nuovo modulo ogni volta che il marketing vuole un banner; crei un blocco una volta e lo indirizzi all'hook o all'area della pagina a cui appartiene. Se cerchi contenuti sensibili alla pagina e un posizionamento più pulito, questa è l'evoluzione da modulo dedicato rispetto al blocco nativo: stesso principio, ma con più blocchi, record di posizionamento e iniezione nei template gestiti dal back office.

Scrivere l'HTML in modo che sopravviva all'editor

Un problema evitabile: TinyMCE e il filtro HTML di PrestaShop possono riscrivere o rimuovere markup non supportato a seconda della configurazione, l'editor rich-text "ripulisce" il markup che non riconosce e il filtro di sicurezza può eliminare stili inline o riformattare i tag al salvataggio. Se il blocco sparisce o perde lo stile dopo il salvataggio, di solito il colpevole è questo. Le soluzioni, in ordine di preferenza:

Mantieni il markup del blocco semplice e basato su classi. Questo è il tipo di contenuto in vista sorgente che sopravvive alla pulizia dell'editor e lascia tutto lo stile al foglio di stile del tema.

<section class="promo-bar promo-bar--shipping">
  <p><strong>Free delivery this weekend.</strong> Orders over 75 EUR ship free until Monday.</p>
  <p><a href="/delivery">See delivery conditions</a></p>
</section>

Una pagina prodotto del negozio con contenuto nella scheda Descrizione.

• Attiva la vista codice sorgente dell'editor (il pulsante <> / "Strumenti → Codice sorgente") e incolla lì il markup, non nel riquadro WYSIWYG.
• Mantieni lo stile in una classe, non inline. Metti una classe come promo-bar sul tuo blocco e definisci .promo-bar nel foglio di stile personalizzato del tema: l'editor lascia intatti gli attributi class e ottieni il vantaggio dello stile che sopravvive agli aggiornamenti, descritto in CSS e JavaScript personalizzati senza compromettere gli aggiornamenti.
• Se un blocco deve eseguire JavaScript, collegalo tramite l'hook asset corretto invece di incollare un tag <script> nell'editor: gli script inline nei blocchi di contenuto sono fragili e facili da rompere al salvataggio. Quel meccanismo è un argomento a sé, trattato nella stessa guida CSS/JS.

Mantieni i blocchi veloci e coerenti con il brand

Due discipline di design decidono se un blocco aiuta o danneggia. Primo, fallo combaciare con il tema. Usa lo stesso stack di font, lo stesso colore di accento e lo stesso ritmo di spaziatura che il tema già usa, così il blocco viene percepito come parte del negozio e non come un'aggiunta posticcia. Secondo, resta conciso. Un banner è una frase più un invito all'azione; una striscia di fiducia è fatta di icone riconoscibili, non di un paragrafo. Il valore di un blocco sta in ciò che aggiunge al momento giusto, non in quanto testo ci infili dentro.

Sulle prestazioni: ogni blocco è markup aggiuntivo, e i blocchi pieni di immagini sono di solito i principali responsabili del peso. Servi immagini compresse e nelle dimensioni corrette, usa CSS per layout ed effetti invece di caricare una libreria, e se hai più blocchi attivi contemporaneamente controlla il loro effetto combinato nel pannello di rete del browser. La velocità della pagina è uno dei segnali che Google considera, quindi una pila di banner gonfi può lavorare silenziosamente contro il resto del tuo lavoro on-page. Mantieni il markup leggero e il vantaggio resta tale.

Una guida rapida alla scelta

Il motivo per cui vale la pena padroneggiare i blocchi HTML è quello da cui siamo partiti: permettono al gestore del negozio, non a uno sviluppatore, di mettere il messaggio giusto nel posto giusto al momento giusto, e di rimuoverlo con la stessa facilità, senza mai mettere a rischio il tema. Impara i nomi delle posizioni, affidati ai blocchi nativi gratuiti per le esigenze semplici, passa a un modulo dedicato appena ti servono più blocchi, posizionamento sensibile alla pagina o iniezione sicura per il tema, e mantieni ogni blocco leggero e coerente con il brand. Così anche un'installazione PrestaShop standard inizia a parlare con la voce del tuo negozio esattamente nei momenti che spostano una vendita.

Domande frequenti

"Ovunque" significa davvero qualsiasi punto della pagina?

Non letteralmente: significa qualsiasi hook registrato. Un hook è un punto di inserimento con nome che il tema richiama mentre renderizza una pagina, e l'output del tuo blocco viene inserito ovunque quell'hook venga eseguito. Puoi vedere ogni posizione disponibile in Design → Posizioni. Se il punto esatto che vuoi non ha un hook, è lì che la funzione di iniezione nei template di un modulo dedicato si guadagna il suo posto, perché può raggiungere posizioni che il tema non ha mai esposto come hook.

Quale modulo nativo dovrei usare per un semplice blocco HTML?

Per un paragrafo di HTML usa ps_customtext: cerca "testo personalizzato" nel Gestore moduli, fai clic su Configura e incolla il tuo markup (usa la vista sorgente <> per codice pulito). Per un'immagine banner con link nella parte alta di ogni pagina usa ps_banner; per gli elenchi di link nel piè di pagina, ps_linklist. Tutti e tre sono inclusi gratuitamente nelle installazioni basate su Classic e salvano il contenuto nel database, quindi sopravvive agli aggiornamenti del tema.

Dove inserisco un badge di fiducia o una promessa di consegna nella pagina prodotto?

Nell'hook displayProductAdditionalInfo, che viene renderizzato direttamente sotto l'area di aggiunta al carrello. È lì che badge di garanzia, promesse di consegna e icone dei metodi di pagamento rendono davvero, perché l'acquirente li legge esattamente nel momento in cui esita. Aggancia lì il tuo blocco tramite Design → Posizioni → Innestare un modulo invece di modificare product.tpl.

Il mio blocco ha perso lo stile o è sparito dopo il salvataggio. Perché?

Quasi sempre per colpa di TinyMCE o del filtro HTML di PrestaShop che "ripulisce" il markup al salvataggio: l'editor riscrive i tag che non riconosce e il filtro di sicurezza può eliminare gli stili inline. La soluzione: incolla nella vista codice sorgente dell'editor, non nel riquadro WYSIWYG, e mantieni lo stile in una classe CSS (definisci .promo-bar nel foglio di stile del tema) invece che inline. L'editor lascia intatti gli attributi class.

Quando supero i limiti di ps_customtext e mi serve un modulo dedicato?

Nel momento in cui ti serve una di queste cose: targeting per pagina o per controller (per esempio una guida alle taglie solo nella categoria Scarpe), più blocchi indipendenti gestiti centralmente, contenuti multinegozio o multilingua, controllo del consenso cookie per blocchi che contengono tracciamento, oppure posizionamento in un punto per cui il tema non espone alcun hook. ps_customtext ti dà un solo blocco legato a un solo hook, senza filtro per pagina: va bene finché non compaiono queste esigenze.

Posso eseguire JavaScript dentro un blocco HTML?

Non incollare un tag <script> grezzo nell'editor: gli script inline nei blocchi di contenuto sono fragili, si rompono facilmente al salvataggio e aggirano la gestione degli asset di PrestaShop. Collega invece il comportamento come file .js esterno tramite l'hook asset corretto, esattamente come spiegato in CSS e JavaScript personalizzati senza compromettere gli aggiornamenti. Mantieni il blocco limitato al markup e a una classe CSS.

Troppi blocchi rallentano il negozio?

Possono farlo: ogni blocco è markup aggiuntivo, e i blocchi pieni di immagini sono di solito i principali responsabili del peso. Servi immagini compresse e nelle dimensioni corrette, usa CSS per il layout invece di caricare una libreria, e se più blocchi sono attivi contemporaneamente controlla il loro costo complessivo nel pannello di rete del browser. La velocità della pagina è uno dei segnali che Google considera, quindi una pila di banner gonfi può indebolire silenziosamente il resto del tuo lavoro on-page.

Guide correlate

• CSS e JavaScript personalizzati in PrestaShop senza compromettere gli aggiornamenti
• Nomi visualizzati delle pagine CMS: navigazione migliore per le tue pagine statiche
• Temi figlio in PrestaShop: perché non dovresti mai modificare il tema genitore