Ultimo aggiornamento: giugno 2026.

Hai impostato lo sconto: una regola carrello, un prezzo specifico, magari un codice sconto pronto da distribuire. La parte difficile è fatta. Ma uno sconto che nessuno vede non vende nulla, e il modo in cui la maggior parte degli acquirenti scopre che è in corso una promozione è il banner nella parte alta della homepage. Questa guida colma proprio quel divario: non la promozione in sé (quella riguarda regole carrello e prezzi specifici), ma il banner che la annuncia: progettato in modo pulito, con le dimensioni corrette e collegato a PrestaShop così che immagine, link e sconto effettivo puntino tutti alla stessa cosa. Non ti serve un designer e non devi imparare Photoshop.

Parti dallo sconto, non dal design

Un banner è la vetrina di una promozione che esiste già nel tuo pannello di amministrazione. Prima di aprire uno strumento di design, l'offerta deve essere attiva e testata: una regola carrello in Catalogo → Sconti → Regole carrello (la dicitura esatta può variare in base alla versione e al tema), oppure un prezzo specifico impostato sul prodotto o sulla categoria. Il motivo per crearlo prima è semplice: il banner deve essere sincero. Se il banner dice "20% di sconto su tutto" ma la tua regola carrello si applica solo a una categoria, insegni ai clienti a non fidarsi del tuo titolo e passerai la promozione a rispondere a email del tipo "perché il mio codice non funziona?".

Prima di progettare il banner, quindi, definisci tre elementi a cui deve corrispondere esattamente:

  • Il valore. È il 20% di sconto, 10€ di sconto, spedizione gratuita o prendi 2, paghi 1? Prendilo direttamente dalla scheda Azioni della regola carrello, così titolo e calcolo coincidono.
  • L'ambito. Tutto il negozio, una categoria o prodotti selezionati? Una regola carrello limitata in Condizioni a una categoria specifica deve generare un banner che rimanda a quella categoria, non alla homepage.
  • La scadenza. Se la regola carrello ha una data di validità fino a, il banner può indicarla. "Termina domenica" è uno dei pochi segnali di urgenza davvero onesti che hai, ed è onesto solo perché il pannello di amministrazione lo applica. (Per programmare automaticamente le promozioni, vedi gli sconti programmati.)

Se la tua offerta richiede un codice che i clienti inseriscono al pagamento, generalo nella stessa regola carrello: il campo Codice nella scheda Informazioni, e inserisci nel banner esattamente quel codice. Tra poco vedremo perché mostrare il codice nel banner (invece di nasconderlo) conta per la conversione.

Principi di design che funzionano anche senza designer

La buona notizia per chi non è designer: un banner promozionale efficace dipende soprattutto dalla misura, non dal talento. Quattro regole portano quasi tutto il risultato.

Un solo messaggio per banner

L'errore più comune è volerci mettere troppo. "20% di sconto sulla collezione estiva + spedizione gratuita + nuovi arrivi + iscriviti al programma fedeltà" in un unico banner significa che il cliente non legge nulla. Un banner, un'offerta, un invito all'azione. Se hai davvero due promozioni attive, servono due banner separati o uno slider, ma ogni slide deve comunque avere un solo focus. Un banner che corrisponde uno a uno a una singola regola carrello è facile da scrivere e impossibile da fraintendere.

Leggibile in due secondi

Il testo del banner deve arrivare subito, perché è tutta l'attenzione che riceverà:

  • Titolo grande: almeno 32px su desktop, 24px su mobile. Il valore dello sconto è il protagonista: deve essere l'elemento più grande del banner.
  • Contrasto elevato: testo chiaro su fondo scuro o testo scuro su fondo chiaro. Il testo sopra una foto molto ricca ha bisogno di una sovrapposizione colorata o di un velo scuro dietro, altrimenti sparisce.
  • Poche parole: 5-8 per il titolo, 10-15 per eventuale testo di supporto. "Saldi estivi — 20% di sconto su tutto" più un codice sono sufficienti.
  • Gerarchia chiara: prima l'offerta, poi il motivo, infine il codice o la scadenza.

