Productos etiquetados

Este componente proporciona la capacidad de subir una imagen en la cual puedes etiquetar y/o posicionar productos de tu tienda.

Puede ser muy útil, por ejemplo, para mostrar una Colección donde haya múltiples productos que vendes, para que los clientes puedan ver cuáles son y comprarlos, o ir a sus respectivas páginas de producto para ver más detalles.

Configuración del componente

Al añadirlo encontrarás varias opciones para personalizarlo, las cuales se explican a continuación.

Ancho

Permite definir el ancho máximo al que el componente se ajustará dentro de la ventana del navegador.

Puedes leer más sobre cómo esta opción afectará al componente en esta página.

---

Opciones de imagen

Dentro de este grupo encontrarás las opciones para subir imágenes tanto para dispositivos de escritorio como móviles.

Nota: Al subir una imagen para móvil, aparecerán opciones adicionales en el subcomponente Producto para que puedas personalizar la posición de su Marcador.

---

Opciones de marcadores

Los Marcadores son los puntos o elementos que permiten a los clientes ver los productos que agregas dentro del componente.

En este grupo encontrarás varias opciones para personalizar cómo se ven y cómo se comportan.

Tamaño

Define el tamaño de todos los marcadores, lo que afecta su ancho y alto, así como el ícono (+) dentro de ellos, mediante opciones predefinidas.

Al elegir Personalizado, podrás ajustar manualmente el tamaño para dispositivos de escritorio y móviles.

Estilo

Define la forma con la que se mostrarán los marcadores.

Fondo

Define el color del fondo para todos los marcadores. El color del ícono (+) se ajustará automáticamente para tener un contraste adecuado.

Animación

Muestra una animación de destello en los marcadores.

Al elegir Hover, la animación se activará solo cuando el cursor se mueva sobre el marker. En el caso de Siempre, la animación se aplicará siempre.

Al elegir Ninguna, no habrá animación y solo estará presente la rotación del ícono en el estado de “hover”.

---

Opciones de producto

En este grupo puedes definir cómo se mostrarán los productos al hacer clic en un marker, lo cual depende de si la opción Enable Quick View está activada o no, de la siguiente manera:

1. Si está activada, funcionará en base a lo que tengas definido dentro de Configuración del tema > Vista rápida de producto.
2. Si está desactivada, al hacer clic en un marker el producto se mostrará junto a él, dentro de una pequeña ventana –tooltip, como la llamaremos– con detalles como imagen, nombre, precio, entre otros. Esto también hará visibles las siguientes opciones para que puedas personalizarlas.

Estilo

Define la forma de las esquinas del tooltip para todos los productos.

Alineación vertical

Define la alineación vertical entre la imagen del producto y su contenido.

Colores del contenido del producto

Define el Pack de colores para todos los tooltips de producto.

---

Apariencia

Este grupo contiene las siguientes opciones para personalizar el componente:

• Margen superior: permite controlar el margen superior de la sección.
• Margen inferior: permite controlar el margen inferior de la sección.
• Colores del contenido: permite elegir el Pack de colores para el componente.

---

Animaciones

La opción Personalizar opciones permiten ajustar las animaciones para este componente en específico. Puedes leer cuáles están disponibles en esta página.

---

---

Configuración del subcomponente

El componente funciona utilizando un subcomponente llamado Producto, en el cual puedes agregar los productos que deseas etiquetar dentro de la imagen.

Tiene las siguientes opciones para que puedas personalizarlo.

Producto

Aquí debes elegir un producto de tu tienda. Por defecto, viene con el primero de la lista de productos dentro del panel de administración de tu tienda, en Productos > Todos los productos.

---

Posición del marker

Dentro de este grupo encontrarás las opciones Arriba y Izquierda para controlar la posición del marker, mediante porcentajes que se basan en el ancho y alto de la imagen que subiste dentro de la configuración principal del componente.

---

Posición del marker (móvil)

Este grupo solo será visible si subiste una imagen para dispositivos móviles en la configuración principal del componente.

También encontrarás las opciones Arriba y Izquierda para controlar la posición del marker para ese caso en particular.

Nota: Si no subes una imagen para móvil, los controles anteriores se aplicarán para todos los dispositivos, tanto de escritorio como móviles.