Galerie Produit PrestaShop — Guide complet
Installer et configurer la galerie produit : zoom HD, plein écran mobile, filtrage par déclinaison et optimisations LCP.
Présentation
Galerie Produit PrestaShop (dossier module dfgallerypro) remplace la galerie d’images native de la fiche produit par une galerie moderne : zoom interne haute résolution au survol, vignettes verticales ou horizontales, visionneuse plein écran avec pincement sur mobile, filtrage des images par déclinaison sélectionnée et stratégie de chargement optimisée pour le Largest Contentful Paint.
Le module ne remplace aucun template : la galerie est montée en JavaScript à la place du bloc d’images natif, qui est masqué. Il n’utilise aucune table SQL, aucun override, et son JavaScript est écrit en natif, sans jQuery.
Installation
Prérequis
- PrestaShop 8.0 à 9.x
- PHP 7.4 ou supérieur
- Un thème basé sur le thème classic (ou exposant les conteneurs d’images standards de la fiche produit)
Installer le module
- Dans le back office, ouvrez Modules → Gestionnaire de modules.
- Cliquez sur Installer un module et sélectionnez l’archive
dfgallerypro.zip. - Une fois l’installation terminée, cliquez sur Configurer.
L’installation n’ajoute aucune table en base de données : seules des clés de configuration standards sont créées. La désinstallation les supprime intégralement.
Configuration
Tous les réglages se trouvent sur l’écran de configuration du module. Les modifications sont prises en compte immédiatement côté boutique, sans vider le cache.
Position des vignettes
- Gauche (vertical) — colonne de vignettes à gauche de l’image principale. C’est le réglage par défaut.
- Droite (vertical) — colonne à droite de l’image principale.
- Bas (horizontal) — bandeau horizontal sous l’image principale.
Sur mobile (moins de 768 px), les vignettes passent toujours en bandeau horizontal défilant sous l’image principale, quel que soit le réglage choisi.
Mode de zoom et niveau de zoom
- Survol (zoom interne) — le zoom suit le curseur à l’intérieur de l’image. Actif uniquement sur les appareils avec pointeur précis (ordinateurs), détectés automatiquement.
- Clic (ouvre le plein écran) — pas de zoom au survol ; un clic ouvre la visionneuse plein écran.
- Désactivé — aucune interaction de zoom sur la scène.
Le niveau de zoom définit le facteur de grossissement du zoom au survol, entre 1,5 et 4. La valeur recommandée se situe entre 2 et 3.
Au premier survol, le module précharge en arrière-plan l’image source originale que vous avez téléversée (sans redimensionnement) puis l’utilise pour le zoom. Plus vos images sources sont grandes, plus le zoom est net.
Visionneuse plein écran et pincement
Quand la visionneuse plein écran est activée, un clic sur l’image principale (ou sur le bouton d’agrandissement en bas à droite) ouvre une visionneuse immersive sur fond sombre : compteur d’images, flèches, fermeture par la touche Échap ou par un clic sur le fond.
L’option Zoom par pincement sur mobile active dans cette visionneuse le pincement à deux doigts (jusqu’à ×4), le double appui pour zoomer et dézoomer, et le déplacement de l’image zoomée au doigt. Sur ordinateur, la molette de la souris permet de zoomer.
Filtrage des images par déclinaison
- Strict — seules les images associées à la déclinaison sélectionnée sont affichées.
- Intelligent (recommandé) — les images de la déclinaison sont affichées en premier, suivies des autres images du produit.
- Désactivé — toutes les images sont toujours affichées.
Dans tous les modes, si la déclinaison sélectionnée n’a aucune image associée, la galerie complète est affichée en repli. La galerie se resynchronise automatiquement à chaque changement de variante, y compris après le rafraîchissement AJAX du bloc d’images par le cœur de PrestaShop.
Lazy loading et préchargement LCP
- Lazy loading — seule la première image est chargée immédiatement ; les vignettes au-delà de la quatrième et les images suivantes sont chargées en différé. Les images voisines sont préchargées à chaque navigation pour des transitions instantanées.
- Précharger l’image de couverture (LCP) — ajoute dans l’en-tête de la page une balise de préchargement avec priorité haute pour l’image de couverture, ce qui améliore le Largest Contentful Paint de la fiche produit.
- Afficher les flèches de navigation — affiche des flèches précédent / suivant sur l’image principale (visibles au survol sur ordinateur, toujours visibles sur mobile).
Associer des images aux déclinaisons
Le filtrage par déclinaison s’appuie sur les associations natives de PrestaShop, sans configuration supplémentaire dans le module :
- Ouvrez la fiche produit dans le back office, onglet Déclinaisons.
- Ouvrez chaque déclinaison et cochez les images qui lui correspondent dans la section Images.
- Enregistrez : la galerie utilisera ces associations immédiatement côté boutique.
Bonnes pratiques : associez à chaque déclinaison ses photos spécifiques (couleur, finition) et laissez les photos génériques (packshots d’ambiance, tableaux de dimensions) sans association. En mode intelligent, elles resteront visibles après les photos de la déclinaison.
Fonctionnement côté boutique
Sur ordinateur
- Survol de l’image : zoom interne suivant le curseur (si le mode survol est actif).
- Clic sur l’image ou sur le bouton d’agrandissement : ouverture de la visionneuse plein écran.
- Flèches du clavier pour naviguer, Échap pour fermer, molette pour zoomer dans la visionneuse.
Sur mobile
- Balayage horizontal sur l’image principale pour passer d’une image à l’autre.
- Appui sur l’image : ouverture du plein écran.
- Dans le plein écran : pincement à deux doigts, double appui, balayage pour naviguer, compteur de position.
Performance et LCP
Le module est conçu pour améliorer les Core Web Vitals de la fiche produit plutôt que de les dégrader :
- L’image de couverture est annoncée en préchargement avec priorité haute dès l’en-tête de la page (option activable).
- La première image de scène est chargée avec l’attribut de priorité haute et un décodage asynchrone.
- Les vignettes utilisent le lazy loading natif du navigateur ; l’image originale destinée au zoom n’est chargée qu’au premier survol.
- Le JavaScript est chargé en bas de page, sans dépendance externe.
Compatibilité thèmes et dépannage
Le module cible les conteneurs d’images standards des thèmes basés sur classic. Si votre thème utilise une structure entièrement différente, la galerie native reste affichée telle quelle, sans erreur.
- La galerie ne s’affiche pas — vérifiez que votre thème expose bien un conteneur d’images standard sur la fiche produit. Contactez notre support avec l’URL d’une fiche produit : l’adaptation à un thème spécifique est généralement rapide.
- Le zoom paraît flou — la netteté du zoom dépend de la résolution des images sources téléversées. Téléversez des images d’au moins 1500 px de large pour un résultat optimal.
- Le filtrage ne réagit pas au changement de déclinaison — vérifiez que les images sont bien associées aux déclinaisons dans l’onglet Déclinaisons de la fiche produit, et que le mode de filtrage n’est pas sur Désactivé.
- Aperçu rapide — la fenêtre d’aperçu rapide conserve volontairement la galerie native pour éviter toute interférence avec le JavaScript du cœur.
Désinstallation
La désinstallation depuis le gestionnaire de modules supprime toutes les clés de configuration du module. Aucune donnée résiduelle ne subsiste : le module n’a créé ni table, ni override, ni fichier en dehors de son propre dossier.
Changelog
- 1.0.0 (16/07/2026) — Version initiale : zoom HD au survol basé sur l’image originale, visionneuse plein écran avec pincement, filtrage des images par déclinaison (strict / intelligent), préchargement LCP, lazy loading, vignettes verticales ou horizontales, traductions FR, EN, ES, DE, IT.