Lookbook Shoppable — Compra el Look
Instalar y usar el lookbook shoppable: crear un look, colocar hotspots, configurar los carruseles 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 configuración de la visualización y el comportamiento en la tienda.
Compatibilidad
- PrestaShop 8.0 a 8.2
- PrestaShop 9.0
- Una sola tienda y multitienda
- Multiidioma (FR / EN / ES / DE / IT)
- 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: prioriza un visual de al menos 1200 px de ancho, en formato JPG, PNG o WEBP. 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). El punto queda colocado y numerado.
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. Gestionar la lista de puntos
Debajo de la imagen, cada hotspot aparece en una lista con su número, el producto asociado 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.
4. Guardar
Ajusta la posición (orden de visualización del look) y el estado Activado, y luego haz clic en Guardar. El look está listo.
Configurar la visualización
Desde la página de configuración del módulo (Gestor de módulos > Configurar), controlas ambas ubicaciones de forma independiente:
- Carrusel en la página de inicio: actívalo y define el número máximo de looks mostrados.
- Looks en la ficha de producto: actívalo y define el número máximo de looks mostrados. Solo se muestran en el bloque «Completa el look» los looks que contienen el producto consultado.
En la tienda
El carrusel
En la página de inicio, 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 modal «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. Cada producto muestra su precio con el formato de la moneda y el idioma activos; 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 por defecto de cada producto;
- 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 pudieron añadirse (rotura de stock), un mensaje lo indica.
Multiidioma
El título y la descripción de cada look son traducibles idioma por idioma directamente desde la ficha del look. Los textos de interfaz en la tienda (botones, notificaciones) siguen el idioma activo de la tienda.
Resolución de problemas
El carrusel no aparece en la página de inicio. Comprueba que al menos un look esté activado, que la opción de visualización en la página de inicio esté marcada y que tu tema active correctamente el hook de visualización de la página de inicio.
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.
Un producto no se añade con «Comprar el look». Es el comportamiento esperado cuando está sin stock sin reposición permitida, desactivado o no disponible para la venta.
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 exportar o hacer una copia de seguridad de tus visuales antes si deseas conservarlos.