# Vista de Producto 360° (df360spin) — Documentación > Presentación Vista de Producto 360° (df360spin) añade a tus fichas de producto un visor interactivo que reconstruye una rotación completa del artículo a partir de una simple secuencia de imágenes.… - Página: - Idioma: es - Actualizado el: 2026-07-16 - Otros idiomas: [fr](https://www.datafirefly.com/documentation/df360spin/index.md), [en](https://www.datafirefly.com/en/documentation/df360spin/index.md), [de](https://www.datafirefly.com/de/documentation/df360spin/index.md), [it](https://www.datafirefly.com/it/documentation/df360spin/index.md), [pl](https://www.datafirefly.com/pl/documentation/df360spin/index.md), [pt](https://www.datafirefly.com/pt/documentation/df360spin/index.md), [nl](https://www.datafirefly.com/nl/documentation/df360spin/index.md) - Índice: ## Presentación Vista de Producto 360° (df360spin) añade a tus fichas de producto un visor interactivo que reconstruye una rotación completa del artículo a partir de una simple secuencia de imágenes. El visitante arrastra el producto con el ratón o el dedo para girarlo, con reproducción automática, pantalla completa, contador de imágenes y navegación con teclado. El módulo no sobrescribe ninguna plantilla: se inserta mediante un hook de visualización que tú eliges. Una vista 360° no es un modelo 3D: es una serie de fotos tomadas alrededor del producto. La calidad del resultado depende ante todo de la regularidad de tu sesión de fotos. ## Preparar las imágenes Fotografía el producto en un plato giratorio tomando un número regular de vistas igualmente espaciadas, con el mismo encuadre e iluminación. Gira el plato un ángulo constante entre cada toma (por ejemplo 10° para 36 imágenes, es decir 360° ÷ 36). ### Número de imágenes recomendado - **24 imágenes** (15° por paso): rotación correcta, secuencia ligera. - **36 imágenes** (10° por paso): buen equilibrio entre fluidez y peso, recomendado en la mayoría de los casos. - **72 imágenes** (5° por paso): rotación muy fluida para productos de alto valor, secuencia más pesada. El módulo acepta hasta 120 fotogramas por secuencia. Por debajo de 24 imágenes, la rotación parece entrecortada. ### Nombre y formato Nombra los archivos en orden de rotación, con ceros a la izquierda para garantizar el orden correcto: `frame_01.jpg`, `frame_02.jpg`, … El módulo ordena automáticamente las imágenes por nombre de archivo al importar. Exporta en JPG, PNG o WebP a un tamaño coherente. Las imágenes más anchas que la anchura máxima configurada se redimensionan automáticamente en el servidor. Un fondo neutro y uniforme (blanco o gris claro) y una iluminación fija dan la rotación más limpia. Bloquea la exposición y el balance de blancos de la cámara para evitar variaciones de brillo de una imagen a otra. ## Instalación 1. En el back office, abre **Módulos > Gestor de módulos**, haz clic en **Subir un módulo** y selecciona el archivo ZIP `df360spin`. 2. Una vez instalado, haz clic en **Configurar** para ajustar las opciones globales. 3. Aparece una nueva pestaña **Vistas 360° Spin** en **Catálogo** para gestionar tus secuencias. ## Ajustes globales Desde la página de configuración del módulo, defines el comportamiento por defecto de todos los visores: - **Posición de visualización**: debajo de las miniaturas del producto (recomendado), en el bloque de información adicional o en el pie de la ficha de producto. - **Reproducción automática por defecto**: inicia la rotación continua al cargar. Puede sobrescribirse secuencia por secuencia. - **Velocidad de reproducción (ms por imagen)**: tiempo que se muestra cada imagen en reproducción automática. Cuanto menor es el valor, más rápida es la rotación. A modo orientativo, 60 ms sobre 36 imágenes dan una vuelta completa en unos 2 segundos. - **Sensibilidad de arrastre**: número de píxeles de arrastre necesarios para avanzar un fotograma. Un valor bajo hace la rotación más reactiva. - **Anchura máxima de los fotogramas (px)**: más allá de esta anchura, las imágenes importadas se redimensionan automáticamente. - **Lazy loading**: carga las imágenes solo cuando el visor entra en la zona visible de la pantalla. ## Crear una secuencia 360° 1. Abre **Catálogo > Vistas 360° Spin** y luego haz clic en **Añadir una secuencia 360°**. 2. En el campo **Producto**, escribe el nombre, la referencia o el identificador del producto: aparece una lista de sugerencias, selecciona el producto correcto. 3. Deja la secuencia **activa** y elige el modo de reproducción automática (usar el ajuste global, activado o desactivado). 4. Guarda: aparece el panel de gestión de fotogramas. Un producto solo puede tener una secuencia por tienda. En multitienda, cada tienda gestiona su propia secuencia para el mismo producto. ## Importar y ordenar los fotogramas 1. Arrastra y suelta tus imágenes en la zona de depósito, o haz clic para seleccionarlas. Puedes enviar varias a la vez. 2. Las imágenes se suben por lotes con una barra de progreso y luego se ordenan por nombre de archivo. 3. Reordénalas arrastrando las miniaturas; el nuevo orden se guarda automáticamente. 4. Pasa el ratón sobre una miniatura y haz clic en la cruz roja para eliminar una imagen. 5. Haz clic en **Vista previa de la rotación** para reproducir la secuencia directamente en el back office antes de publicar. ## Experiencia del cliente En la ficha de producto, el visitante arrastra el producto para girarlo en ambos sentidos, con el ratón o el dedo, con una inercia al final del gesto. La barra de control ofrece un botón de reproducción / pausa, un contador de imágenes y un botón de pantalla completa. Con el teclado, las flechas izquierda y derecha avanzan fotograma a fotograma y la barra espaciadora inicia o pausa la rotación. Se respeta la preferencia del sistema de movimiento reducido: la reproducción automática no se inicia si el usuario la ha desactivado en su sistema. ## Resolución de problemas ### El visor no aparece Comprueba que la secuencia está activa, que contiene al menos dos imágenes y que la posición de visualización elegida en los ajustes corresponde a un hook presente en tu tema. El módulo apunta a los temas basados en classic. ### La rotación es entrecortada Aumenta el número de imágenes de la secuencia (apunta a 36 o más) y comprueba la regularidad del ángulo entre cada toma. ### Las imágenes tardan en cargar Deja el lazy loading activado, reduce la anchura máxima de los fotogramas en los ajustes y prioriza el formato WebP al exportar. ## Compatibilidad - PrestaShop 8.0 a 9.x, tema classic y temas hijos. - Multitienda: una secuencia por producto y por tienda. - Pantalla táctil y ratón, pantalla completa del navegador. - Vanilla JS sin jQuery, sin override de plantilla.