Badge prodotto personalizzati: mettere in evidenza novità, offerte e bestseller

"Novità", "Offerta" e "Bestseller" sono tre delle etichette d'angolo più utili che una miniatura prodotto possa mostrare — ma in PrestaShop solo due esistono già di serie, una dipende silenziosamente da un'impostazione che molti commercianti non controllano mai, e la terza non esiste affatto. Quindi, prima di cercare un modulo per badge, vale la pena capire con precisione che cosa fa già la piattaforma, dove si trovano gli interruttori nel back office e dove inizia il vero vuoto funzionale. Questa guida parla di come portare questi badge nel tuo negozio: implementazione, impostazioni, template, regole. (Se i badge spostino davvero l'ago su clic e conversioni è una domanda separata, che affrontiamo in i badge e le etichette funzionano davvero: questo articolo parte dal presupposto che tu abbia deciso di volerli e ti mostra come pubblicarli nel modo corretto.)

Ultimo aggiornamento: giugno 2026.

Che cosa offre PrestaShop nativamente — e che cosa no

Di serie, PrestaShop mostra una piccola pila di "flag" nell'angolo superiore di ogni miniatura prodotto. Sono gestiti da un unico partial di template — themes/your-theme/templates/catalog/_partials/product-flags.tpl — che cicla su {$product.flags} e stampa ciascun elemento come <li class="product-flag {$flag.type}"> dentro un <ul class="product-flags">. Quella classe è l'aggancio che userai più avanti per lo stile. I tipi di flag core forniti da PrestaShop sono un insieme fisso: new, on-sale, discount, online-only e pack:

Questo è l'insieme core che la piattaforma ti mette a disposizione. I badge di disponibilità e magazzino ("Esaurito", "Ultimi articoli in stock") sono un tema a parte: non sono una voce fissa nello stesso elenco di flag, e il modo in cui vengono mostrati (o se vengono mostrati) dipende dal tema e dalla versione, mentre il testo di disponibilità e le eventuali etichette stock personalizzate si controllano da Parametri negozio → Impostazioni prodotto. Anche temi e moduli possono aggiungere le proprie etichette sopra l'insieme core, quindi non dare per scontato che un badge di magazzino visto altrove provenga dallo stesso ciclo {$product.flags}.

Nota che cosa manca in quell'elenco: non esiste alcun flag nativo "Bestseller". PrestaShop tiene traccia dei prodotti più venduti internamente (alimenta il blocco ps_bestsellers e la pagina dei bestseller quando la abiliti), ma non applica mai un badge sulla miniatura. Questo è il primo vero vuoto, e ci torneremo.

Controllare la finestra del badge "Novità" (l'impostazione che molti commercianti non guardano mai)

Il badge "Novità" è controllato da un solo numero. Vai in Parametri negozio → Impostazioni prodotto e cerca Numero di giorni per cui il prodotto è considerato 'nuovo' (il valore di configurazione PS_NB_DAYS_NEW_PRODUCT). Su una nuova installazione il valore predefinito è 20, quindi di serie i prodotti aggiunti di recente mostrano il badge; molti negozi attivi, però, lo hanno impostato a 0 (qualcuno lo ha azzerato, oppure una migrazione lo ha lasciato vuoto), e quando vale 0 niente è mai nuovo e il flag non viene mai visualizzato. Quindi, se il badge "Novità" non appare, controlla prima questo valore. Impostalo su un numero sensato — 20 o 30 giorni è tipico — e PrestaShop contrassegnerà automaticamente qualunque prodotto la cui data di creazione (non la data dell'ultima modifica) rientri in quella finestra.

Che cosa significa, in pratica, per te? Due conseguenze concrete. Primo: il badge "Novità" è puramente basato sulla data e completamente automatico; non lo tocchi mai prodotto per prodotto e scade da solo quando la finestra passa. Secondo: usa come riferimento la data di inserimento originale, quindi salvare di nuovo un vecchio prodotto per "rinfrescarlo" non lo farà ricomparire come nuovo; se vuoi far sembrare di nuovo nuovo un prodotto sempreverde, devi duplicarlo o usare una regola di modulo (qui sotto). Adatta la finestra alla frequenza con cui cambia davvero il tuo catalogo: una finestra di 30 giorni su un negozio che aggiunge due prodotti all'anno significa semplicemente che quasi nessun articolo mostrerà mai il badge.

Il badge "Offerta": due cose diverse con la stessa parola addosso

È qui che i commercianti inciampano. PrestaShop ha due concetti separati che somigliano entrambi a "Offerta", ma non si muovono insieme:

• La casella "In offerta" (pagina prodotto, scheda Prezzi) mostra il flag on-sale. È un flag manuale e, da solo, non modifica il prezzo: è soltanto un'etichetta che selezioni.
• Una riduzione di prezzo — un Prezzo specifico sul prodotto, oppure una Regola prezzo catalogo valida per il catalogo sotto Catalogo → Sconti — mostra automaticamente il flag discount e cambia davvero quanto paga il cliente. Il tema predefinito di PrestaShop lo mostra come etichetta di ribasso, spesso con la percentuale.

Il punto è questo: se vuoi far comparire un badge di sconto, crea la riduzione e il flag discount farà il resto da solo; non selezionare anche "In offerta" aspettandoti che faccia i calcoli. Mostra la percentuale quando puoi ("-20%" attira più di un semplice "Offerta" perché quantifica il risparmio), e se gestisci ribassi su larga scala, la fatica di back office nel modificare centinaia di prezzi specifici è un problema a sé: vedi gli aggiornamenti massivi dei prezzi per farlo senza perdere il pomeriggio.

Il vuoto Bestseller — e i tre modi per colmarlo

Poiché non esiste un flag bestseller nativo, devi crearne uno. Tre strade, in ordine crescente di sforzo e decrescente di manutenzione manuale:

Percorso 1 — Manuale, con una caratteristica prodotto

L'opzione senza sviluppatore: crea una Caratteristica in Catalogo → Attributi & Caratteristiche (per esempio "Badge" con valori "Bestseller", "Scelta dello staff"), assegnala ai prodotti corretti e poi fai in modo che il tema la mostri. Non costa nulla e funziona su qualunque versione, ma è completamente manuale: decidi tu che cosa è un bestseller e lo mantieni aggiornato a mano. Va bene per "Scelta dello staff" e "Premiato", che richiedono comunque un giudizio umano. Diventa noioso per "Bestseller", che dovrebbe riflettere le vendite reali e quindi comincia a scivolare appena smetti di mantenerlo.

Percorso 2 — Modificare il template del tema

L'opzione da sviluppatore: estendi product-flags.tpl (e il partial della cella elenco, _partials/miniatures/product.tpl) per stampare il tuo <li class="product-flag bestseller"> quando una certa condizione è vera. Ti dà controllo totale e nessun costo di licenza. Il punto critico è lo stesso che colpisce ogni modifica al tema: vive nel tuo tema, quindi un cambio tema o la ricostruzione di un tema child può fartela perdere, e la logica "questo è un bestseller?" deve arrivare da qualche parte, di solito da una query che devi anche scrivere e mantenere. Controllo totale, responsabilità totale.

Percorso 3 — Un modulo badge basato su regole

Il motivo per cui esistono i moduli badge è esattamente questo vuoto: vuoi un badge "Bestseller" (o "Limitato", o "Ne restano pochi") che si ricalcoli da solo in base alle vendite o alle scorte invece che a un foglio di calcolo da aggiornare il primo del mese. Il nostro modulo Custom Product Badges aggiunge esattamente questo da PrestaShop 1.6 a 9: carichi o scegli un badge, poi lo fissi a prodotti specifici oppure lo colleghi a una regola perché si applichi automaticamente. Che cosa ti porta, concretamente? Il badge bestseller segue i prodotti che stanno davvero vendendo senza che tu debba rietichettare nulla; un badge "Scorte limitate" appare e scompare quando la quantità supera o scende sotto una soglia che imposti; e poiché si aggancia alla visualizzazione del prodotto invece di biforcare il tema, sopravvive a cambi tema e aggiornamenti: si installa e si configura dal back office, non da una fattura dello sviluppatore. Questa è la differenza pratica tra un programma di badge che degrada la settimana in cui sei sommerso dal lavoro e uno che resta affidabile da solo.

Stile e posizionamento — dove la classe CSS si guadagna il suo ruolo

Qualunque percorso tu scelga, il markup finisce nello stesso contenitore <ul class="product-flags">, ed è questo che rende coerente lo stile. Alcune realtà di posizionamento specifiche di PrestaShop:

• La posizione predefinita è in alto a sinistra, impilata. Il tema predefinito posiziona .product-flags in modo assoluto sopra l'immagine. Se aggiungi altri tipi di flag, si impilano nello stesso angolo: ecco perché la disciplina conta più di quanto sembri (prossima sezione).
• Definisci lo stile per tipo di flag, non a mano. Poiché ogni flag porta il proprio tipo come classe (.product-flag.new, .product-flag.discount, il tuo .product-flag.bestseller), imposti i colori una volta in CSS e si applicano ovunque venga mostrata la miniatura: griglia categoria, risultati di ricerca, blocchi in home page, righe di vendita incrociata. Gli abbinamenti convenzionali — rosso per lo sconto, verde per la novità, oro per il bestseller — si leggono subito perché i clienti se li aspettano già.
• Metti il CSS personalizzato nel posto giusto. Modificare direttamente il foglio di stile del tema viene sovrascritto a un aggiornamento del tema; un piccolo custom.css (o il foglio di stile del tuo modulo) è la sede sicura per aggiornamenti per colori e posizionamento dei badge.
• Testa a 375px. Il contenitore dei flag si restringe insieme alla miniatura su mobile. Un badge di due parole nitido su desktop può diventare una macchia illeggibile nella griglia di un telefono: controlla il breakpoint stretto prima di pubblicare.

Una regola più importante di tutto lo stile: misura

Il modo più rapido per far smettere di funzionare i badge è lasciare che un prodotto ne indossi cinque. "Novità + In offerta + Sconto + Bestseller + Spedizione gratuita" trasforma una miniatura pulita in rumore visivo, e quando tutto è in evidenza, niente lo è davvero. Due protezioni pratiche dentro PrestaShop:

• Limitati a circa due flag per miniatura. Se un prodotto merita davvero più badge, decidi un ordine di priorità (uno sconto attivo batte quasi sempre "Novità") e sopprimi il resto. I moduli badge basati su regole ti permettono di impostare quella priorità una volta; con i flag nativi la gestisci evitando di selezionare troppe opzioni manuali.
• Non lasciare che "Novità" resti appeso troppo a lungo. Una finestra nuovo prodotto di 90 giorni significa che metà catalogo è permanentemente "nuovo", e questo abitua i clienti a ignorare il badge. Mantieni PS_NB_DAYS_NEW_PRODUCT abbastanza breve perché "Novità" significhi ancora qualcosa.

Dove si inseriscono i badge nel quadro più ampio della pagina prodotto

I badge sono uno strato di segnalazione sulla miniatura; funzionano meglio quando la pagina a cui portano mantiene la promessa. Alcuni elementi vicini meritano di essere collegati fra loro invece di duplicarli qui:

• "Bestseller" è una dichiarazione di riprova sociale: se vuoi metterci dietro un numero reale, un contatore dei prodotti venduti totali trasforma "popolare" in "1.240 venduti".
• Il badge ottiene il clic; il resto della pagina deve chiudere la vendita. Parti dalle migliori pratiche di progettazione della pagina prodotto e dall'anatomia di una pagina prodotto.
• Per la domanda strategica — se queste etichette valgano davvero lo sforzo e quali meritino il loro spazio — leggi l'articolo collegato, i badge e le etichette funzionano davvero.

Domande frequenti

Il mio badge "Novità" non compare su nessun prodotto: che cosa non va?

Controlla prima PS_NB_DAYS_NEW_PRODUCT, sotto Parametri negozio → Impostazioni prodotto. Se è 0 (una situazione comune dopo una migrazione o dopo che un precedente proprietario lo ha azzerato), niente viene mai conteggiato come nuovo e il flag non viene mai mostrato. Impostalo a 20 o 30. Se il valore è corretto ma il badge continua a non comparire, il tuo tema potrebbe non includere il partial product-flags.tpl in quel template: un tema personalizzato o pesantemente modificato può averlo rimosso.

Perché il mio badge "Offerta" appare ma il prezzo non è cambiato?

Perché hai selezionato la casella In offerta, che è una semplice etichetta e non fa nulla al prezzo. Per ridurre davvero il prezzo e mostrare il flag di sconto, crea un Prezzo specifico sul prodotto o una Regola prezzo catalogo sotto Catalogo → Sconti. Il flag di sconto verrà quindi mostrato automaticamente e indicherà la riduzione reale.

Posso far aggiornare automaticamente un badge "Bestseller" in base alle vendite reali?

Non con i flag nativi: PrestaShop non ha alcun flag bestseller. Puoi curarlo a mano (una caratteristica prodotto che mantieni tu) oppure usare un modulo badge basato su regole che ricalcola dai dati di vendita, così il badge segue ciò che si sta davvero vendendo invece di una lista che dimentichi di aggiornare. È questo il vuoto che colma il nostro modulo Custom Product Badges.

Il mio badge personalizzato sopravviverà a un cambio tema o a un aggiornamento di PrestaShop?

Dipende da come lo hai aggiunto. Un badge inserito direttamente in product-flags.tpl vive nel tuo tema e può perdersi quando cambi tema o ricostruisci un tema child. Un badge aggiunto tramite un modulo che si aggancia alla visualizzazione del prodotto sopravvive agli aggiornamenti perché non fa parte dei file del tema.

Quanti badge dovrebbe mostrare un singolo prodotto?

Circa due, al massimo. Quando un prodotto soddisfa più condizioni, imposta una priorità: uno sconto attivo batte quasi sempre "Novità"; e sopprimi il resto. Cinque badge su una miniatura si leggono come rumore visivo, e quando tutto è in evidenza niente lo è.

La versione breve, specifica per PrestaShop: "Novità" è un vantaggio gratuito che dipende da una sola impostazione di conteggio giorni (predefinito 20: verifica che non sia ferma a 0), "Offerta" sono due impostazioni nascoste dietro una parola sola (usa la riduzione di prezzo, non solo la casella), e "Bestseller" è quello che la piattaforma non ti dà: quindi l'unica vera decisione è se curarlo a mano o lasciare che una regola lo mantenga onesto per te. Sistemati questi tre aspetti, l'angolo di ogni miniatura inizia a fare lavoro utile prima ancora che un cliente legga una sola riga di testo.