Un cliente que mira una foto de un sofá sobre fondo blanco ve un sofá. El mismo sofá en un salón, con la alfombra, la lámpara y los cojines, le muestra un resultado. El Shop the Look convierte esa puesta en escena en un recorrido de compra: cada objeto visible se vuelve clicable.
La mecánica es simple. Su éxito depende de detalles de ejecución que solo se ven una vez en producción.
Dónde funciona
Tres familias se prestan realmente a ello.
La moda y los accesorios, el caso original. El conjunto completo responde a una pregunta que la ficha de producto no trata: con qué combinar esta prenda.
La decoración y el mobiliario. La compra se hace por ambiente, casi nunca por producto aislado. Es el sector donde el ticket medio se mueve más.
El bricolaje y el jardín en situación. Una terraza acondicionada, un taller equipado, un rincón de oficina. El visitante descubre productos complementarios que no habría buscado.
El dispositivo es en cambio inútil en un catálogo técnico donde la compra es unitaria y especificada de antemano: recambios, consumibles, productos profesionales por referencia.
La foto, primera restricción
El resultado depende más de la imagen que del módulo.
Cada producto debe ser identificable. Un objeto medio oculto detrás de otro producirá un punto caliente incomprensible. Compón la escena pensando en las zonas clicables, no solo en la estética.
La resolución debe permitir el zoom, en particular en móvil, donde el visitante amplía para distinguir un detalle antes de pulsar.
El encuadre debe dejar espacio. Un producto pegado al borde de la imagen no puede recibir un punto caliente sin que el globo salga del marco.
Prevé también el formato: una imagen muy ancha funciona mal en móvil, una imagen cuadrada desperdicia espacio en escritorio. Dos versiones de la misma escena es la solución más limpia.
Lookbook Shoppable — Compra el Look e Imágenes con HotspotsEl lookbook shoppable que convierte tus fotos en ventas€79,00
Colocar los puntos calientes
Cuatro reglas salidas del uso real.
- Cinco a siete como máximo por imagen. Más allá, la escena se convierte en una siembra de puntos y el visitante no abre ninguno.
- Un tamaño táctil suficiente. El punto debe seguir siendo alcanzable con el dedo, lo que supone una zona de unos cuarenta píxeles de lado en móvil, sea cual sea el tamaño visual del punto.
- Un punto por producto, sobre la parte más reconocible. En una silla, el asiento antes que una pata.
- Una indicación visual de que se puede pulsar. Un punto estático pasa desapercibido. Una ligera animación al llegar a la imagen, y luego un estado de reposo discreto, resuelve este punto.
El contenido del punto caliente
Lo que se abre al pulsar determina la conversión. Cuatro elementos, no más.
El nombre del producto, su precio, su disponibilidad y una acción. Esa acción debe ser el añadido directo al carrito cuando el producto no tiene variantes, y un enlace a la ficha cuando queda por elegir una talla o un color.
Forzar un paso por la ficha para un producto sin opciones añade una etapa inútil. Proponer un añadido directo en un producto que exige una talla produce pedidos erróneos y devoluciones.
El comportamiento móvil
Aquí es donde fallan la mayoría de las implementaciones. En móvil, el globo que se abre junto al punto caliente cubre la imagen y a menudo sale de la pantalla.
El comportamiento que funciona: al pulsar un punto caliente, una tarjeta de producto aparece en la parte inferior de la pantalla, a todo el ancho, sin tapar la zona tocada. El visitante conserva el contexto visual y puede encadenar con otro punto sin cerrar nada.
Prevé también una visualización de respaldo. Bajo la imagen, una lista clásica de los productos presentes en la escena, siempre visible. Sirve a los visitantes que no entienden la mecánica, y resuelve otros dos problemas.
Accesibilidad y SEO
Ambos se tratan con la misma lista.
Una imagen con puntos calientes superpuestos no es explotable por un lector de pantalla, y los productos no son enlaces indexables si el módulo los carga en JavaScript al pulsar. La lista HTML bajo la imagen, con un enlace a cada ficha, hace la escena accesible y da existencia al enlazado interno.
Añade un texto alternativo descriptivo en la imagen, que describa la escena y no el nombre del archivo.
Dónde colocar los looks
Tres ubicaciones, complementarias.
Una página dedicada que agrupa todas las escenas, estructurada por universo o por temporada. Se comparte bien y se posiciona en consultas de inspiración.
En la cabecera de categoría, una o dos escenas del universo correspondiente. Es la ubicación que mejor convierte, porque el visitante llega ya en fase de búsqueda.
En la ficha de producto, un bloque «visto en estos ambientes» que remite a las escenas que contienen ese producto. Ese enlazado inverso es el que hace subir el ticket medio.
Medir
Tres indicadores. La tasa de interacción, parte de visitantes que abren al menos un punto caliente, que te dice si la mecánica se entiende. La tasa de añadidos desde los puntos calientes. Y el ticket medio de las sesiones que han visto una escena, comparado con las demás: ahí es donde el dispositivo se justifica o no, porque cuesta tiempo de producción fotográfica.
El módulo Lookbook Shoppable y Shop the Look gestiona esta mecánica en PrestaShop 8 y 9: colocación de puntos calientes sobre la imagen, tarjeta de producto con añadido directo al carrito, comportamiento móvil adaptado, lista HTML de productos para la accesibilidad y bloque inverso en las fichas afectadas.
