DataFirefly Retour en haut — Documentation
Installer et configurer le bouton « Retour en haut » sur PrestaShop 8 et 9.
Le module DataFirefly Retour en haut ajoute un bouton flottant qui ramène vos visiteurs en haut de page d’un seul clic. Ce guide couvre l’installation et l’ensemble des réglages disponibles.
Installation
- Dans votre back-office, allez dans Modules > Module Manager.
- Cliquez sur Installer un module (en haut à droite) et envoyez l’archive
dfbacktotop.zip. - Une fois l’installation terminée, cliquez sur Configurer.
Le module s’enregistre automatiquement sur les hooks actionFrontControllerSetMedia et displayFooter. Aucune intervention manuelle sur les hooks n’est nécessaire.
Configuration
La page de configuration se compose de deux onglets : Comportement et Apparence.
Onglet Comportement
- Seuil de déclenchement (px) — nombre de pixels de défilement à partir duquel le bouton apparaît. Valeur par défaut :
300. - Défilement fluide — active la remontée animée et progressive. Désactivé, le retour en haut est instantané.
- Afficher sur mobile — affiche ou masque le bouton sur les écrans de moins de 768 px de large.
Onglet Apparence
- Position — en bas à droite ou en bas à gauche.
- Icône — chevron, flèche ou triangle (icônes SVG intégrées).
- Taille du bouton — diamètre du bouton, de 24 à 120 px.
- Rayon des angles — de 0 % (carré) à 50 % (cercle).
- Marge horizontale / verticale — distance par rapport aux bords de l’écran.
- Couleur de fond, Couleur de fond (survol), Couleur de l’icône — codes hexadécimaux.
- Ombre portée — ajoute une ombre douce sous le bouton.
- z-index — augmentez cette valeur si le bouton passe sous d’autres éléments fixes (bandeau cookies, chat, etc.).
Chaque réglage est validé à l’enregistrement : les couleurs doivent être des codes hexadécimaux valides, et la taille comme le rayon sont bornés pour éviter tout affichage cassé.
Formes du bouton
La forme est entièrement pilotée par le rayon des angles :
50 %— cercle parfait.20 %— carré aux angles arrondis.0 %— carré net.
Compatibilité avec votre thème
Le bouton est injecté via le hook displayFooter, présent dans le thème Classic et la grande majorité des thèmes PrestaShop. Si votre thème personnalisé n’appelle pas ce hook, le bouton ne s’affichera pas : il suffit d’ajouter l’appel au hook dans le template de pied de page du thème.
Performance et accessibilité
- JavaScript natif d’environ 1,5 ko, sans jQuery ni dépendance externe.
- Suivi du défilement via
requestAnimationFrameet écouteur passif, sans impact perceptible sur les Core Web Vitals. - Bouton natif avec attribut
aria-labelet focus clavier visible. - Respect de la préférence système
prefers-reduced-motion: le défilement devient instantané si l’utilisateur a réduit les animations. - Aucune donnée personnelle collectée — compatible RGPD par conception.
FAQ
Le bouton ne s’affiche pas, que vérifier ?
Vérifiez que votre thème implémente le hook displayFooter et que vous avez suffisamment défilé pour dépasser le seuil de déclenchement (300 px par défaut). Videz également le cache PrestaShop après installation.
Puis-je l’utiliser en multiboutique ?
Oui. Les réglages sont enregistrés via Configuration et s’appliquent selon le contexte de boutique actif.
Le module est-il vraiment gratuit ?
Oui, sous licence gratuite, sans limitation de fonctionnalité.