Cómo crear looks interactivos con el plugin TopLook
El plugin TopLook permite colocar pines interactivos sobre una imagen y vincularlos a productos reales de WooCommerce. Así puedes presentar un outfit completo y que cada pin abra la ficha del producto destacado. A continuación, cómo administrar la herramienta desde WordPress.
1. Accede al panel TopLook
En el menú de WordPress ubica TopLook y haz clic en Añadir Look. Verás un formulario similar al de una entrada tradicional, con campos específicos para este plugin.
- Título del look: nombre interno y encabezado que verá el usuario.
- Imagen principal: la fotografía donde colocarás los pines. Sube un archivo con buena resolución.
- Descripción breve: útil para contextualizar el outfit o campaña.
2. Selecciona los productos que quieres destacar
En la sección Productos asignados encontrarás un buscador. Escribe parte del nombre del producto de WooCommerce y pulsa Agregar. El sistema traerá la información necesaria (precio, enlace, imagen destacada) para mostrarla junto al pin.
Puedes agregar varios productos al mismo look. Cada uno quedará disponible para mapearlo en la imagen principal más adelante.
3. Activa el modo de posicionamiento de pines
Presiona el botón Editar posicionamiento (o similar, depende de la versión). Se abrirá la imagen en grande y verás un pin flotante que puedes arrastrar con el cursor o con el dedo (en tablets).
- Selecciona el producto correspondiente en el listado lateral.
- Arrastra el pin al punto exacto donde debe aparecer (por ejemplo,
sobre un accesorio).
- Confirma con Guardar posición. El plugin registra las
coordenadas y las asociará al producto elegido.
Repite este proceso para cada producto del look. Puedes editar la posición en cualquier momento: basta con volver al modo de edición y ajustar el pin.
4. Ajusta opciones visuales y orden
El plugin permite definir el color del pin o del halo (según la versión) y el orden en el que se listan los productos al costado de la imagen. Aprovecha estos controles para mantener coherencia con la paleta de tu marca.
Si quieres destacar un producto concreto, colócalo primero en la lista. Será el que se muestre abierto cuando el visitante cargue la página TopLook.
5. Publica y revisa el resultado
Cuando estés satisfecho, pulsa Publicar. Visita la
página dedicada (por ejemplo /toplook) para validar:
- Que cada pin aparece en el lugar correcto sobre la imagen.
- Que al hacer clic se abre la ficha del producto con su botón “¡Lo quiero!”.
- Que los estilos coinciden con el diseño general del sitio.
Si algo no se ve bien, vuelve al look, ajusta el pin o los productos y actualiza. La sección se refresca inmediatamente.
Consejos de mantenimiento
- Utiliza imágenes de al menos 1200px de ancho para evitar que el pin quede desfasado en pantallas grandes.
- Verifica que los productos asignados sigan publicados y con stock; el plugin muestra lo que WooCommerce tenga disponible.
- Guarda un borrador del look antes de mover pines en producción; así puedes ensayar sin afectar la versión en vivo.
¿Prefieres una versión con capturas? Descarga el manual visual aquí: Manual TopLook en PDF.