Lookbook Shoppable — Compra el Look
Instalar y usar el lookbook shoppable: crear un look, colocar hotspots, elegir combinaciones, configurar carrusel o vista desplegada y la compra del look con un clic.
El módulo Lookbook Shoppable — Compra el Look convierte tus fotos de ambiente en escaparates interactivos: colocas puntos cliqueables (hotspots) sobre los productos visibles en una imagen, y tus visitantes pueden descubrir cada artículo y añadir el look completo al carrito con un solo clic. Esta documentación cubre la instalación, la creación de un look, la elección de combinaciones, los modos de visualización y el comportamiento en la tienda.
Compatibilidad
- PrestaShop 8.0 a 8.2
- PrestaShop 9.0
- Una sola tienda y multitienda
- Interfaz traducida a 8 idiomas (EN, FR, DE, ES, IT, PL, PT, NL)
- Temas basados en Classic
Instalación
- Ve a Módulos > Gestor de módulos en tu back-office.
- Haz clic en Subir un módulo y selecciona el archivo
dfshopthelook.zip. - Una vez instalado, aparece una nueva pestaña Shop The Look en el menú Catálogo.
Durante la instalación, el módulo registra automáticamente sus hooks de visualización (página de inicio y ficha de producto) y crea las tablas necesarias para almacenar los looks y sus hotspots.
Crear tu primer look
Abre Catálogo > Shop The Look y luego haz clic en Añadir un nuevo look.
1. Indicar el título y la imagen
Introduce un título (traducible por idioma) y, si lo deseas, una breve descripción. Sube después la imagen del look: JPG, PNG, GIF o WEBP, 8 MB máximo, preferiblemente de al menos 1200 px de ancho. En cuanto seleccionas el archivo, aparece una vista previa inmediata en el editor, incluso antes de guardar.
2. Colocar los hotspots
Haz clic directamente sobre la imagen donde se encuentra un producto: se abre una ventana de búsqueda. Escribe el nombre o la referencia del producto y selecciónalo en la lista (las miniaturas facilitan la identificación).
Puedes reposicionar un punto en cualquier momento arrastrándolo con el ratón. Las coordenadas se guardan en porcentaje, lo que garantiza una colocación fiel sea cual sea el tamaño de visualización de la imagen en la tienda.
3. Elegir la combinación visible en la foto
Si el producto seleccionado tiene combinaciones, aparece un segundo paso: «¿Qué combinación se ve en la foto?». Elige la combinación exacta mostrada en la imagen (por ejemplo «Color: Crudo, Talla: M»), o deja Combinación por defecto si el visual no muestra ninguna variante concreta.
Esa combinación sigue siendo modificable en cualquier momento: cada punto de la lista bajo la imagen dispone de su propia lista desplegable. Así puedes corregir un color o una talla en un look guardado hace tiempo, sin eliminar y volver a colocar el hotspot.
Si una combinación fijada se elimina después del catálogo, el menú vuelve automáticamente a «Combinación por defecto».
4. Gestionar la lista de puntos
Debajo de la imagen, cada hotspot aparece con su número, el producto asociado, su combinación y sus coordenadas. Usa el icono de papelera para eliminar un punto. Puedes colocar tantos hotspots como necesites, e incluso asociar varios puntos al mismo producto.
5. Destacado y guardado
Activa Destacado en la página de inicio si este look debe alimentar el carrusel de la página de inicio. Ajusta la posición (orden de visualización) y el estado Activado, y luego haz clic en Guardar.
En la lista de looks, una columna Destacado permite cambiar ese estado con un solo clic, sin abrir la ficha.
Configurar la visualización
Desde la página de configuración del módulo (Gestor de módulos > Configurar), controlas la página de inicio y la ficha de producto de forma independiente.
Dos modos a elegir
- Carrusel: varios looks presentados uno al lado del otro en forma de tarjetas. Un clic abre una ventana inmersiva.
- Look único desplegado: un solo look integrado directamente en la página, imagen a la izquierda y lista de productos a la derecha, sin ninguna ventana emergente.
Ambas ubicaciones se configuran por separado: puedes por ejemplo mostrar un gran look desplegado en la página de inicio y un carrusel en la ficha de producto.
Página de inicio
En modo carrusel, solo se muestran los looks destacados, hasta el límite que fijes. En modo look único, elige el look que quieras en la lista desplegable Look que se mostrará en la página de inicio, o deja «Primer look destacado».
Si el look seleccionado se elimina o se desactiva después, el módulo pasa automáticamente al primer look destacado, para evitar un bloque vacío en tu página de inicio.
Ficha de producto
En modo carrusel se muestran los looks que contienen el artículo consultado, hasta el límite fijado. En modo look único se muestra desplegado el look más pertinente que contiene ese artículo. No hace falta ninguna selección manual.
Elección de la combinación por el cliente
La opción Permitir que el cliente cambie la combinación muestra un selector junto a cada producto en la tienda. Si se desactiva, se imponen las combinaciones elegidas en el back office. Actívala en moda (el cliente elige su talla) y desactívala en decoración si el look debe quedar fijo.
En la tienda
El carrusel
Un carrusel horizontal presenta tus looks en forma de tarjetas. Cada tarjeta muestra la imagen, una insignia con el número de productos y dos botones al pasar el ratón: Ver el look y Comprar el look.
La ventana «Ver el look»
Un clic en Ver el look (o en la tarjeta) abre una ventana inmersiva: la imagen ampliada con sus puntos pulsantes de un lado y la lista de productos del otro. Pasar el ratón por una fila de producto resalta el punto correspondiente en la imagen, y viceversa.
La visualización desplegada
En modo look único, el mismo contenido se integra directamente en la página, sin ventana emergente. Al hacer clic en un punto se resalta la fila de producto correspondiente. En móvil, las dos columnas se apilan.
Precio y disponibilidad por combinación
Cada producto muestra el precio y la imagen de su combinación, con el formato de la moneda y el idioma activos. Si el selector está activado, cambiar de combinación actualiza el precio y el estado de stock al instante. Los artículos no disponibles se señalan.
«Comprar el look» con un clic
El botón Comprar el look añade al carrito, en una sola acción, todos los productos asociados al visual. El módulo:
- añade la combinación elegida por el cliente, si no la fijada en el back office, y en su defecto la combinación por defecto;
- respeta la cantidad mínima definida en el producto;
- ignora automáticamente los artículos sin stock y sin reposición permitida;
- deduplica los productos colocados en varios puntos.
El carrito de PrestaShop se actualiza de forma nativa y una notificación confirma el añadido. Si algunos productos no se han podido añadir, un mensaje lo indica.
Multiidioma
La interfaz del módulo está traducida a ocho idiomas (EN, FR, DE, ES, IT, PL, PT, NL) y sigue el idioma activo de la tienda. El título y la descripción de cada look se traducen idioma por idioma directamente desde la ficha del look.
Actualización desde una versión anterior
Las actualizaciones son automáticas: sube la nueva versión desde el gestor de módulos y PrestaShop ejecuta los scripts de migración. Tus looks, hotspots e imágenes se conservan.
Tras actualizar a la 1.2.0, todos los looks existentes quedan marcados como destacados y ambas ubicaciones permanecen en modo carrusel: tu tienda se comporta exactamente igual que antes, y activas las novedades cuando quieras.
Resolución de problemas
El carrusel no aparece en la página de inicio. Comprueba que al menos un look esté activo y destacado: desde la 1.2.0, el carrusel de la página de inicio solo muestra los looks destacados. De hecho, aparece un aviso en la configuración si no hay ninguno.
El bloque no aparece en la ficha de producto. El bloque solo se muestra si al menos un look activo contiene el producto consultado y la opción correspondiente está activada.
No aparece el selector de combinación. Solo se muestra si la opción «Permitir que el cliente cambie la combinación» está activada y el producto tiene al menos dos combinaciones.
Un producto no se añade con «Comprar el look». Es el comportamiento esperado cuando está sin stock sin reposición permitida, desactivado, no disponible para la venta o no asociado a la tienda actual.
Falla la subida de la imagen. La carpeta modules/dfshopthelook/views/img/looks/ debe tener permisos de escritura. Si no los tiene, aparece un aviso en la configuración del módulo.
Desinstalación
La desinstalación desde el gestor de módulos elimina las tablas del módulo, los looks, sus hotspots y las imágenes de looks subidas. Recuerda hacer una copia de seguridad de tus visuales antes si deseas conservarlos.