PrestaShop Design & Navigation

Galerie Produit PrestaShop — Zoom HD, Plein Écran & Filtre Variantes

Galerie produit nouvelle génération : zoom HD, vignettes verticales, plein écran mobile avec pincement et filtrage des images par déclinaison.

La galerie produit que PrestaShop aurait dû livrer : zoom haute résolution, plein écran mobile et images filtrées par déclinaison.

En un coup d'œil
  • Zoom interne HD au survol : bascule automatique vers l'image source originale non redimensionnée
  • Visionneuse plein écran mobile : pincement à deux doigts, double appui, balayage, compteur d'images
  • Filtrage des images par déclinaison sélectionnée, mode strict ou intelligent, resynchronisé à chaque changement de variante
  • Chargement optimisé LCP : cover préchargée en priorité haute, vignettes et images voisines en différé
  • PrestaShop 8 & 9, aucun override ni table SQL, vanilla JS sans jQuery
PrestaShop 8 & 9 Zoom HD Pinch mobile Filtre déclinaisons LCP optimisé
  • Remboursement 30 jours
  • 12 mois de mises à jour
  • Support 24h
www.datafirefly.com/
Galerie produit PrestaShop avec zoom HD et affichage plein écran
v1.0.0 · mis à jour 2026-07-16
Ce que ça fait

La version courte.

01

Zoom haute résolution, vraiment

Le zoom au survol suit le curseur avec un facteur configurable de 1,5 à 4. Au premier survol, la galerie précharge silencieusement l'image source originale non redimensionnée et bascule dessus : le zoom reste net même sur des photos très détaillées, là où le zoom natif se contente du format large.

02

Plein écran mobile avec pincement

Visionneuse immersive construite sur les Pointer Events : pincement à deux doigts avec recadrage automatique, double appui pour zoomer, balayage pour naviguer, compteur d'images et fermeture par touche Échap ou clic sur le fond. Molette de zoom sur ordinateur.

03

Images filtrées par déclinaison

La galerie lit les associations natives images / combinaisons de la fiche produit et n'affiche que les images pertinentes : mode strict (uniquement les images de la déclinaison) ou intelligent (images de la déclinaison en premier, puis les autres). Elle se resynchronise à chaque changement de variante, y compris après le rafraîchissement AJAX du coeur.

04

Pensé pour le Largest Contentful Paint

L'image de couverture est annoncée en préchargement avec priorité haute dès la balise head, la première image de scène est chargée en priorité tandis que vignettes et images suivantes sont différées, et les images voisines sont préchargées à chaque navigation. Votre fiche produit gagne en vitesse perçue et mesurée.

La version longue

Tout ce que vous voudriez savoir avant d'installer.

Un regard détaillé sur le fonctionnement de Galerie Produit PrestaShop — Zoom HD, Plein Écran & Filtre Variantes, pourquoi nous l'avons conçu ainsi, et la réflexion derrière les fonctionnalités ci-dessus.

§ 01

Remplacer la galerie native sans toucher au thème

Le module ne remplace aucun template : il injecte les données de la fiche produit au chargement de la page, puis monte la galerie en JavaScript à la place du bloc d'images natif, qu'il masque proprement. Cette approche le rend compatible avec le thème classic et la grande majorité des thèmes qui en dérivent, sans conflit de template ni dette de maintenance à chaque mise à jour de votre thème. L'aperçu rapide conserve volontairement la galerie native pour éviter toute interférence avec le coeur.

§ 02

Un zoom qui exploite enfin vos photos en pleine résolution

Le zoom natif de PrestaShop se limite au format large généré par la boutique, souvent 800 pixels. Ici, le zoom interne suit le curseur avec un facteur réglable, et dès le premier survol la galerie précharge en arrière-plan l'image source originale que vous avez téléversée, puis bascule dessus de façon invisible. Les coutures, textures et détails restent nets même à fort grossissement — un vrai argument pour la mode, la bijouterie, l'ameublement ou la photographie de produit soignée.

§ 03

Le plein écran mobile que vos visiteurs attendent

Sur mobile, la visionneuse plein écran s'ouvre d'un appui : fond sombre, pincement à deux doigts avec limites de déplacement recalculées en continu, double appui pour zoomer et dézoomer, balayage horizontal pour passer d'une image à l'autre et compteur de position. Sur ordinateur, la même visionneuse répond à la molette, aux flèches du clavier et à la touche Échap. L'expérience se rapproche de celle des grandes marketplaces, directement sur votre boutique.

§ 04

Des images cohérentes avec la déclinaison choisie

Quand un client sélectionne la couleur cognac, lui montrer les photos du modèle noir crée du doute et des retours. La galerie lit la table native des associations images / combinaisons et filtre l'affichage en conséquence : en mode strict, seules les images de la déclinaison apparaissent ; en mode intelligent, elles passent en tête et les autres suivent. Si une combinaison n'a aucune image associée, la galerie complète est affichée en repli. La resynchronisation se fait à chaque changement de variante, y compris après le remplacement AJAX du bloc d'images par le coeur de PrestaShop.