Réponse rapide
Pour ajouter des images de produits interactives à 360° à Webflow CMS : publiez chaque tour dans Spinnify Studio sous le même nom que votre Webflow SKU, ajoutez ou confirmez un champ SKU dans votre collection de produits, collez widget.js une fois dans le <head> de votre modèle de collection de produits avec un CMS SKU dynamique (différé), et publiez. Les cadres restent sur Spinnify CDN, pas dans Webflow Assets, vous évitez donc la limite de CMS de 4 Mo par fichier et gardez Core Web Vitals sain.
Les équipes Webflow recherchent une visionneuse de produits Webflow cms 360 lorsque les photos de la galerie plate ne répondent plus aux vraies questions des acheteurs : finition des coutures, échelle, couleur du matériel, aspect du produit vu de l'arrière. La plate-forme crée de magnifiques PDP, mais elle n'a jamais été conçue pour héberger trente-six images de rotation pleine résolution par SKU dans le stockage CMS. Le téléchargement d'une séquence d'images dans Webflow Assets dépasse la taille maximale par fichier, ralentit les pages mobiles et vous oblige à répéter le travail d'intégration pour chaque nouveau produit.
Spinnify évite le travail fastidieux sur Webflow : vous filmez ou téléchargez une rotation dans Studio, la faites correspondre à votre catalogue par SKU, URL ou Schema.org AUTO, et câblez un extrait de modèle dans Designer. Les acheteurs appuient sur 3D Afficher ; le spectateur se charge d'interaction afin que LCP reste intact. Dans ce guide, nous expliquons pourquoi le format est rentable sur les vitrines Webflow, comment Spinnify se compare aux alternatives lourdes Sirv et iframe pour cette pile, et les étapes exactes du concepteur pour une vue dynamique à 360° de votre collection CMS sans plugin de marché.
Qu'est-ce qu'une vue produit Webflow 360 ?
Une vue de produit Webflow 360 est une version interactive de votre modèle de produit : le visiteur glisse ou glisse et voit une rotation photographiée, pas une image de héros statique. Techniquement, il s'agit d'une boucle d'images fixes provenant d'un CDN externe. C'est différent d'un fichier .glb dans CMS, d'une astuce d'opacité pilotée par défilement ou d'une vidéo dans Assets. Webflow CMS limite chaque téléchargement à 4 Mo, ce qui est suffisant pour une photo de produit, mais pas pour une série de rotation complète en qualité commerciale.
Spinnify fournit des images WebP et AVIF optimisées à partir de son CDN, ouvre le lecteur dans un modal après avoir appuyé sur et se lie à chaque élément CMS via SKU, l'URL de la page ou des données structurées. Un modèle de produit peut servir des centaines de SKU : vous modifiez uniquement le champ dynamique dans le code personnalisé, pas la mise en page.
Pourquoi les images de produits interactives sont importantes sur Webflow
Le trafic mobile domine la plupart des magasins Webflow, mais les visiteurs par téléphone convertissent souvent à un taux inférieur à celui des ordinateurs, car ils ne peuvent pas récupérer le produit. Une visionneuse 360 réactive leur donne le contrôle : faire tourner, zoomer, lirepoints chaudssur les détails que vous étiquetez une fois dans Studio. Cela ferme une partie duécart de tangibilitéentre le PDP et le déballage. Les enquêtes sectorielles de la NRF citent souvent des taux de retour en ligne proches de 19 % ; de nombreux retours remontent à l'article qui semble différent des photos suggérées. Des angles plus riches sont plus utiles lorsque votre galerie de base est mince.
Considérez les pourcentages de conversion des fournisseurs comme des hypothèses jusqu'à ce que vous mesuriez votre catalogue. Comparez les raisons d'ajout au panier et de retour sur les SKU qui ont gagné un tour. Sur les PDP en direct, le temps passé sur la page augmente souvent lorsque les acheteurs peuvent inspecter eux-mêmes la texture et les proportions, et les tickets d'assistance qui commencent par « c'était différent sur le site » ont tendance à diminuer lorsque la rotation correspond à ce que vous expédiez. L'hébergement de cadres en dehors de Webflow protège également Core Web Vitals : le code HTML de la page produit reste léger tandis que le spin ne se charge qu'après intention.
Pourquoi ne pas héberger 360 images dans Webflow CMS ?
Les équipes essaient parfois un flux Web de rotation de produit à 360 ° sans code, construit uniquement avec des outils natifs : un champ multi-images, trente-six couches et une interaction lors du défilement dans la vue qui crée un fondu enchaîné de l'opacité. Il peut bien faire une démonstration dans le Designer. Sur un PDP en direct, il expédie souvent 15 à 30 Mo d'images fixes non compressées, réservoirs LCP sur mobile et n'offre aucun zoom, aucun point d'accès suivi et aucune analyse de vue. L'hébergement externe existe car le stockage CMS n'est pas la bonne couche pour un pipeline de trames.
- La limite de 4 Mo par fichier CMS bloque les séquences d'images en pleine résolution.
- Des dizaines d'images de galerie par SKU multiplient le poids de la page et la maintenance du Designer.
- Pas de zoom natif, de suivi des points chauds ou de statistiques d'affichage de la vitrine sur les animations de défilement.
- Chaque nouveau SKU répète le travail de mise en page, sauf si vous externalisez la livraison.
Spinnify par rapport à d'autres outils 360 sur Webflow
Pour ajouter une image 360 au flux Web sans combattre l'ordre des scripts, comparez la façon dont chaque option atterrit réellement dans un modèle Webflow PDP, et pas seulement dans les listes de fonctionnalités sur les sites marketing.
| Spinnify 360° Studio | Sirv | Outils Cloudinary / iframe | |
|---|---|---|---|
| Configuration de Webflow | Un script ou un bouton personnalisé par modèle ; dynamique CMS SKU | Hiérarchie de dossiers JS + personnalisée ; risque d'ordre de chargement jQuery | Widgets API ou blocs d'intégration lourds ; Zapier pour la synchronisation CMS |
| Dépendances | Vanille JS ; pas de jQuery | Souvent jQuery + imagerotator.js | Varie ; grandes bibliothèques client communes |
| Liaison CMS | SKU / URL / Schema.org AUTO | Analyse manuelle du chemin par SKU | Champs URL + iframe par produit |
| Livraison | Modal paresseux ; WebP/__PH_1__ CDN | CDN se transforme | CDN se transforme ; le poids du joueur varie |
| Points chauds | Suivi du CV dans le tableau de bord du Studio | Marquage manuel des coordonnées | Il ne s'agit pas d'un workflow 360 sans code de base |
| Vitesse des pages | Charges sur le robinet de l'acheteur | Piles de scripts plus lourdes possibles | Les intégrations d'en-tête peuvent affecter LCP |
Sirv est un DAM performant, mais les intégrateurs Webflow rencontrent souvent des problèmes de timing jQuery lorsque imagerotator.js s'exécute avant le chargement des scripts de pied de page. Le chemin de démarrage de Spinnify évite cette classe d'échec. Pour une répartition plus approfondie des fonctionnalités, voirSpinnify contre Sirv.
Comment ajouter des images de produits interactifs 360 à Webflow CMS
Le chemin le plus rapide pour la plupart des sites de commerce électronique Webflow est la liaison SKU sur le modèle de produit. Vous préparerez des tours dans Studio, confirmerez un champ SKU dans votre collection, ajouterez un déclencheur 3D dans la galerie et collerez un extrait d'intégration avec un jeton CMS dynamique. Le temps total du concepteur pour le modèle est généralement inférieur à une heure ; chaque nouveau produit est alors uniquement téléchargé dans Studio.
Étape 1. Publier les tours dans Spinnify Studio
Connectez-vous à spinnify.io et créez un produit dont le nom correspond au SKU que vous stockerez dans Webflow CMS (insensible à la casse). Téléchargez une série d'images paysage 4:3, jusqu'à 36 images pour la rotation principale, ou capturez avec l'application mobile en utilisant le mode photos PC. Le téléchargement de l'appareil est compressé sur WebP avant le stockage dans le cloud. Basculez le produit Actif pour que le widget puisse servir des images. Ajoutez des points chauds dans le tableau de bord si vous souhaitez des légendes qui suivent la rotation ; le placement s'effectue uniquement sur le tableau de bord, et non sur le sol de l'entrepôt.
Étape 2. Configurez votre collection Webflow CMS
Dans Webflow Designer, ouvrez CMS → votre collection de produits (ou produits de commerce électronique). Confirmez un champ de texte brut pour SKU ; ajoutez-en un si votre pile utilise uniquement des codes de produit internes. Remplissez le champ pour chaque élément que vous ferez tourner. Vous ne téléchargez pas d'images de rotation dans CMS ; le champ sert uniquement de clé de recherche que Spinnify utilise au moment de l'exécution.
Étape 3. Placez un bouton 3D sur le modèle de produit
Ouvrez la page Modèle de produit. Déposez un bloc Button ou Div à côté de la galerie principale. Stylisez votre étiquette ("Vue à 360°" ou icône de galerie). Vous disposez de deux options de câblage :
- Contrôle 3D flottant : collez widget.js une fois dans le modèle <head> (voir étape 4). Spinnify affiche le bouton par défaut.
- CTA de marque : ajoutez un bouton personnalisé avec data-spinnify-open, data-spinnify-key et data-spinnify-sku liés au champ CMS SKU, plus widget-trigger-boot.js sur le même modèle (pas de widget.js dans l'en-tête). Utilisez masqué pour révéler après confirmation ou data-spinnify-when=click pour afficher le bouton immédiatement.
Pour un SKU dynamique sur un bouton personnalisé, ouvrez les paramètres de l'élément. Les attributs personnalisés sont facultatifs : définissez data-spinnify-sku dans une intégration HTML avec le jeton + Add Field de Webflow pour la colonne SKU.
Étape 4. Collez widget.js une fois dans l'en-tête du modèle
Copiez la clé de votre widget depuis Tableau de bord → Installation du widget. Ouvrez votre modèle de collection de produits → Paramètres de la page → Code personnalisé → Balise intérieure <head>. Collez le chargeur une fois et liez data-sku au champ CMS SKU avec le sélecteur Webflow + Ajouter un champ. Chaque PDP publié génère ensuite son propre SKU au moment de l'exécution. Gardez le report pour que le script ne bloque pas le rendu.
Coller : script src https://www.__PH_0__/__PH_1__ avec la clé de données YOUR_WIDGET_KEY et le data-sku lié au champ CMS SKU (différer). Remplacez la clé et utilisez Webflow + Add Field pour le jeton SKU. Alternatives : data-sku AUTO dans l'en-tête du site ou du modèle lorsque JSON-LD Le produit inclut le sku, ou l'URL data-sku lorsque les chemins de page sont enregistrés dans Studio (définissez l'URL de base du magasin dans les paramètres du widget).
Étape 5. Publier et vérifier sur une URL en direct
Publiez le site Webflow. Ouvrez une URL de produit contenant à la fois un CMS SKU rempli et une version Studio publiée. Confirmez que le contrôle 3D apparaît (ou que votre bouton personnalisé s'affiche après le match). Appuyez pour ouvrir le modal, faites glisser la rotation et testez sur la largeur mobile. Si rien ne s'ouvre, vérifiez à nouveau le nom du produit Studio, la bascule Active et que le jeton dynamique a rendu le SKU attendu dans la source HTML publiée.
Comment lier des images 360 à une collection Webflow CMS
Créer un lien ne signifie pas joindre des fichiers aux éléments de la collection. Cela signifie transmettre un identifiant stable de CMS à Spinnify au chargement de la page. Le modèle génère le SKU dans data-sku ou data-spinnify-sku, le widget demande le projet correspondant à l'API et le CDN sert des frames. L'ajout d'une nouvelle ligne de catalogue nécessite uniquement que le champ SKU soit renseigné et un projet Studio sous le même nom ; le code du modèle reste intact.
Si vous n'utilisez pas de SKU, le mode URL stocke le chemin du produit sur la carte Studio et définit data-sku="URL" sur le script. Le mode AUTO litskuà partir du produit Schema.org JSON-LD, utile lorsque le commerce électronique Webflow génère automatiquement des données structurées. Référence obligatoire complète :Guide d'intégration de Spinnify.
Comment intégrer des images à 360 degrés dans Webflow (tours hors produit)
Le panoramique 360° (visites de salles, visites architecturales, scènes équirectangulaires) est un format différent des rotations de produits sur blanc. Les commerçants hébergent généralement le panorama sur une visionneuse spécialisée (par exemple Momento360), copient une intégration iframe et placent un élément HTML Embed sur une page Webflow. Ce flux de travail convient aux listes et aux pages éditoriales, et non aux catalogues de commerce électronique à l'échelle SKU où vous avez besoin d'une liaison SKU, d'un chargement différé et d'un impact sur le taux de retour sur les PDP.
Pouvez-vous télécharger des modèles 3D sur Webflow CMS ?
Webflow n'accepte pas les fichiers .glb, .gltf, .obj, .fbx ou .usdz en tant que fichiers de collection CMS natifs, et la limite multimédia de 4 Mo s'applique toujours aux types autorisés. Les équipes qui souhaitent que les visionneuses de maillage stockent une URL de visionneuse externe dans un champ Lien ou Texte brut et iframe le modèle hébergé depuis Spline, SwiftXR ou similaire. Ce chemin est plus lourd qu’une photo et plus lent sur les téléphones de milieu de gamme. Pour la plupart des PDP du catalogue, les rotations photographiées constituent le choix pratique.
Webflow Rotation du produit à 360° sans plugins
Vous pouvez approximer une rotation avec Webflow Interactions et un champ multi-images, mais cela ne remplacera pas une visionneuse de commerce. Vous lutterez contre les limites de poids, reconstruirez les interactions par produit et manquerez toujours d'analyses de zoom et de points chauds. Spinnify est un service hébergé que vous câblez une seule fois avec du code personnalisé, pas un plugin de marché Webflow : pas d'installation sur l'App Store, pas de collage par-SKU iframe, un modèle pour toute la collection.
Erreurs commises par les équipes Webflow
Le téléchargement d’images de rotation dans CMS est le faux pas le plus courant. Cela semble intuitif car les galeries y vivent déjà, mais vous atteignez immédiatement les limites de taille et ralentissez LCP. L'hébergement externe CDN existe précisément pour que les mises en page Designer restent rapides.
La dérive SKU entre Studio et CMS est le deuxième mode de défaillance. Marketing renomme un produit en Webflow alors que Studio utilise toujours le code de lancement ; le widget ne parvient pas à correspondre silencieusement. Traitez le champ SKU comme le contrat entre les équipes et auditez-le lorsque les titres changent.
Le chargement de scripts lourds dans l'en-tête sans délai, ou l'empilement de rotateurs jQuery de style Sirv avant les bibliothèques de pied de page, produit des erreurs de console difficiles à repérer dans l'aperçu. Le chargeur convivial de Spinnify et le démarrage en option en un seul clic évitent de lutter contre l'ordre de script par défaut de Webflow.
Premier live à 360° sur Webflow dans environ 30 minutes
Utilisez cette liste de contrôle sur un héros SKU avant de regrouper le catalogue :
- 1. Créez et publiez un spin dans Studio ; nom = Webflow SKU ; Actif activé.
- 2. Ajoutez ou confirmez SKU Texte brut dans la collection Produits ; remplir un élément.
- 3. Collez widget.js une fois dans le modèle Produits <head> avec la dynamique CMS SKU + différé.
- 4. Publiez Webflow ; ouvrez le PDP en direct et appuyez sur 3D Afficher.
- 5. Testez la largeur du mobile ; confirmez les étiquettes de glisser, de zoom et de point chaud si elles sont utilisées.
- 6. Répétez le téléchargement Studio uniquement pour le SKU suivant ; modèle inchangé.
Conclusion
Une visionneuse de produits Webflow cms 360 appartient hors plate-forme : Spinnify héberge des images, Webflow transmet le SKU, les acheteurs bénéficient d'une rotation modale à chargement paresseux. Vous évitez les limites de fichiers CMS, ignorez la fragilité du rotateur jQuery et mettez à l'échelle un modèle dans le catalogue. Commencez avec un produit, mesurez l'engagement et les retours PDP, puis lancez des lancements par lots en utilisant le même flux de travail Studio que celuiCapture DIY à 360°. Besoin d'un chemin parallèle sans code ? ComparerTilda intégration sans blocmotifs; la logique de liaison est la même.
