Description du module
Module gratuit de retour en haut pour PrestaShop
Facilitez la navigation sur les pages longues de votre boutique avec Concepty Retour en haut, un module PrestaShop gratuit qui ajoute un bouton « Retour en haut » discret et personnalisable. Après le défilement défini dans les réglages, le bouton apparaît sur la boutique et permet de rejoindre le haut de la page d’un seul clic. Il convient notamment aux fiches produit détaillées, pages catégories, articles et contenus riches.
Le module est pensé pour s’intégrer simplement à l’interface du site : les réglages sont accessibles depuis le back-office et ne demandent pas de modifier les fichiers du thème. L’apparence peut ainsi être harmonisée avec votre identité visuelle, sans développement spécifique.
À quoi sert un bouton « Scroll to Top » sur PrestaShop ?
Lorsqu’un visiteur consulte une longue page catégorie ou fait défiler une fiche produit, retrouver le menu principal peut demander de remonter manuellement toute la page. Un bouton de retour en haut de page lui fournit un raccourci pratique. Il ne remplace ni le menu ni le fil d’Ariane : il complète les possibilités de navigation, notamment sur mobile.
Par défaut, le bouton n’apparaît qu’après 300 pixels de défilement. Cette distance se modifie librement dans la configuration. Vous pouvez même régler la valeur sur zéro si vous souhaitez l’afficher immédiatement.
Personnalisez le bouton depuis votre back-office
Le module propose une interface d’administration claire avec des options visuelles et un aperçu en direct en mode ordinateur ou mobile. Vous pouvez modifier les paramètres suivants :
- Activer ou désactiver complètement le bouton sur la boutique.
- Afficher ou masquer sur mobile, indépendamment de l’affichage ordinateur.
- Choisir la couleur de fond et la couleur de la flèche à l’aide de champs de couleur.
- Sélectionner une forme : ronde ou carrée à coins arrondis.
- Définir la position du bouton à gauche ou à droite de l’écran.
- Régler les marges horizontale et inférieure pour éviter les éléments importants du thème.
- Adapter la taille du bouton selon votre interface.
- Déterminer le seuil d’apparition après défilement.
- Activer le défilement fluide pour remonter progressivement vers le haut.
L’aperçu permet de vérifier rapidement la position et les couleurs avant d’enregistrer les changements. Les réglages sont centralisés dans une même page, sans feuille CSS à éditer.
Un bouton qui s’adapte aussi à l’affichage mobile
Sur smartphone, un petit bouton de retour en haut peut aider les visiteurs qui viennent de parcourir plusieurs blocs de produits ou une longue description. La taille et les marges sont réglables pour mieux l’intégrer à votre mise en page. Si votre thème utilise déjà une navigation flottante ou des éléments fixes, vous pouvez désactiver l’affichage mobile.
Sur ordinateur, la position à gauche ou à droite permet d’éviter un autre composant placé dans un angle de l’écran. Après installation, vérifiez toujours la cohabitation avec vos outils de chat, bandeaux, widgets et fenêtres flottantes.
Défilement fluide et accessibilité
Lorsque l’option est active, un clic sur le bouton lance un retour fluide vers le haut de page. Vous pouvez désactiver cet effet pour obtenir un retour immédiat. Le script du module tient également compte de la préférence système de réduction des animations, afin de limiter les mouvements lorsqu’un visiteur a demandé une expérience plus sobre.
Le bouton dispose d’une fonction claire et reste visuellement identifiable grâce à son pictogramme fléché. Choisissez des couleurs suffisamment contrastées pour qu’il reste facile à distinguer sur les pages de votre boutique.
Installation du module Retour en haut PrestaShop
1. Téléchargez l’archive concepty-scroll-top-prestashop-1.0.0.zip depuis cette fiche.
2. Dans l’administration de votre boutique, ouvrez Modules > Gestionnaire de modules.
3. Cliquez sur Installer un module et sélectionnez l’archive ZIP.
4. Ouvrez la page Configurer de Concepty – Retour en haut.
5. Choisissez vos couleurs, la forme, la taille, la position et le seuil d’affichage, puis enregistrez.
6. Testez le bouton sur une page suffisamment longue, sur ordinateur et sur mobile.
Aucune intervention dans les fichiers du thème ni import SQL manuel ne sont nécessaires pour installer le module. Il utilise le chargement natif des ressources front-office de PrestaShop et n’ajoute pas d’override.
Compatibilité PrestaShop et version
Version du module : 1.0.0. La fiche affiche la famille PrestaShop 9.X : le module est présenté en fonctionnement sur une installation locale PrestaShop 9.2.0 dans les captures. Le code prévoit aussi une plage de versions 8.x à 9.x, mais cela ne constitue pas une validation de chaque version ; vérifiez votre environnement et votre thème avant toute mise en production.
Le module est proposé gratuitement au téléchargement par Concepty. Sa vocation est de répondre à un besoin simple, avec les principaux réglages regroupés dans l’administration.
Questions fréquentes
Puis-je changer la couleur de la flèche ?
Oui. La couleur de la flèche et celle de son fond sont réglables séparément depuis la page de configuration.
Est-il possible de placer le bouton à gauche ?
Oui. Vous pouvez choisir le côté de l’écran, ajuster la marge horizontale et définir la distance par rapport au bas de la fenêtre.
Le bouton reste-t-il visible sur mobile ?
L’option mobile est indépendante : vous pouvez conserver le bouton sur les petits écrans ou le masquer selon votre thème.
Peut-on modifier le moment où il apparaît ?
Oui. Le seuil d’apparition est ajustable de 0 à 2 000 pixels de défilement.
Faut-il modifier le thème PrestaShop ?
Non pour l’installation standard. Le module charge ses ressources et ajoute son bouton sur la boutique sans modifier les fichiers du thème. Un contrôle visuel demeure conseillé si votre thème comporte déjà des boutons flottants.
Autres ressources PrestaShop sur Concepty
Vous pouvez également consulter le guide développer un module PrestaShop sur mesure, découvrir notre module de boutique privée PrestaShop ou parcourir notre prestation de développement PrestaShop.
Vous souhaitez une évolution ou une modification du module ?
Couleurs ou positions supplémentaires, affichage conditionnel sur certaines pages, nouvelle animation ou adaptation à votre thème : contactez Concepty pour étudier une évolution sur mesure de ce module gratuit.