respuesta rapida
Para añadir imágenes interactivas de producto 360° a Webflow CMS: publique cada giro en Spinnify Studio con el mismo nombre que su SKU de Webflow, añada o confirme un campo SKU en su colección Products, pegue widget.js una sola vez en el <head> de la plantilla de su colección Products con un SKU dinámico del CMS (defer) y publique. Los fotogramas permanecen en la CDN de Spinnify, no en Webflow Assets, así que evita el límite de 4 MB por archivo del CMS y mantiene sanos los Core Web Vitals.
Los equipos de Webflow buscan un visor 360 de producto para Webflow CMS cuando las fotos planas de la galería dejan de responder preguntas reales del comprador: acabado de las costuras, escala, color del hardware, cómo se ve el producto por detrás. La plataforma crea PDP hermosas, pero nunca se diseñó para alojar treinta y seis fotogramas de rotación a resolución completa por SKU dentro del almacenamiento del CMS. Subir una secuencia de fotogramas a Webflow Assets supera el límite de tamaño por archivo, ralentiza las páginas móviles y obliga a repetir el trabajo de inserción para cada producto nuevo.
Spinnify mantiene el trabajo pesado fuera de Webflow: usted captura o sube una rotación en Studio, la vincula a su catálogo por SKU, URL o Schema.org AUTO, y conecta un snippet de plantilla en Designer. El comprador toca 3D View; el visor carga al interactuar para que el LCP se mantenga intacto. En esta guía explicamos por qué el formato funciona en tiendas Webflow, cómo se compara Spinnify con Sirv y con alternativas basadas en iframe para este stack, y los pasos exactos en Designer para una vista 360° dinámica en toda su colección CMS sin plugin de marketplace.
¿Qué es una vista de producto 360 en Webflow?
Una vista 360 de producto en Webflow es un giro interactivo en la plantilla de su producto: el visitante arrastra o desliza y ve una rotación fotografiada, no una imagen principal estática. Técnicamente es un bucle de fotogramas fijos desde una CDN externa. Eso es diferente de un archivo .glb en el CMS, de un truco de opacidad controlado por scroll o de un video en Assets. Webflow CMS limita cada carga a 4 MB, suficiente para una foto de producto pero no para una secuencia completa de rotación con calidad comercial.
Spinnify entrega fotogramas WebP y AVIF optimizados desde su CDN, abre el reproductor en un modal tras el toque y se enlaza con cada elemento del CMS mediante SKU, URL de página o datos estructurados. Una sola plantilla de producto puede servir para cientos de SKUs: solo cambia el campo dinámico en el código personalizado, no el diseño.
Por qué importan las imágenes interactivas de producto en Webflow
El tráfico móvil domina la mayoría de las tiendas Webflow, pero los visitantes desde teléfono suelen convertir peor que en escritorio porque no pueden coger el producto. Un visor 360 responsive les da control: girar, hacer zoom y leer hotspots sobre los detalles que usted etiqueta una sola vez en Studio. Eso cierra parte de la brecha de tangibilidad entre el PDP y el desempaquetado. Las encuestas del sector de NRF suelen situar las devoluciones online cerca del 19%; muchas devoluciones se explican porque el artículo parecía distinto de lo que sugerían las fotos. Más ángulos ayudan sobre todo cuando la galería base era escasa.
Trate los porcentajes de conversión de los proveedores como hipótesis hasta que mida su catálogo. Compare el add-to-cart y los motivos de devolución en los SKU que incorporaron un giro. En los PDP en vivo, el tiempo en página suele subir cuando los compradores pueden inspeccionar por sí mismos la textura y las proporciones, y los tickets de soporte que empiezan con "se veía distinto en el sitio" tienden a caer cuando el giro coincide con lo que usted envía. Alojar los fotogramas fuera de Webflow también protege los Core Web Vitals: el HTML de la página se mantiene ligero mientras el giro carga solo después de mostrar intención.
¿Por qué no alojar los fotogramas 360 dentro de Webflow CMS?
Algunos equipos intentan un giro 360 de producto en Webflow solo con herramientas nativas: un campo Multi-image, treinta y seis capas y una interacción While scrolling in view que cruza la opacidad. Puede verse bien en Designer. En un PDP real suele enviar entre 15 y 30 MB de imágenes fijas sin comprimir, hunde el LCP en móviles y no ofrece zoom, ni hotspots rastreados, ni analítica de visualización. El alojamiento externo existe precisamente porque el CMS es la capa equivocada para una canalización de fotogramas.
- El límite de 4 MB por archivo del CMS bloquea secuencias de fotogramas a resolución completa.
- Decenas de imágenes de galería por SKU multiplican el peso de la página y el mantenimiento en Designer.
- No hay zoom nativo, seguimiento de hotspots ni estadísticas de visualización del escaparate en animaciones de scroll.
- Cada SKU nuevo repite el trabajo de maquetación si no externaliza la entrega.
Spinnify frente a otras herramientas 360 en Webflow
Para añadir una imagen 360 a Webflow sin pelearse con el orden de los scripts, compare cómo aterriza realmente cada opción en una plantilla PDP de Webflow, no solo las listas de funciones en sitios de marketing.
| Spinnify 360° Studio | Sirv | Cloudinary / herramientas iframe | |
|---|---|---|---|
| Configuración en Webflow | Un script o botón personalizado por plantilla; SKU dinámico del CMS | JS personalizado + jerarquía de carpetas; riesgo de orden de carga con jQuery | Widgets API o bloques de inserción pesados; Zapier para sincronizar el CMS |
| Dependencias | JavaScript puro; sin jQuery | A menudo jQuery + imagerotator.js | Variable; bibliotecas cliente grandes son habituales |
| Vinculación con CMS | SKU / URL / Schema.org AUTO | Análisis manual de rutas por SKU | Campos URL + iframe por producto |
| Entrega | Modal diferido; CDN WebP/AVIF | Transformaciones CDN | Transformaciones CDN; el peso del reproductor varía |
| Hotspots | Rastreables en el panel de Studio | Marcado manual de coordenadas | No es un flujo nativo sin código de 360 |
| Velocidad de página | Carga cuando el comprador toca | Posibles stacks de scripts más pesados | Los embeds en el head pueden afectar al LCP |
Sirv es un DAM capaz, pero los integradores de Webflow suelen encontrarse con problemas de sincronización con jQuery cuando imagerotator.js se ejecuta antes de que carguen los scripts del footer. La ruta de arranque de Spinnify evita esa clase de fallo. Para un reparto de funciones más profundo, vea Spinnify vs Sirv.
Cómo añadir imágenes interactivas de producto 360 a Webflow CMS
La ruta más rápida para la mayoría de las tiendas ecommerce en Webflow es vincular por SKU en la plantilla de producto. Preparará los giros en Studio, confirmará un campo SKU en su colección, añadirá un disparador 3D en la galería y pegará un snippet de inserción con un token dinámico del CMS. El tiempo total en Designer para la plantilla suele ser inferior a una hora; cada producto nuevo pasa después a ser solo una subida a Studio.
Paso 1. Publique los giros en Spinnify Studio
Inicie sesión en spinnify.io y cree un producto cuyo nombre coincida con el SKU que almacenará en Webflow CMS (sin distinguir mayúsculas). Suba una secuencia de fotogramas apaisada 4:3, hasta 36 fotogramas para el giro principal, o capture con la app móvil usando el modo fotos desde PC. La carga desde dispositivo comprime a WebP antes del almacenamiento en la nube. Active el producto para que el widget pueda servir los fotogramas. Añada hotspots en el panel si quiere llamadas que sigan la rotación; la colocación es solo en el panel, no en el almacén.
Paso 2. Configure su colección Webflow CMS
En Webflow Designer abra CMS → su colección Products (o Ecommerce Products). Confirme un campo de texto plano para SKU; añada uno si su stack usa solo códigos internos de producto. Rellene el campo para cada artículo que vaya a girar. No suba los fotogramas de rotación al CMS; el campo solo sirve como clave de búsqueda que Spinnify usa en tiempo de ejecución.
Paso 3. Coloque un botón 3D en la plantilla de producto
Abra la página de plantilla Product. Arrastre un bloque Button o Div junto a la galería principal. Diseñe su etiqueta ("Ver en 360°" o un icono de galería). Tiene dos opciones de conexión:
- Control flotante 3D: pegue widget.js una sola vez en el <head> de la plantilla (vea el paso 4). Spinnify renderiza el botón por defecto.
- CTA con marca: añada un botón personalizado con data-spinnify-open, data-spinnify-key y data-spinnify-sku enlazado al campo SKU del CMS, más widget-trigger-boot.js en la misma plantilla (sin widget.js en el head). Use hidden para revelar después de confirmar, o data-spinnify-when=click para mostrar el botón de inmediato.
Para un SKU dinámico en un botón personalizado, abra la configuración del elemento. Los atributos personalizados son opcionales: establezca data-spinnify-sku en un HTML Embed con el token + Add Field de Webflow para la columna SKU.
Paso 4. Pegue widget.js una sola vez en el head de la plantilla
Copie la clave de su widget desde Dashboard → Widget installation. Abra la plantilla de su colección Products → Page settings → Custom code → Inside <head> tag. Pegue el loader una sola vez y enlace data-sku al campo SKU del CMS con el selector + Add Field de Webflow. Cada PDP publicado emitirá su propio SKU en tiempo de ejecución. Mantenga defer para que el script no bloquee el renderizado.
Pegue: script src https://www.spinnify.io/widget.js con data-key YOUR_WIDGET_KEY y data-sku enlazado al campo SKU del CMS (defer). Reemplace la clave y use Webflow + Add Field para el token SKU. Alternativas: data-sku AUTO en el head del sitio o de la plantilla cuando JSON-LD Product incluya sku, o data-sku URL cuando las rutas de página se guarden en Studio (establezca la URL base de la tienda en Widget settings).
Paso 5. Publique y verifique en una URL real
Publique el sitio de Webflow. Abra una URL de producto que tenga tanto un SKU del CMS rellenado como un giro de Studio publicado. Confirme que aparece el control 3D (o que su botón personalizado se revela tras la coincidencia). Toque para abrir el modal, arrastre la rotación y pruebe en ancho móvil. Si nada se abre, revise el nombre del producto en Studio, el conmutador Active y que el token dinámico haya renderizado el SKU esperado en el código fuente HTML publicado.
Cómo enlazar imágenes 360 con una colección Webflow CMS
Enlazar no significa adjuntar archivos a los elementos de la colección. Significa pasar un identificador estable del CMS a Spinnify al cargar la página. La plantilla exporta el SKU a data-sku o data-spinnify-sku, el widget solicita el proyecto coincidente desde la API y la CDN sirve los fotogramas. Añadir una nueva fila del catálogo solo requiere que el campo SKU esté rellenado y que exista un proyecto de Studio con el mismo nombre; el código de la plantilla no cambia.
Si no usa SKUs, el modo URL guarda la ruta del producto en la tarjeta de Studio y establece data-sku="URL" en el script. El modo AUTO lee sku del JSON-LD Product de Schema.org, útil cuando Webflow ecommerce emite datos estructurados automáticamente. Referencia completa de vinculación: guía de integración de Spinnify.
Cómo incrustar imágenes 360° en Webflow (giros no de producto)
El 360° panorámico (recorridos de habitaciones, recorridos arquitectónicos, escenas equirectangulares) es un formato distinto de los giros de producto sobre fondo blanco. Los comerciantes suelen alojar el panorama en un visor especializado (por ejemplo, Momento360), copiar un iframe y colocar un elemento HTML Embed en una página Webflow. Ese flujo funciona para anuncios y páginas editoriales, no para catálogos ecommerce a escala SKU donde necesita vinculación por SKU, carga diferida e impacto en la tasa de devolución en los PDP.
¿Se pueden subir modelos 3D a Webflow CMS?
Webflow no acepta .glb, .gltf, .obj, .fbx ni .usdz como archivos nativos de colección CMS, y el límite de 4 MB de medios sigue aplicando a los tipos permitidos. Los equipos que quieren visores mesh almacenan una URL externa del visor en un campo Link o de texto plano e incrustan el modelo alojado desde Spline, SwiftXR o similares. Esa ruta es más pesada que un giro fotográfico y más lenta en móviles de gama media. Para la mayoría de PDP de catálogo, los giros fotografiados son la opción práctica.
Giro 360 de producto en Webflow sin plugins
Puede aproximar un giro con Webflow Interactions y un campo Multi-image, pero no sustituirá a un visor de ecommerce. Tendrá que pelear con los límites de peso, reconstruir interacciones para cada producto y aun así no tendrá zoom ni analítica de hotspots. Spinnify es un servicio alojado que se conecta con código personalizado una sola vez, no un plugin del marketplace de Webflow: no hay instalación desde una App Store, no hay pegado de iframe por SKU, una sola plantilla para toda la colección.
Errores que cometen los equipos de Webflow
Subir fotogramas de rotación al CMS es el error más común. Parece intuitivo porque las galerías ya viven allí, pero enseguida topa con límites de tamaño y con un LCP lento. El alojamiento externo en CDN existe precisamente para que los diseños en Designer sigan siendo rápidos.
La deriva del SKU entre Studio y CMS es el segundo modo de fallo. Marketing renombra un producto en Webflow mientras Studio sigue usando el código de lanzamiento; el widget falla silenciosamente al emparejar. Trate el campo SKU como el contrato entre equipos y audítelo cuando cambien los títulos.
Cargar scripts pesados en el head sin defer, o apilar rotadores tipo Sirv basados en jQuery antes de las bibliotecas del footer, produce errores de consola difíciles de ver en Preview. El loader de Spinnify, amigable con defer, y el arranque opcional solo al hacer clic evitan pelearse con el orden de scripts por defecto de Webflow.
Primer 360° en vivo en Webflow en unos 30 minutos
Use esta checklist en un SKU héroe antes de procesar el catálogo por lotes:
- 1. Cree y publique un giro en Studio; nombre = SKU de Webflow; Active activado.
- 2. Añada o confirme SKU Plain text en la colección Products; rellene un elemento.
- 3. Pegue widget.js una sola vez en el <head> de la plantilla Products con SKU dinámico del CMS + defer.
- 4. Publique Webflow; abra el PDP en vivo y toque 3D View.
- 5. Pruebe el ancho móvil; confirme el arrastre, el zoom y las etiquetas de hotspots si las usa.
- 6. Repita solo la subida a Studio para el siguiente SKU; la plantilla no cambia.
Conclusión
Un visor 360 de producto para Webflow CMS debe vivir fuera de la plataforma: Spinnify aloja los fotogramas, Webflow pasa el SKU y los compradores obtienen un giro modal con carga diferida. Evita los límites de archivo del CMS, esquiva la fragilidad de los rotadores jQuery y escala una sola plantilla para todo el catálogo. Empiece con un producto, mida el engagement del PDP y las devoluciones, y luego procese los giros por lotes con el mismo flujo de Studio que captura 360 DIY. ¿Necesita una ruta no-code paralela? Compare patrones de incrustación en Tilda Zero Block; la lógica de vinculación es la misma.
