Réponse rapide
360° sur le catalogue 1C-Bitrix (pas Bitrix24) : publier dans Studio (nom = référence, Actif) → coller widget.js dans une zone d’inclusion (bitrix:main.include) ou catalog.element → data-key + data-sku (AUTO si sku JSON-LD). Chargement différé et modal. Tester une URL produit en ligne. Si le cache composite est actif, tester avec ; ne pas l’éteindre comme correctif par défaut.
Les galeries Bitrix 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 Bitrix : héberger les vues dans Spinnify et coller un script.
Ce guide concerne les fiches catalogue 1C-Bitrix CMS (catalog.element). Bitrix24 est un autre produit (CRM) et n’est pas cette pile. Le même extrait widget.js fonctionne sur la fiche produit. Vous n’installez pas de module Marketplace Bitrix fourni par Spinnify.
3 étapes des photos à la fiche Bitrix en ligne
Le travail, c’est l’intégration : un script sur la fiche produit, puis une correspondance avec la référence catalogue.
1. Préparer dans Spinnify Studio
Avant d’ouvrir l’admin Bitrix :
- 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 la référence catalogue (espaces et tirets comptent, la casse non).
- Laisser le produit Actif. Un produit masqué n’affiche pas le bouton.
2. Ajouter le code sur Bitrix
Deux façons de coller le même extrait Studio. Copiez-le depuis Installation du widget → Afficher le code.
Méthode A : zone d’inclusion (le plus rapide pour tout le catalogue). Sur le modèle de fiche (catalog.element), ajouter un composant bitrix:main.include. Le pointer vers un fichier d’inclusion (par exemple dans /include/) qui contient le script, enregistrer. Utiliser data-sku="AUTO" si la fiche affiche déjà du JSON-LD Product Schema.org avec sku.
Méthode B : catalog.element template.php (un collage dans le modèle de fiche). Ouvrir le modèle de fiche produit, coller le même extrait, enregistrer. Utiliser un data-sku manuel égal à la référence de ce produit si AUTO n’est pas disponible. Ne pas coller dans catalog.section : le script se chargerait sur les listes.
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 : la référence catalogue, ou AUTO pour lire sku dans le JSON-LD, ou URL si vous avez enregistré le chemin de page dans Studio. Pour les offres SKU, lier la référence de l’offre visible.
Pourquoi ça reste rapide
Un script tiers sur 1C-Bitrix soulève des questions de PageSpeed, car le cache composite et catalog.element tiennent 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 Bitrix 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 replace pas la galerie Bitrix au premier affichage.
- CDN : les vues sont en WebP/AVIF redimensionné, pas de fichiers en plus dans le stockage Bitrix.
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.
- URL produit en ligne ? L’aperçu de l’éditeur visuel est un mauvais test pour les scripts vitrine.
- Site composite : tester la page publiée avec le composite actif. Si le bouton manque, placer le script hors d’une zone dynamique ou retester avec ?ncc=1, puis corriger l’emplacement. Ne pas éteindre le composite sur tout le site comme correctif par défaut.
- Noms identiques ? Le nom Studio et la référence catalogue 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. Pas dans les listes catalog.section.
- Offres SKU : lier la référence de l’offre visible, ou le mode URL si chaque offre a son propre chemin.
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 Bitrix.
- Format : icône flottante ronde ou onglet fin.
Ensuite Bitrix sert toujours la galerie. La couche 360° s’ouvre quand quelqu’un la demande.
Tourner les vues : créer une vue 360. Autres boutiques HTML : Tilda Zero Block. spins 360 WooCommerce.