Un invito all'azione che sembri cliccabile

Ogni banner promozionale ha bisogno di un pulsante o di un link evidente che dica al visitatore cosa fare: "Vai ai saldi", "Scopri la collezione", "Usa il codice SUMMER20". Deve distinguersi dal resto del banner e sembrare un elemento da premere. La vaghezza è spazio sprecato: "Scopri di più" sotto un titolo con il 20% di sconto disperde lo slancio appena creato dal numero.

Immagini che non devi scattare tu

Usa una foto reale del prodotto o un'immagine lifestyle pulita, se ce l'hai. Se non ce l'hai, uno sfondo a tinta unita o con una sfumatura semplice e un testo deciso batte sempre una foto sfocata o sgranata. Un banner ordinato fatto solo di testo sembra intenzionale; un'immagine stock stirata sembra un errore. Non lasciare che "non ho foto" ti blocchi: molti banner di saldo efficaci sono semplicemente testo su un colore.

Strumenti gratuiti che fanno il design al posto tuo

Non hai bisogno di software a pagamento. Tre strumenti gratuiti coprono in pratica ogni banner di cui un negozio PrestaShop ha bisogno.

StrumentoIdeale perCurva di apprendimentoPerché lo sceglie chi non è designer
CanvaBanner di saldo, social, intestazioni emailMinimaMigliaia di modelli già dimensionati per il web; trascinamento; una libreria gratuita di immagini stock. Il piano gratuito copre la maggior parte delle esigenze per i banner.
PhotopeaModifica di foto prodotto, ritaglio, trasparenzaMediaUn'alternativa gratuita a Photoshop basata su browser che apre file PSD: nessuna installazione, nessuna licenza.
FigmaUn sistema di banner coerente per un'intera stagionePiù impegnativaControllo preciso e componenti riutilizzabili quando vuoi che tutti i banner di una campagna siano coordinati.

Per la maggior parte dei commercianti la risposta è Canva: parti da un modello, sostituisci il testo con la tua offerta, inserisci una foto prodotto o scegli un colore di sfondo, quindi esporta. La competenza richiesta è scegliere un modello e non modificarlo troppo.

Dimensioni dei banner per PrestaShop

Le dimensioni esatte dipendono dal tema, ma queste sono le più comuni e quelle previste dalla maggior parte dei moduli banner:

  • Banner hero della homepage: 1920 × 600-800px, a tutta larghezza, nella parte visibile senza scorrere.
  • Banner di categoria: 1200 × 300-400px.
  • Banner laterale: 300 × 250px o 300 × 600px.
  • Banner mobile: 750 × 750px o 750 × 500px: una versione separata, specifica per mobile, non una versione desktop rimpicciolita.

Crea sempre una versione mobile separata. Un banner leggibile a 1920px diventa una macchia illeggibile quando viene compresso sullo schermo di un telefono da 375px, e in un tipico negozio PrestaShop una quota importante del traffico, spesso più della metà, arriva da smartphone. I banner mobile richiedono testo relativamente più grande, layout più semplici e un messaggio più breve.

Per il file in sé: esporta in WebP o in JPEG ottimizzato per i banner fotografici, e cerca di restare sotto circa 200KB. Usa PNG solo quando ti serve davvero la trasparenza. Le immagini banner troppo pesanti sono una delle cause più comuni di una homepage lenta, e una homepage lenta ti costa proprio i visitatori che il banner dovrebbe convertire. I Parametri avanzati → Prestazioni di PrestaShop e le impostazioni immagini del tema non salveranno un'immagine hero da 3MB: ridimensionala prima di caricarla.

Inserire il banner in PrestaShop

Banner promozionale a tutta larghezza sul negozio con un titolo e un pulsante di invito all'azione chiaro
Un banner a tutta larghezza con un titolo forte e un solo invito all'azione chiaro trasforma una promozione in qualcosa su cui gli acquirenti agiscono.

