Réponse rapide
360° sur OpenCart 3/4 : publier dans Studio (nom = Model, Actif) → coller widget.js dans Design → Theme Editor → product/product.twig → data-key + data-sku Manual (AUTO seulement si sku JSON-LD). Chargement différé et modal. Rafraîchir le cache thème. Tester une fiche en ligne, pas l’aperçu Admin.
Les galeries OpenCart 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 OpenCart : héberger les vues dans Spinnify et coller un script.
Ce guide concerne OpenCart 3 et 4 (Theme Editor Twig). OpenCart 1.5 et 2.x utilisent des fichiers .tpl. Le même extrait widget.js fonctionne sur la fiche produit. Vous n’installez pas d’extension OpenCart supplémentaire fournie par Spinnify.
3 étapes des photos à la fiche OpenCart en ligne
Le travail, c’est l’intégration : un script sur la fiche produit, puis une correspondance avec le Model du catalogue (le champ SKU habituel).
1. Préparer dans Spinnify Studio
Avant d’ouvrir l’admin OpenCart :
- 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 champ Model OpenCart (espaces et tirets comptent, la casse non).
- Laisser le produit Actif. Un produit masqué n’affiche pas le bouton.
2. Ajouter le code sur OpenCart
Deux façons de coller le même extrait Studio. Copiez-le depuis Installation du widget → Afficher le code.
Méthode A : Theme Editor (le mieux pour les fiches). Design → Theme Editor → product/product.twig (OpenCart 4 : catalog/view/template/product/product.twig). Coller le script près de la galerie, enregistrer, rafraîchir le cache thème. Theme Editor enregistre une surcharge en base, pas le fichier sur le disque. Préférer un data-sku Manual égal au Model, ou data-sku="{{ product.model }}" en Twig. Si product.model est vide, écrire le nom Studio en dur.
Méthode B : common/header.twig plus AUTO (seulement si sku JSON-LD existe). Cela charge le script sur chaque page, donc à éviter sauf si le thème affiche déjà du JSON-LD Product Schema.org avec sku. Préférer le modèle produit.
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 Model OpenCart (Manual). AUTO seulement si sku JSON-LD existe, ou URL si vous avez enregistré le chemin de page dans Studio.
Pourquoi ça reste rapide
Un script tiers sur OpenCart soulève des questions de PageSpeed, car le modèle produit charge déjà galerie et JS du thème. Spinnify garde le travail lourd hors du premier affichage : les vues restent sur le CDN jusqu’au clic. La galerie OpenCart 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 OpenCart au premier affichage.
- CDN : les vues sont en WebP/AVIF redimensionné, pas de fichiers en plus dans le stockage images OpenCart.
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 thème rafraîchi ? Engrenage du tableau de bord admin : désactiver ou vider le cache thème. Extensions → Modifications → Refresh si OCMod est en jeu. Journal a son propre cache.
- URL produit en ligne ? L’aperçu Admin est un mauvais test pour les scripts vitrine.
- Theme Editor vs fichier : Theme Editor l’emporte sur FTP. Si vous avez modifié product.twig sur le disque et rien ne change, fermez la surcharge Theme Editor ou videz le cache.
- Noms identiques ? Le nom Studio et le Model OpenCart 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, et ne le mettez pas dans header.twig sauf si vous acceptez AUTO sur chaque page.
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 OpenCart.
- Format : icône flottante ronde ou onglet fin.
Ensuite OpenCart 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.
