Dernière mise à jour : juin 2026, valable pour PrestaShop 1.7 à 9. Le thème Classic n’intègre toujours pas de bouton de retour en haut ; l’objectif ici est de le placer à l’endroit que PrestaShop n’écrasera pas lors d’une mise à jour.
Voici ce que la plupart des guides « ajouter un bouton de retour en haut » oublient : sur une boutique PrestaShop, la vraie question est rarement de savoir si vous en voulez un. Elle est de savoir d’où vient réellement le bouton, car c’est ce qui détermine s’il survivra à la prochaine mise à jour du thème ou du cœur. Le thème Classic par défaut de PrestaShop n’intègre pas de bouton de retour en haut, mais beaucoup de thèmes premium en ajoutent un, et un constructeur de pages peut en injecter un deuxième. Avant de coller le moindre JavaScript, le vrai travail consiste donc à comprendre ce que votre boutique affiche déjà, puis à ajouter l’élément manquant au seul endroit que PrestaShop n’écrasera pas.
Ce guide se concentre sur l’implémentation propre à PrestaShop : où ce type de bouton se place généralement, quel module et quel hook permettent d’en ajouter un sans modifier le thème parent, et comment le faire survivre aux mises à jour. Pour comprendre pourquoi ce bouton améliore l’engagement et l’orientation, le raisonnement UX, l’enjeu mobile, la psychologie, tout est expliqué dans pourquoi un bouton de retour en haut compte plus qu’on ne le pense, avec l’extrait complet d’implémentation en vanilla JS. Nous ne le répéterons donc pas ici.
Vérifiez ce que votre boutique affiche déjà
Commencez par écarter la possibilité qu’un bouton existe déjà sans que vous l’ayez remarqué. Le thème classic de PrestaShop (1.7 à 9.x) n’inclut pas de bouton natif de retour en haut, son pied de page (themes/classic/templates/_partials/footer.tpl) et son JavaScript compilé (themes/classic/assets/js/theme.js, généré depuis les sources _dev/js/) ne contiennent aucun élément de ce type. Sur une boutique Classic standard, il n’y a donc rien à trouver. En revanche, de nombreux thèmes premium livrent leur propre flèche de retour en haut, qui apparaît progressivement une fois que l’on a fait défiler la page au-delà de la ligne de flottaison.
Le premier diagnostic est donc très concret : faites défiler votre page d’accueil et une longue page de catégorie, sur ordinateur comme sur mobile. Si un bouton apparaît déjà en bas à droite et fonctionne, c’est votre thème qui le fournit et vous n’avez rien à ajouter, vous devez le styliser, ce qui relève du CSS (voir plus bas). Si rien n’apparaît. Ce qui est le comportement par défaut du thème Classic, ou si le bouton apparaît mais ne fonctionne pas, alors vous devez en ajouter un, et les sections suivantes expliquent comment le faire à la manière PrestaShop.
La mauvaise méthode : modifier le thème parent
La tentation consiste à ouvrir footer.tpl ou theme.js dans le thème actif et à les modifier directement. Cela fonctionne à peu près jusqu’à la prochaine mise à jour du thème, elle écrase vos fichiers et votre bouton disparaît, souvent remarqué plusieurs semaines plus tard, au mauvais moment. C’est la raison la plus fréquente pour laquelle une « petite » retouche front-end se transforme en maintenance récurrente.
La discipline qui évite ce problème est celle que PrestaShop impose partout : ne modifiez jamais le thème parent. Si vous personnalisez l’apparence d’un thème acheté, la surcharge doit vivre dans un thème enfant ; nous expliquons précisément comment cela fonctionne, et pourquoi, dans les thèmes enfants dans PrestaShop. Pour un widget autonome comme un bouton de retour en haut, toutefois, vous n’avez généralement même pas besoin de toucher aux fichiers du thème, c’est l’objet de la section suivante.
La méthode compatible avec les mises à jour : un bloc HTML et du JS/CSS personnalisé
Un bouton de retour en haut tient en trois petites parties : un peu de balisage, quelques lignes de JavaScript pour l’afficher/le masquer et animer le défilement, puis un peu de CSS pour le positionner et le styliser. Rien de tout cela n’a besoin de vivre dans un fichier de thème. Le modèle compatible avec les mises à jour sur PrestaShop consiste à placer le balisage dans un bloc HTML et le comportement dans vos fichiers JS/CSS personnalisés.
1. Le balisage, via un bloc HTML
Au lieu de coder le bouton en dur dans un template, placez-le dans un bloc de contenu que vous contrôlez depuis le back-office. PrestaShop ne propose pas de page native en back-office pour ajouter librement le balisage d’un bouton de défilement ; utilisez donc un module HTML personnalisé qui prend explicitement en charge le hook souhaité, ou créez un petit module dédié enregistré sur un hook rendu connu. Pour un bouton ancré dans le pied de page, un hook comme displayFooter ou displayBeforeBodyClosingTag est l’emplacement naturel. Nous détaillons la méthode générale pour insérer du balisage dans un hook pris en charge et effectivement rendu dans Blocs HTML : ajouter du contenu personnalisé n’importe où. Le bouton lui-même tient en un élément :
<button id="scrollTop" aria-label="Retour en haut de la page">↑</button>
2. Le comportement, dans custom.js (pas theme.js)
Le thème Classic de PrestaShop inclut un custom.js (et un custom.css) pour vous permettre d’ajouter du comportement sans toucher aux ressources compilées du thème, mais leur disponibilité et leur comportement lors des mises à jour dépendent du thème, et une mise à jour peut écraser les fichiers du thème parent. Pour une vraie sécurité lors des mises à jour, placez votre JS/CSS dans un thème enfant ou dans un module ; n’utilisez les fichiers custom.js/custom.css du thème parent que si vous acceptez de les vérifier après chaque mise à jour du thème. C’est là que doit aller la logique de défilement. La raison pour laquelle c’est le bon endroit, ainsi que les précautions liées au pipeline de ressources. Fait l’objet entier de CSS et JavaScript personnalisés sans casser les mises à jour, un guide à lire avant d’ajouter le moindre script front-end. La logique elle-même n’a rien d’exceptionnel : afficher le bouton lorsque la fenêtre a défilé d’environ 300px, puis faire remonter la page en douceur au clic.
3. Le style, dans custom.css
Le positionnement se fait dans custom.css : fixé en bas à droite, avec une cible tactile d’au moins 44×44px, et, c’est le piège propre à PrestaShop, un z-index placé sous votre bandeau de consentement aux cookies et tout widget de chat, mais au-dessus du contenu de la page. Sur une boutique typique, vous cohabitez avec le bandeau RGPD, la bulle de chat en direct et, si votre thème ou un module en ajoute une, une barre fixe « ajouter au panier » sur les pages produit ; choisissez donc le z-index délibérément au lieu de saisir 999999 en espérant que tout ira bien.
Bouton natif, bloc HTML ou modification du thème
| Approche | Survit aux mises à jour ? | Où il se trouve | Cas idéal… |
|---|---|---|---|
| Utiliser le bouton de votre thème | Oui | Thème (à styliser dans custom.css) | Votre thème, généralement premium, en affiche déjà un et il faut seulement le restyliser ou le repositionner. |
| Bloc HTML + custom.js/custom.css | Oui | Un bloc de contenu + des fichiers de ressources personnalisés | Votre thème n’a pas de bouton, ou son bouton est cassé, et vous en voulez un sans chirurgie du thème. |
| Surcharge dans un thème enfant | Oui (jusqu’à un changement de thème) | themes/your-child-theme/ | Vous maintenez déjà un thème enfant pour d’autres raisons. |
| Modifier le thème parent | Non | .tpl/.js du thème actif | Jamais. La prochaine mise à jour du thème le supprimera silencieusement. |
Les détails d’accessibilité et de z-index imposés par PrestaShop
Depuis le back office, vous définissez quand le bouton apparaît, son style et le coin où il se place, sans toucher au code du thème.
Deux éléments cassent les boutons de retour en haut sur de vraies boutiques PrestaShop, et les deux sont faciles à traiter correctement dès le départ. D’abord, l’accessibilité : affichez le bouton comme un vrai <button>, pas comme un <div> stylisé, donnez-lui un aria-label="Scroll to top of page" pour qu’un lecteur d’écran annonce sa fonction, et assurez-vous qu’il est accessible au clavier. Un pictogramme de flèche sans libellé est invisible pour les technologies d’assistance.
Ensuite, le problème des superpositions. Un front office PrestaShop empile souvent plusieurs éléments fixes dans le même coin inférieur droit : la notification de cookies/consentement, le widget de chat et, sur les boutiques dont le thème ou un module l’ajoute, une barre fixe d’ajout au panier qui apparaît sur les pages produit lorsque le client fait défiler la page (ce n’est pas une fonctionnalité native de PrestaShop, vérifiez donc si votre boutique en possède une). Un bouton de retour en haut avec un z-index mal choisi recouvrira le bouton « Ajouter au panier », ce qui signifie que votre petite amélioration UX freine désormais les commandes. Testez précisément le bouton sur une page produit avec une longue description, sur mobile, avec le bandeau de consentement visible, avant de considérer le travail terminé.
Ne réinventez pas le défilement fluide si vous ajoutez déjà du mouvement
Si le bouton de retour en haut est la seule animation que vous envisagez, l’approche légère en JS personnalisé décrite plus haut est le bon niveau d’effort, tout ce qui serait plus lourd relèverait de la sur-ingénierie pour un simple bouton. Mais si vous prévoyez aussi des apparitions en fondu, des sections révélées au défilement ou d’autres mouvements dans votre boutique, il vaut mieux décider d’une approche cohérente du comportement de défilement, au lieu d’empiler des scripts indépendants qui écoutent chacun le même événement de scroll. Nous expliquons comment le faire avec mesure (et sans plomber les performances) dans animations au défilement : ajouter un mouvement subtil.
La version courte
Sur PrestaShop, le bouton de retour en haut n’est pas un problème de code, le code tient en cinq lignes, c’est un problème de placement. Placez le balisage dans un bloc HTML du back-office, le comportement dans custom.js, le style dans custom.css, jamais dans le thème parent, et donnez-lui un z-index qui respecte le bandeau de consentement et la barre d’ajout au panier. Faites cela et vous obtenez le bénéfice d’engagement sans charge de maintenance, ni rien à refaire à la prochaine mise à jour. La leçon, acquise à force d’expérience, est celle qui traverse toute cette série : les petites touches d’interface qui semblent triviales sont précisément celles qui cassent discrètement lors des mises à jour si vous ne les ajoutez pas à l’endroit que PrestaShop vous réserve.
Questions fréquentes
Comment savoir si mon thème possède déjà un bouton de retour en haut ?
Faites défiler votre page d’accueil et une longue page de catégorie, sur ordinateur comme sur mobile. Si une flèche apparaît en bas à droite et fonctionne, votre thème la fournit, votre travail consiste à la styliser, pas à la reconstruire. Pour vérifier d’où elle vient, affichez le code source et cherchez un élément #back-to-top ou .scroll-to-top. Le thème Classic par défaut n’en contient aucun ; sur une boutique Classic standard, il n’y a donc vraiment rien à trouver.
Pourquoi ne pas simplement ajouter le bouton dans footer.tpl ?
Parce que footer.tpl et theme.js sont des fichiers du thème parent, et que la prochaine mise à jour du thème les écrasera, votre bouton disparaîtra, généralement sans que personne ne le remarque pendant des semaines. C’est la façon la plus fréquente de transformer une « petite » retouche en maintenance récurrente. Placez plutôt le balisage dans un bloc HTML du back-office et le comportement dans des ressources personnalisées ou un module, afin qu’aucun élément de l’arborescence du thème ne porte votre modification.
Quel hook le bloc HTML du bouton doit-il utiliser ?
Pour un bouton ancré dans le pied de page, displayFooter ou displayBeforeBodyClosingTag sont les emplacements naturels. Les deux sont rendus près de la fin de la page sur une boutique standard. PrestaShop ne propose pas de page native en back-office pour du balisage libre de bouton de défilement ; utilisez donc un module HTML personnalisé qui prend explicitement en charge le hook souhaité, ou créez un petit module dédié enregistré sur un hook rendu connu.
Quel z-index dois-je lui donner ?
Une valeur choisie délibérément, pas 999999. Le bouton doit se placer au-dessus du contenu de la page mais sous votre bandeau de consentement aux cookies, votre widget de chat et toute barre fixe d’ajout au panier sur les pages produit, sinon il recouvre le bouton d’achat et freine les commandes. Choisissez une valeur, puis testez sur une longue page produit mobile avec le bandeau de consentement affiché et la barre d’ajout au panier active avant de considérer le travail terminé.
Le bouton doit-il être accessible au clavier ?
Oui. Affichez-le comme un vrai <button>, pas comme un <div> stylisé, afin qu’il puisse recevoir le focus et être atteint au clavier, et donnez-lui un aria-label="Scroll to top of page" pour qu’un lecteur d’écran annonce sa fonction. Un pictogramme de flèche sans libellé est invisible pour les technologies d’assistance, et une div n’est pas focusable du tout, deux points faciles à bien faire dès la conception, mais pénibles à corriger après coup.
Mon thème affiche déjà un bouton, puis-je simplement le repositionner ?
Oui, et c’est un travail CSS, pas une nouvelle construction. Stylisez et repositionnez le bouton existant dans custom.css (ou dans la feuille de style de votre thème enfant) au lieu d’en ajouter un deuxième, deux boutons de retour en haut empilés dans le même coin sont une conséquence fréquente d’une vérification oubliée. Ajustez ses décalages bottom/right et son z-index pour qu’il ne chevauche pas vos autres widgets fixes.
Dois-je écrire sa propre logique de défilement si j’ajoute aussi d’autres animations ?
Si le bouton est le seul mouvement que vous ajoutez, l’approche légère en JS personnalisé suffit exactement. Mais si vous prévoyez aussi des apparitions en fondu ou des sections révélées au défilement, adoptez une approche cohérente du défilement plutôt que d’empiler des scripts indépendants qui écoutent chacun le même événement, c’est ainsi que les performances se dégradent discrètement. Le guide des animations au défilement explique comment en faire une couche maîtrisée.
Guides associés
Commentaires
Laisser un commentaire
Partagez une question, un détail de pose ou un retour qui pourrait aider un autre lecteur.