PrestaShop non include un'unica funzione "banner promozionale", quindi ci sono alcune strade corrette: scegli in base a quanto spesso cambi i banner e a quanto controllo vuoi avere.

  • Lo slider immagini nativo. La maggior parte dei temi predefiniti include il modulo ps_imageslider. Vai in Moduli → Gestione moduli, trova lo slider, clicca su Configura e potrai caricare le immagini delle slide, impostare l'URL del link e scrivere titolo/didascalia. È gratuito e integrato: va bene per un banner di saldo occasionale da impostare e lasciare attivo.
  • Impostazioni del tema. Molti temi commerciali hanno un proprio gestore banner in Design → Tema & Logo o un modulo dedicato alla configurazione del tema, spesso con più controllo sul posizionamento (pagine di categoria, barre laterali) rispetto allo slider standard.
  • Un blocco statico / HTML. Per un banner in una posizione fissa, un blocco HTML in stile CMS (tramite un modulo "HTML personalizzato" o le posizioni del tema) ti permette di inserire un'immagine avvolta in un link ovunque esista un hook.
  • Un modulo banner dedicato. Se lanci promozioni spesso e vuoi più di quanto offra lo slider standard: immagini separate specifiche per mobile, sovrapposizioni di testo e pulsanti di invito all'azione renderizzati sopra l'immagine, e diversi gruppi di banner indipendenti per homepage, pagine CMS e slot widget, un modulo progettato per questo risparmia lavoro ripetitivo nel pannello di amministrazione e permette anche a personale non tecnico di sostituire un banner in pochi minuti. Il nostro Banner Revolution è pensato esattamente per questo: caroselli hero a tutta larghezza con sovrapposizioni di testo sull'immagine e inviti all'azione, un'immagine desktop e una mobile distinta per ogni slide (così non schiacci un banner da 1920px su un telefono), e più gruppi di slider da posizionare dove ti servono, tutto gestito dal pannello di amministrazione senza toccare un template.

Qualunque strada tu scelga, la regola davvero importante è una sola: il link del banner deve puntare al posto giusto. Una promozione valida su tutto il negozio rimanda alla homepage o a una categoria saldi; una promozione di categoria rimanda a quella categoria; un'offerta su un singolo prodotto rimanda a quel prodotto. Mandare alla homepage un banner "20% di sconto sugli abiti" costringe il cliente a cercare gli abiti, e quando deve cercare è lì che se ne va.

Fai combaciare banner e sconto

