Barra annunci PrestaShop: un messaggio in cima a ogni pagina del negozio

A cosa serve una barra con un messaggio in cima alla pagina?

A un'informazione che cambia la decisione del cliente prima che inizi a cercare un prodotto. Il cliente vede la barra in home page, in una categoria, nella pagina prodotto e nel carrello, quindi non deve atterrare su una pagina precisa per scoprire qualcosa.

Messaggi tipici della barra:

• la soglia di spedizione gratuita («Spedizione gratuita per ordini sopra 49 €»),
• l'orario limite di spedizione («Gli ordini fatti entro le 14:00 partono in giornata»),
• una pausa nelle spedizioni («Gli ordini del ponte partono martedì»),
• l'ultimo giorno per ordinare prima delle feste.

Importi e orari in questi esempi sono illustrativi. Metti nella barra solo ciò che è davvero impostato nel negozio. Quando la barra promette la spedizione gratuita sopra 49 € e il corriere nel carrello la dà solo da 60 €, il cliente si sente ingannato all'ultimo passaggio. Come impostare la soglia stessa lo descriviamo nel nostro articolo sulla spedizione gratuita sopra un importo.

Tre modi per aggiungere una barra annunci in PrestaShop

Scegli un metodo in base a quanto spesso cambi il testo e a quale tema hai.

PrestaShop ha un punto in cima alla pagina pensato per i banner. La documentazione per sviluppatori lo descrive nell'hook displayBanner come «la parte più alta di ogni pagina». I moduli per barre di solito si agganciano lì. Quali moduli stanno in quel punto nel tuo negozio lo vedi in Aspetto → Posizioni, come spiega la guida alle posizioni dei moduli.

Una voce nel template va in un child theme, non nel tema principale. Se aggiungi la barra ai file del tema principale, il prossimo aggiornamento del tema la toglierà. La documentazione di PrestaShop sui child theme descrive come è costruito un child theme. Cosa succede alle modifiche dopo un aggiornamento lo spieghiamo nel nostro articolo su come un aggiornamento del tema ha cancellato le mie modifiche.

Come aggiungere la barra nel template passo per passo

Questa strada richiede l'accesso ai file del tema. Se non lavori con i file tutti i giorni, fallo con qualcuno che lo fa, o con la chat.

1. Controlla se il negozio ha un child theme. Se no, creane uno prima di cambiare il primo file.
2. Fai una copia del file dell'header del tema (in Classic, il template dell'header della pagina).
3. Aggiungi un blocco sopra l'header con il testo del messaggio e una tua classe, per esempio top-info-bar.
4. Nel file custom.css del child theme imposta colore di sfondo, colore del testo, una dimensione del carattere piccola e la centratura.
5. Aggiungi una regola per gli schermi stretti, così il testo va a capo invece di uscire dallo schermo.
6. Svuota la cache in Parametri avanzati → Prestazioni.
7. Apri il negozio in una finestra privata e dal telefono. Controlla home page, una categoria, una pagina prodotto e il carrello.

In un negozio con più lingue, un testo scritto direttamente nel template si vede in una sola lingua per tutti. In quel caso è più comodo un modulo con un campo per ogni lingua, oppure un testo tramite le traduzioni del tema.

Come deve apparire la barra dal telefono?

Dal telefono la barra occupa spazio prezioso sopra il prodotto, quindi deve essere bassa. Due righe sono il limite. Tre righe spingono nome e prezzo del prodotto più in basso nello schermo.

A cosa fare attenzione:

• Contrasto. Un testo bianco su uno sfondo chiaro, come il giallo, si legge male al sole. Scegli uno sfondo scuro con testo chiaro, o viceversa.
• Dimensione del carattere. I clienti ingrandiscono con due dita un testo troppo piccolo. Piccolo, ma non più piccolo del resto delle scritte minori del negozio.
• Niente testo che scorre. Un testo in movimento si legge male e stanca gli occhi.
• Un pulsante di chiusura solo con memoria. Se la barra si può chiudere, deve restare chiusa nelle pagine successive. Altrimenti il cliente la richiude a ogni pagina.
• Una regola separata per gli schermi stretti. Dal telefono riduci gli spazi e lascia andare a capo il testo. Quella regola la metti in un blocco che vale solo sotto una larghezza di schermo scelta, come descritto nella guida di MDN alle media query.

Come curare la barra dopo averla aggiunta

Una barra che nessuno controlla presto inizia a dire bugie. La promozione è finita, la soglia di spedizione è cambiata, e il vecchio testo è ancora appeso in cima al negozio. I clienti lo leggono come una promessa.

Tre regole semplici:

• ogni volta che cambi i prezzi di spedizione o i tempi di consegna, controlla anche la barra,
• togli o sostituisci un messaggio stagionale il giorno in cui finisce la campagna, non una settimana dopo,
• quando non c'è un messaggio, non lasciare una striscia colorata vuota; nascondi del tutto la barra.

Se la barra appare male dal telefono, la correzione la trattiamo a parte nel nostro articolo sulla vista mobile di PrestaShop. I colori dei pulsanti e di altri elementi puoi cambiarli seguendo il nostro articolo su come cambiare il colore di un pulsante.

Come aggiungere una barra annunci con la chat

Scrivi quale messaggio vuoi e come deve apparire. La tua chat (Claude o ChatGPT) controlla il tema, verifica se c'è un child theme e se nel punto più alto della pagina c'è già un modulo con una barra simile. Poi mostra la modifica ai file prima di salvare.