respuesta rapida
360° en Magento 2: publicar en Studio (nombre = SKU, Activo) → pegar widget.js en HTML Head o HTML de Page Builder → data-key + data-sku (AUTO si hay sku JSON-LD). Carga diferida y modal. Vaciar caché. Probar una ficha en vivo, no la vista previa de Admin.
Las galerías de Magento pasan fotos fijas. Quien compra sigue sin poder girar el artículo. Puede añadir una rotación 360° fotografiada sin un módulo del Marketplace de Magento: alojar los fotogramas en Spinnify y pegar un script.
Esta guía es para Magento 2 y Adobe Commerce. Magento 1 está retirado. El mismo fragmento widget.js funciona en la ficha de producto. No instala una extensión Magento extra de Spinnify.
3 pasos de las fotos a la ficha Magento en vivo
El trabajo es el embed: un script en la ficha de producto y luego el enlace al SKU del catálogo.
1. Preparar en Spinnify Studio
Antes de abrir Magento Admin:
- Crear una cuenta en Spinnify Studio.
- Crear un producto y subir una serie de fotos (24–36 fotogramas, 4:3 para fotos de PC).
- Importante: el nombre del producto en Studio debe coincidir con el SKU de Magento (importan espacios y guiones; no importan mayúsculas).
- Dejar el producto Activo. Un producto oculto no muestra el botón.
2. Añadir código en Magento
Dos formas de pegar el mismo fragmento de Studio. Cópielo en Instalación del widget → Mostrar código.
Método A: HTML Head (el más rápido para todo el catálogo). Contenido → Diseño → Configuración → Editar la vista de tienda → HTML Head → Scripts y hojas de estilo. Pegar el script, guardar y vaciar la caché de Magento. Use data-sku="AUTO" si Magento ya imprime JSON-LD Product de Schema.org con sku en la ficha.
Método B: código HTML de Page Builder (un producto o un bloque). En el producto, abra Page Builder, arrastre Elementos → Código HTML, pegue el mismo fragmento y guarde. Use data-sku manual igual al SKU de ese producto si AUTO no está disponible.
3. Configurar el enlace
El código se ve así: <script src="https://www.spinnify.io/widget.js" data-key="YOUR_WIDGET_KEY" data-sku="SKU_FROM_PANEL" defer></script>
- data-key: su clave de widget de Studio. No la cambie.
- data-sku: el SKU de Magento, o AUTO para leer sku del JSON-LD, o URL si guardó la ruta de la página en Studio.
Por qué sigue siendo rápido
Un script de terceros en Magento plantea dudas de PageSpeed porque Full Page Cache y la galería ya compiten por el primer pintado. Spinnify deja el trabajo extra fuera de esa pintura: los fotogramas quedan en el CDN hasta que alguien pide girar. La galería Magento pinta primero; la capa 360 se abre después en un modal.
- Carga diferida: el navegador no pide el conjunto de fotogramas hasta que alguien hace clic.
- Aislamiento: el visor se abre en un modal y no sustituye la galería Magento en el primer pintado.
- CDN: los fotogramas van en WebP/AVIF redimensionado, no como archivos extra en el media de Magento.
Lista: ¿no aparece el botón?
Si falta el botón 3D View, recorra esta lista en una URL de producto en vivo, no en la vista previa de Admin.
- ¿Vació la caché? Los cambios de HTML Head y layout siguen invisibles si no.
- ¿Está en una URL de producto en vivo? La vista previa de Admin es un mal test para scripts de tienda.
- ¿Coinciden los nombres? El nombre en Studio y el SKU de Magento deben coincidir (espacios y guiones incluidos).
- ¿El producto de Studio está Activo?
- ¿Copió data-key de su cuenta?
- Un script por página: no pegue el fragmento dos veces.
- CSP de Magento 2.4.7+: si la consola bloquea www.spinnify.io, permita ese host en csp_whitelist.xml. No apague el CSP.
¿Puedo personalizar el aspecto del botón?
Sí. El lanzador se diseña en Studio, no en el CSS del tema. Puede alinearlo con la tienda sin editar la plantilla del producto:
- Posición: derecha, izquierda o centro.
- Colores y etiqueta acordes al tema Magento.
- Formato: icono flotante redondo o pestaña fina.
Después Magento sigue sirviendo la galería. La capa 360° se abre cuando alguien la pide.
Grabar giros: guía con smartphone. Otras tiendas HTML: Tilda Zero Block. Guía completa de Spinnify.
