Réponse rapide
360° sur Magento 2 : publier dans Studio (nom = SKU, Actif) → coller widget.js dans HTML Head ou HTML Page Builder → data-key + data-sku (AUTO si sku JSON-LD). Chargement différé et modal. Vider le cache. Tester une fiche en ligne, pas l’aperçu Admin.
Les galeries Magento font défiler des photos fixes. L’acheteur ne peut toujours pas tourner l’article. Vous pouvez ajouter une rotation 360° photographiée sans module Marketplace Magento : héberger les vues dans Spinnify et coller un script.
Ce guide concerne Magento 2 et Adobe Commerce. Magento 1 est retiré. Le même extrait widget.js fonctionne sur la fiche produit. Vous n’installez pas d’extension Magento supplémentaire fournie par Spinnify.
3 étapes des photos à la fiche Magento en ligne
Le travail, c’est l’intégration : un script sur la fiche produit, puis une correspondance avec le SKU du catalogue.
1. Préparer dans Spinnify Studio
Avant d’ouvrir l’admin Magento :
- Créer un compte Spinnify Studio.
- Créer un produit et envoyer une série de photos (24–36 vues, 4:3 pour les photos PC).
- Important : le nom du produit dans Studio doit égaler le SKU Magento (espaces et tirets comptent, la casse non).
- Laisser le produit Actif. Un produit masqué n’affiche pas le bouton.
2. Ajouter le code sur Magento
Deux façons de coller le même extrait Studio. Copiez-le depuis Installation du widget → Afficher le code.
Méthode A : HTML Head (le plus rapide pour tout le catalogue). Contenu → Design → Configuration → Modifier la vue magasin → HTML Head → Scripts et feuilles de style. Coller le script, enregistrer, vider le cache Magento. Utiliser data-sku="AUTO" si Magento affiche déjà du JSON-LD Product Schema.org avec sku sur la fiche.
Méthode B : code HTML Page Builder (un produit ou un bloc). Sur le produit, ouvrir Page Builder, glisser Éléments → Code HTML, coller le même extrait, enregistrer. Utiliser un data-sku manuel égal au SKU de ce produit si AUTO n’est pas disponible.
3. Configurer la liaison
Le code ressemble à : <script src="https://www.spinnify.io/widget.js" data-key="YOUR_WIDGET_KEY" data-sku="SKU_FROM_PANEL" defer></script>
- data-key : votre clé widget Studio. Ne la changez pas.
- data-sku : le SKU Magento, ou AUTO pour lire sku dans le JSON-LD, ou URL si vous avez enregistré le chemin de page dans Studio.
Pourquoi ça reste rapide
Un script tiers sur Magento soulève des questions de PageSpeed, car le Full Page Cache et la galerie se disputent déjà le premier affichage. Spinnify garde le travail lourd hors de cette peinture : les vues restent sur le CDN jusqu’au clic. La galerie Magento s’affiche d’abord ; la couche 360 s’ouvre ensuite en modal.
- Chargement différé : le navigateur n’envoie pas la série de vues tant que l’acheteur n’a pas cliqué.
- Isolation : la visionneuse s’ouvre en modal et ne remplace pas la galerie Magento au premier affichage.
- CDN : les vues sont en WebP/AVIF redimensionné, pas de fichiers en plus dans le média Magento.
Liste : le bouton n’apparaît pas ?
Si le bouton 3D View manque, parcourez cette liste sur une URL produit en ligne, pas dans l’aperçu Admin.
- Cache vidé ? Les changements HTML Head et layout restent invisibles sinon.
- URL produit en ligne ? L’aperçu Admin est un mauvais test pour les scripts vitrine.
- Noms identiques ? Le nom Studio et le SKU Magento doivent correspondre (espaces et tirets inclus).
- Le produit Studio est-il Actif ?
- data-key copié depuis votre compte ?
- Un script par page : ne collez pas l’extrait deux fois.
- CSP Magento 2.4.7+ : si la console bloque www.spinnify.io, autorisez cet hôte dans csp_whitelist.xml. N’éteignez pas le CSP.
Puis-je personnaliser l’apparence du bouton ?
Oui. Le bouton se stylise dans Studio, pas dans le CSS du thème. Vous pouvez l’aligner sur la vitrine sans modifier le modèle produit :
- Position : droite, gauche ou centre.
- Couleurs et libellé alignés sur le thème Magento.
- Format : icône flottante ronde ou onglet fin.
Ensuite Magento sert toujours la galerie. La couche 360° s’ouvre quand quelqu’un la demande.
Tourner les vues : guide smartphone. Autres boutiques HTML : Tilda Zero Block. Guide Spinnify complet.
