Vue Produit 360° (df360spin) — Documentation
Installer, configurer et alimenter la visionneuse produit 360° df360spin : préparation des images spin, réglages globaux, création d'une séquence et bonnes pratiques de prise de vue.
Présentation
Vue Produit 360° (df360spin) ajoute à vos fiches produit une visionneuse interactive qui reconstitue une rotation complète de l’article à partir d’une simple séquence d’images. Le visiteur fait glisser le produit à la souris ou au doigt pour le faire tourner, avec lecture automatique, plein écran, compteur d’images et navigation au clavier. Le module ne remplace aucun template : il s’insère via un hook d’affichage que vous choisissez.
Une vue 360° n’est pas un modèle 3D : c’est une série de photos prises tout autour du produit. La qualité du rendu dépend d’abord de la régularité de votre prise de vue.
Préparer les images
Photographiez le produit sur un plateau tournant en prenant un nombre régulier de vues également espacées, dans le même cadrage et sous le même éclairage. Faites pivoter le plateau d’un angle constant entre chaque prise (par exemple 10° pour 36 images, soit 360° ÷ 36).
Nombre d’images recommandé
- 24 images (15° par pas) : rotation correcte, séquence légère.
- 36 images (10° par pas) : bon compromis fluidité / poids, recommandé dans la plupart des cas.
- 72 images (5° par pas) : rotation très fluide pour les produits à forte valeur, séquence plus lourde.
Le module accepte jusqu’à 120 frames par séquence. En dessous de 24 images, la rotation paraît saccadée.
Nommage et format
Nommez les fichiers dans l’ordre de rotation, avec des numéros à zéros de tête pour garantir le bon tri : frame_01.jpg, frame_02.jpg, … Le module trie automatiquement les images par nom de fichier à l’import. Exportez en JPG, PNG ou WebP à une taille cohérente. Les images plus larges que la largeur maximale configurée sont redimensionnées automatiquement côté serveur.
Un fond neutre et uniforme (blanc ou gris clair) et un éclairage fixe donnent la rotation la plus propre. Verrouillez l’exposition et la balance des blancs de l’appareil pour éviter les variations de luminosité d’une image à l’autre.
Installation
- Dans le back-office, ouvrez Modules > Gestionnaire de modules, cliquez sur Téléverser un module et sélectionnez le fichier ZIP
df360spin. - Une fois installé, cliquez sur Configurer pour régler les options globales.
- Un nouvel onglet Vues 360° Spin apparaît sous Catalogue pour gérer vos séquences.
Réglages globaux
Depuis la page de configuration du module, vous définissez le comportement par défaut de toutes les visionneuses :
- Position d’affichage : sous les miniatures du produit (recommandé), dans le bloc d’informations complémentaires ou en pied de fiche produit.
- Lecture automatique par défaut : lance la rotation continue au chargement. Surchargée séquence par séquence si besoin.
- Vitesse de lecture (ms par image) : durée d’affichage de chaque image en lecture automatique. Plus la valeur est basse, plus la rotation est rapide. À titre indicatif, 60 ms sur 36 images donnent un tour complet en environ 2 secondes.
- Sensibilité du drag : nombre de pixels de glissement nécessaires pour avancer d’une image. Une valeur basse rend la rotation plus réactive.
- Largeur maximale des frames (px) : au-delà de cette largeur, les images importées sont redimensionnées automatiquement.
- Lazy loading : ne charge les images que lorsque la visionneuse entre dans la zone visible de l’écran.
Créer une séquence 360°
- Ouvrez Catalogue > Vues 360° Spin puis cliquez sur Ajouter une séquence 360°.
- Dans le champ Produit, saisissez le nom, la référence ou l’identifiant du produit : une liste de suggestions apparaît, sélectionnez le bon produit.
- Laissez la séquence active et choisissez le mode de lecture automatique (utiliser le réglage global, activé ou désactivé).
- Enregistrez : le panneau de gestion des frames s’affiche.
Un produit ne peut avoir qu’une seule séquence par boutique. En multiboutique, chaque boutique gère sa propre séquence pour un même produit.
Importer et ordonner les frames
- Glissez-déposez vos images dans la zone de dépôt, ou cliquez pour les sélectionner. Vous pouvez en envoyer plusieurs à la fois.
- Les images sont importées par lots avec une barre de progression, puis triées par nom de fichier.
- Réorganisez l’ordre en faisant glisser les vignettes ; le nouvel ordre est enregistré automatiquement.
- Survolez une vignette et cliquez sur la croix rouge pour supprimer une image.
- Cliquez sur Aperçu de la rotation pour rejouer la séquence directement dans le back-office avant publication.
Utilisation côté client
Sur la fiche produit, le visiteur fait glisser le produit pour le faire tourner dans les deux sens, à la souris ou au doigt, avec une inertie en fin de geste. La barre de contrôle propose un bouton lecture / pause, un compteur d’images et un bouton plein écran. Au clavier, les flèches gauche et droite avancent image par image et la barre d’espace lance ou met en pause la rotation. La préférence système de mouvement réduit est respectée : la lecture automatique ne démarre pas si l’utilisateur l’a désactivée dans son système.
Dépannage
La visionneuse ne s’affiche pas
Vérifiez que la séquence est active, qu’elle contient au moins deux images et que la position d’affichage choisie dans les réglages correspond à un hook présent dans votre thème. Le module cible les thèmes basés sur classic.
La rotation est saccadée
Augmentez le nombre d’images de la séquence (visez 36 ou plus) et vérifiez la régularité de l’angle entre chaque prise de vue.
Les images sont lourdes à charger
Laissez le lazy loading activé, réduisez la largeur maximale des frames dans les réglages et privilégiez le format WebP à l’export.
Compatibilité
- PrestaShop 8.0 à 9.x, thème classic et thèmes enfants.
- Multiboutique : une séquence par produit et par boutique.
- Écran tactile et souris, plein écran navigateur.
- Vanilla JS sans jQuery, aucun override de template.