Aggiornato a giugno 2026, valido per PrestaShop dalla versione 1.7 alla 9. Il tema Classic non include ancora un pulsante Torna in alto; qui ci concentriamo su come inserirne uno nel punto che PrestaShop non sovrascriverà durante un aggiornamento.
Ecco la parte che la maggior parte delle guide su come “aggiungere un pulsante Torna in alto” salta: in un negozio PrestaShop la domanda raramente è se vuoi averne uno. È da dove proviene davvero il pulsante, perché questo determina se sopravviverà al prossimo aggiornamento del tema o del core. Il tema classic predefinito di PrestaShop non include un pulsante Torna in alto, ma molti temi premium ne aggiungono uno, e un page builder potrebbe inserirne un secondo. Quindi, prima di incollare qualsiasi JavaScript, il vero lavoro è capire che cosa il tuo negozio ha già e aggiungere l’elemento mancante nell’unico punto che PrestaShop non sovrascriverà.
Questa guida è l’implementazione specifica per PrestaShop: dove si trova di solito un pulsante, quale modulo e quale hook ti permettono di aggiungerne uno senza modificare il tema padre e come fare in modo che sopravviva agli aggiornamenti. Per capire perché il pulsante incida davvero su coinvolgimento e orientamento, il ragionamento UX, il tema mobile, la psicologia, trovi tutto in perché un pulsante Torna in alto conta più di quanto sembri, dove c’è anche lo snippet completo in vanilla JS. Qui non lo ripeteremo.
Controlla che cosa il tuo negozio genera già
Comincia escludendo la presenza di un pulsante che non sapevi di avere. Il tema classic di PrestaShop (dalla 1.7 alla 9.x) non include un pulsante Torna in alto nativo: il suo footer (themes/classic/templates/_partials/footer.tpl) e il JavaScript compilato (themes/classic/assets/js/theme.js, costruito a partire dai sorgenti _dev/js/) non contengono alcun elemento di questo tipo. Quindi, in un negozio classic standard, non c’è nulla da trovare. Molti temi premium, però, includono una propria freccia Torna in alto che compare gradualmente dopo lo scorrimento oltre la prima schermata.
La prima verifica, quindi, è concreta: scorri la homepage e una pagina categoria lunga sia da desktop sia da mobile. Se in basso a destra compare un pulsante e funziona, è il tema a fornirlo e non devi aggiungere nulla. Devi solo stilizzarlo, quindi è un lavoro di CSS (vedi sotto). Se non compare nulla. Che è il comportamento predefinito del tema classic, oppure compare ma non funziona, allora devi aggiungerne uno, e le sezioni successive spiegano come farlo nel modo corretto per PrestaShop.
Il modo sbagliato: modificare il tema padre
La tentazione è aprire footer.tpl o theme.js nel tema attivo e modificarli direttamente. Funziona fino al successivo aggiornamento del tema: l’aggiornamento sovrascrive i tuoi file e il pulsante scompare, di solito notato settimane dopo, quando nessuno ci sta guardando. È il motivo più comune per cui una “piccola” modifica front-end diventa manutenzione ricorrente.
La regola che lo evita è la stessa che PrestaShop impone ovunque: non modificare mai il tema padre. Se stai personalizzando l’aspetto di un tema acquistato, l’override va in un tema child; in temi child in PrestaShop spieghiamo esattamente come funziona e perché. Per un widget autonomo come un pulsante di scorrimento, però, di solito non devi nemmeno toccare i file del tema: è il punto della prossima sezione.
Il modo sicuro per gli aggiornamenti: un blocco HTML più JS/CSS personalizzati
Un pulsante Torna in alto è composto da tre piccoli elementi: un po’ di markup, poche righe di JavaScript per mostrarlo/nasconderlo e animare lo scorrimento, e del CSS per posizionarlo e definirne lo stile. Nulla di tutto questo deve vivere in un file del tema. Il pattern sicuro per gli aggiornamenti in PrestaShop è inserire il markup in un blocco HTML e il comportamento nei tuoi file JS/CSS personalizzati.
1. Il markup, tramite un blocco HTML
Invece di inserire il pulsante direttamente in un template, mettilo in un blocco di contenuto che controlli dal back office. Non esiste una pagina nativa del back office per aggiungere markup arbitrario per un pulsante di scorrimento, quindi usa un modulo HTML personalizzato che supporti esplicitamente l’hook che ti serve, oppure crea un piccolo modulo dedicato registrato su un hook noto e renderizzato. Per un pulsante ancorato al footer, un hook come displayFooter o displayBeforeBodyClosingTag è la collocazione naturale. In blocchi HTML: aggiungere contenuti personalizzati ovunque trattiamo la tecnica generale per inserire markup in un hook supportato e renderizzato. Il pulsante in sé è un solo elemento:
<button id="scrollTop" aria-label="Scroll to top of page">↑</button>
2. Il comportamento, in custom.js (non in theme.js)
Il tema classic di PrestaShop include un custom.js (e un custom.css) per permetterti di aggiungere comportamento senza toccare gli asset compilati del tema, ma disponibilità e comportamento durante gli aggiornamenti dipendono dal tema, e un aggiornamento del tema può sovrascrivere i file del tema padre. Per una sicurezza affidabile negli aggiornamenti, inserisci JS/CSS in un tema child o in un modulo; usa il custom.js/custom.css del tema padre solo se accetti di ricontrollarli dopo ogni aggiornamento del tema. È lì che va la logica di scorrimento. Il motivo per cui questo è il posto corretto. Insieme alle avvertenze sulla pipeline degli asset. È l’intero tema di CSS e JavaScript personalizzati senza rompere gli aggiornamenti, che vale la pena leggere prima di aggiungere qualsiasi script front-end. La logica in sé è semplice: mostra il pulsante dopo che la viewport ha superato circa 300px di scorrimento e, al clic, scorri dolcemente verso l’alto.
3. Lo stile, in custom.css
Il posizionamento sta in custom.css: fisso in basso a destra, con un’area di tocco non inferiore a 44×44px e, dettaglio specifico di PrestaShop che spesso crea problemi, uno z-index che stia sotto il banner per il consenso ai cookie e sotto eventuali widget di chat, ma sopra il contenuto della pagina. In un negozio tipico competi con il banner GDPR, la bolla della live chat e, se il tema o un modulo la aggiunge, una barra fissa “aggiungi al carrello” nelle pagine prodotto; scegli deliberatamente lo z-index invece di ricorrere a 999999 e sperare che vada bene.
Pulsante nativo vs blocco HTML vs modifica del tema
| Approccio | Sopravvive agli aggiornamenti? | Dove si trova | Quando conviene… |
|---|---|---|---|
| Usare il pulsante del tema | Sì | Tema (stilizzalo in custom.css) | Il tuo tema, di solito premium, ne genera già uno e ha solo bisogno di ritocchi di stile o posizione. |
| Blocco HTML + custom.js/custom.css | Sì | Un blocco di contenuto + file asset personalizzati | Il tema non ha un pulsante, oppure il suo pulsante è rotto, e ne vuoi uno senza interventi chirurgici sul tema. |
| Override in tema child | Sì (finché non cambi tema) | themes/your-child-theme/ | Stai già mantenendo un tema child per altri motivi. |
| Modificare il tema padre | No | .tpl/.js del tema attivo | Mai. Il prossimo aggiornamento del tema lo rimuove senza avvisare. |
I dettagli di accessibilità e z-index che PrestaShop ti impone
Dal back office imposti quando compare il pulsante, il suo stile e in quale angolo si trova, senza toccare il codice del tema.
Due cose rompono i pulsanti di scorrimento nei negozi PrestaShop reali, ed entrambe sono facili da sistemare bene una volta sola. Prima: l’accessibilità. Genera il pulsante come un vero <button>, non come un <div> stilizzato, assegnagli un aria-label="Scroll to top of page" così uno screen reader ne annuncia lo scopo, e assicurati che sia raggiungibile da tastiera. Un glifo a freccia senza etichetta è invisibile per le tecnologie assistive.
Seconda: il problema dei livelli. Un front office PrestaShop spesso impila diversi elementi fissi nello stesso angolo in basso a destra: l’avviso cookie/consenso, il widget di chat e, nei negozi in cui il tema o un modulo la aggiunge, una barra fissa “aggiungi al carrello” che compare nelle pagine prodotto mentre il cliente scorre (non è una funzionalità nativa di PrestaShop, quindi controlla se il tuo negozio la usa). Un pulsante di scorrimento con uno z-index scelto male coprirà il pulsante “Aggiungi al carrello”, il che significa che il tuo piccolo miglioramento UX sta ostacolando gli ordini. Prima di considerarlo finito, testalo specificamente su una pagina prodotto con descrizione lunga, da mobile, con il banner del consenso visibile.
Non reinventare lo scorrimento fluido se stai già aggiungendo movimento
Se un pulsante Torna in alto è l’unica animazione che stai valutando, la soluzione leggera con JS personalizzato descritta sopra è esattamente il giusto livello di intervento: qualcosa di più pesante sarebbe sovraingegnerizzazione per un singolo pulsante. Ma se stai pianificando anche fade-in, sezioni che si rivelano allo scorrimento o altri movimenti nel negozio, vale la pena scegliere un unico approccio coerente al comportamento di scorrimento invece di aggiungere script scollegati che ascoltano tutti lo stesso evento scroll. In animazioni di scorrimento: aggiungere movimento con misura spieghiamo come farlo con gusto e senza far crollare le prestazioni.
La versione breve
Su PrestaShop il pulsante Torna in alto non è un problema di codice, il codice sono cinque righe, è un problema di collocazione. Metti il markup in un blocco HTML del back office, il comportamento in custom.js, lo stile in custom.css, mai nel tema padre, e assegnagli uno z-index che rispetti il banner del consenso e la barra “aggiungi al carrello”. Così ottieni il beneficio sul coinvolgimento senza carico di manutenzione e senza nulla da rifare al prossimo aggiornamento. La lezione conquistata sul campo dietro tutto questo è la stessa che attraversa l’intero gruppo di guide: i piccoli interventi front-end che sembrano banali sono proprio quelli che si rompono silenziosamente dopo un aggiornamento, se non li aggiungi nel punto che PrestaShop lascia a tua disposizione.
Domande frequenti
Come capisco se il mio tema ha già un pulsante Torna in alto?
Scorri la homepage e una pagina categoria lunga sia da desktop sia da mobile. Se in basso a destra compare una freccia e funziona, la fornisce il tema: il tuo lavoro è stilizzarla, non costruirla. Per confermare da dove proviene, visualizza il sorgente e cerca un elemento #back-to-top o .scroll-to-top. Il tema classic predefinito non ne ha nessuno, quindi in un negozio classic standard non c’è davvero nulla da trovare.
Perché non aggiungere semplicemente il pulsante a footer.tpl?
Perché footer.tpl e theme.js sono file del tema padre, e il prossimo aggiornamento del tema li sovrascriverà: il pulsante sparirà, di solito senza che nessuno se ne accorga per settimane. È il modo più comune in cui una “piccola” modifica diventa manutenzione ricorrente. Inserisci invece il markup in un blocco HTML del back office e il comportamento in asset personalizzati o in un modulo, così nessun elemento dell’albero del tema contiene la tua modifica.
Quale hook dovrebbe usare il blocco HTML del pulsante?
Per un pulsante ancorato al footer, displayFooter o displayBeforeBodyClosingTag sono le collocazioni naturali: entrambi vengono renderizzati vicino alla fine della pagina in un negozio standard. Non esiste una pagina nativa del back office per markup arbitrario di un pulsante di scorrimento, quindi usa un modulo HTML personalizzato che supporti esplicitamente l’hook che vuoi, oppure crea un piccolo modulo dedicato registrato su un hook noto e renderizzato.
Quale z-index dovrei assegnargli?
Uno scelto deliberatamente, non 999999. Il pulsante deve stare sopra il contenuto della pagina ma sotto il banner per il consenso ai cookie, sotto il widget di chat e sotto eventuali barre fisse “aggiungi al carrello” nelle pagine prodotto; altrimenti copre il pulsante di acquisto e ostacola gli ordini. Scegli un valore, poi testa su una pagina prodotto lunga da mobile, con il banner del consenso visibile e la barra “aggiungi al carrello” attiva, prima di considerarlo finito.
Il pulsante deve essere accessibile da tastiera?
Sì. Generarlo come un vero <button>, non come un <div> stilizzato, lo rende focalizzabile e raggiungibile da tastiera; inoltre assegnagli un aria-label="Scroll to top of page" così uno screen reader ne annuncia lo scopo. Un glifo a freccia senza etichetta è invisibile per le tecnologie assistive, e un div non è affatto focalizzabile: entrambi sono dettagli facili da gestire in fase di sviluppo e dolorosi da correggere dopo.
Il mio tema genera già un pulsante: posso semplicemente riposizionarlo?
Sì, ed è un lavoro di CSS, non di sviluppo. Stilizza e riposiziona il pulsante esistente in custom.css (o nel foglio di stile del tuo tema child) invece di aggiungerne un secondo: due pulsanti Torna in alto impilati nello stesso angolo sono un risultato accidentale frequente quando non si controlla prima. Regola gli offset bottom/right e lo z-index in modo che non interferisca con gli altri widget fissi.
Dovrei scrivere una logica di scorrimento dedicata se sto aggiungendo anche altre animazioni?
Se il pulsante è l’unico movimento che stai aggiungendo, la soluzione leggera con JS personalizzato è esattamente sufficiente. Ma se stai pianificando anche fade-in o sezioni che si rivelano allo scorrimento, scegli un unico approccio coerente allo scroll invece di collegare script scollegati che ascoltano tutti lo stesso evento: è così che le prestazioni degradano silenziosamente. La guida alle animazioni di scorrimento spiega come gestirle come un unico livello controllato.
Guide correlate
Commenti
Lascia un commento
Condividi una domanda, un dettaglio di installazione o un feedback utile per un altro lettore.