Questa è la parte che i consigli generici sui banner saltano, ed è quella che decide se una promozione converte davvero in un negozio PrestaShop. Il banner è una promessa; la regola carrello, il prezzo specifico o il buono sono il modo in cui la mantieni.

  • Gli sconti automatici non richiedono codice sul banner. Se la regola carrello si applica automaticamente (nessun codice, "evidenzia" disattivato), il banner annuncia semplicemente l'offerta e rimanda alla pagina: il prezzo è già ridotto quando il cliente arriva. Esperienza più pulita: nulla da digitare.
  • Le offerte basate su codice devono mostrare il codice. Se la regola carrello richiede un codice, inserisci nel banner esattamente quel codice: "Usa il codice SUMMER20". Una casella coupon senza codice visibile invita il cliente ad aprire Google, mettersi a cercare un codice funzionante e, a volte, non tornare più. Mostra il codice e valuta di applicarlo automaticamente ai visitatori che arrivano dal link del banner (l'opzione Evidenzia di una regola carrello aiuta a renderlo visibile; alcuni moduli o link personalizzati possono preapplicare un buono, ma in caso contrario mostra semplicemente il codice in modo chiaro).
  • Rispetta esattamente l'ambito. Se la regola carrello è limitata a una categoria in Condizioni, testo e link del banner devono rifletterlo. "Tutto" sul banner e "solo categorie selezionate" nel pannello di amministrazione è il modo più rapido per generare ticket di assistenza durante il tuo periodo di vendita più intenso.
  • Lascia che la scadenza venga dalla regola. Se scrivi "Termina domenica" sul banner, imposta la data di validità fino a della regola carrello in modo corrispondente, così lo sconto si ferma davvero quando il banner dice che si ferma. L'urgenza onesta funziona solo quando il pannello di amministrazione la applica: vedi come creare urgenza senza essere manipolativi.

Per le promozioni con carte regalo e buoni nello specifico, per esempio "carta regalo da 10€ con ogni ordine", il banner la pubblicizza e la configurazione di carta regalo / buono la eroga. Tieni presente una cosa facile da dimenticare: alcuni prodotti non dovrebbero mai ricevere lo sconto annunciato nel titolo. Se escludi certi articoli nelle condizioni della regola carrello, non lasciare che un banner "20% di sconto su tutto" suggerisca il contrario: vedi perché alcuni prodotti non dovrebbero mai andare in saldo.

Mantieni i banner aggiornati e non abusare degli slider

Un banner rimasto sulla homepage per tre mesi diventa invisibile ai visitatori di ritorno: hanno smesso di vederlo. Ruotalo secondo un calendario:

  • Banner promozionali: falli coincidere esattamente con la durata della promozione: online quando la regola carrello diventa attiva, rimossi quando scade.
  • Banner stagionali: sostituiscili a ogni stagione o evento importante. Un calendario dei saldi stagionali ti dice cosa sta arrivando, così il banner è pronto prima della data, non dopo.
  • Banner generali di brand: aggiornali ogni quattro-sei settimane, così i clienti abituali non li ignorano.

Usa gli slider con parsimonia. La maggior parte dei visitatori vede solo la prima slide, quindi un carosello da cinque slide finisce soprattutto per seppellire quattro messaggi. Se usi uno slider, metti per prima l'offerta più importante e limitati a tre o quattro slide. Per una singola promozione, un banner statico con un messaggio chiaro di solito batte nettamente uno slider.

Verifica se il banner ha funzionato davvero

Non ti servono strumenti costosi per capire se un banner sta facendo il suo lavoro. Aggiungi parametri UTM al link del banner (per esempio ?utm_source=homepage&utm_campaign=summer-sale) così i clic compaiono come fonte nominata nei tuoi strumenti di analisi, e osserva alcuni dati:

  • Clic: tra i visitatori che hanno visto il banner, quanti lo hanno cliccato? Pochi clic significano che messaggio o design devono essere rivisti.
  • Conversione dopo il clic: chi clicca sul banner poi acquista davvero? Clic senza ordini indicano un problema nella pagina di atterraggio o una discrepanza tra banner e sconto, non nella grafica del banner.
  • Ricavi dalla campagna: se hai usato un codice sconto univoco, l'utilizzo del buono nella sua schermata della regola carrello e l'elenco ordini (filtrato o cercato per codice sconto), oppure un modulo di analisi/reportistica, ti dicono esattamente quanto ha generato quella promozione.

Quest'ultimo punto è un vantaggio discreto del collegare il banner a una regola carrello con codice: il codice diventa il suo pixel di tracciamento. Ogni ordine che lo ha usato è un clic sul banner che puoi contare in denaro reale, direttamente dal pannello di amministrazione.

I buoni banner promozionali sono semplici, chiari e sinceri. Non ti serve talento da designer: ti serve uno sconto già attivo nel pannello di amministrazione, un messaggio chiaro che corrisponda allo sconto, un titolo leggibile, un pulsante che dica cosa fare e un link che porti alla pagina giusta. Gli strumenti di design sono gratuiti, le dimensioni sono note e PrestaShop ha già un posto dove inserire il banner. Il lavoro che fa davvero la differenza non è la grafica: è fare in modo che banner e regola carrello dicano al cliente la stessa identica cosa vera.

Domande frequenti

Mi servono competenze di design per creare un banner promozionale?

No. Un banner di saldo efficace è soprattutto misura: un'offerta, un titolo grande e leggibile, contrasto elevato e un pulsante chiaro. Il piano gratuito di Canva offre modelli in formato web in cui devi solo sostituire il testo; molti dei banner che convertono meglio sono semplicemente testo in grassetto su un colore pieno, senza alcuna foto. La competenza sta nello scegliere un modello e non modificarlo troppo.

Che dimensioni dovrebbe avere un banner homepage in PrestaShop?

Dipende dal tema, ma un hero a tutta larghezza per la homepage è spesso intorno a 1920 × 600-800px, un banner di categoria intorno a 1200 × 300-400px e un banner laterale 300 × 250 o 300 × 600px. Crea sempre una versione mobile separata (circa 750 × 750 o 750 × 500px) con testo relativamente più grande: un banner desktop compresso su un telefono diventa una macchia illeggibile, e nella maggior parte dei negozi più della metà del traffico arriva da mobile.

Dove inserisco il banner: nello slider nativo o in un modulo?

Per una promozione occasionale da impostare e dimenticare, il ps_imageslider integrato (Moduli → Gestione moduli → Configura) è gratuito e sufficiente: carichi l'immagine e imposti il link. Se lanci promozioni spesso e vuoi immagini mobile separate, sovrapposizioni di testo e invito all'azione, o diversi gruppi di banner nel sito, un modulo dedicato come Banner Revolution elimina il lavoro ripetitivo nel pannello di amministrazione. Evita di modificare a mano il template del tema, se non è l'unica opzione, perché un aggiornamento può cancellare la modifica.

Devo mostrare il codice sconto sul banner o nasconderlo?

Mostralo. Se la regola carrello richiede un codice, inserisci nel banner il codice esatto ("Usa il codice SUMMER20"). Una casella coupon senza codice visibile manda i clienti su Google a cercarne uno, e a volte non tornano. Se la regola carrello si applica automaticamente senza codice, il banner annuncia semplicemente l'offerta e rimanda alla pagina: il prezzo è già ridotto quando arrivano.

Come faccio a sapere se un banner ha funzionato davvero?

Aggiungi parametri UTM al link del banner (per esempio ?utm_source=homepage&utm_campaign=summer-sale) così i clic compaiono come fonte nominata nei tuoi strumenti di analisi, e osserva clic, conversione dopo il clic e ricavi. Se hai collegato il banner a un codice sconto univoco, la schermata della regola carrello e l'elenco ordini mostrano esattamente quanti ordini lo hanno usato: il codice funziona anche come pixel di tracciamento leggibile in denaro reale.

Condividi questo articolo:
David Miller

David Miller

Fondatore, mypresta.rocks

David Miller è uno specialista PrestaShop con oltre dieci anni di esperienza sul campo e fondatore di mypresta.rocks, uno studio di sviluppo con sede a Tychy, in Polonia. Progetta e mantiene un catalogo di 152 moduli PrestaShop — tra cui 21 suite « Revolution » dedicate a SEO, checkout, sicurezza, performance, marketing, ricerca, supporto e gestione del magazzino — che ogni giorno migliorano negozi reali, testati su PrestaShop 1.7.8, 8.x e 9.x. Si occupa inoltre della gestione di negozi in produzione che generano milioni di fatturato annuo, perciò il suo lavoro si misura sulle vendite reali, non sulle demo. La sua esperienza abbraccia l'intero e-commerce — performance, sicurezza, SEO e marketing — e va oltre PrestaShop, fino a WooCommerce, Shopify e sistemi su misura. Sul blog scrive del lato tecnico di PrestaShop: cosa fa davvero la piattaforma, cosa si rompe in produzione e quali soluzioni reggono nel tempo.

Ti è piaciuto questo articolo?

Ricevi i nostri ultimi consigli, guide e aggiornamenti dei moduli nella tua casella di posta.

Commenti

Ancora nessun commento. Sii il primo!

Sii il primo a fare una domanda o a condividere un feedback utile.

Caricamento...
Torna su