Marquee

Un Marquee es una franja de contenido que se desplaza horizontalmente de forma continua a través de la pantalla, utilizada frecuentemente para destacar mensajes cortos, anuncios o puntos de venta clave. Probablemente lo hayas visto como una línea de texto que se repite, como “Envío gratis a todo el mundo” o “Nuevos productos cada semana”, deslizándose suavemente de un lado al otro.

Este tipo de componente es especialmente útil para las tiendas en línea porque capta la atención sin interrumpir la experiencia de navegación. A diferencia de los popups o banners, un Marquee se siente sutil pero dinámico: mantiene la información importante visible mientras añade una sensación de movimiento y energía a tu tienda.

Las tiendas suelen usar el Marquee para promocionar ofertas vigentes, destacar beneficios (como devoluciones gratuitas o pagos seguros), o reforzar el mensaje de su marca. Como el contenido se repite de forma continua, garantiza que los visitantes eventualmente verán el mensaje, sin importar en qué momento lleguen a la página.

Cuando se usa de forma pensada, un Marquee puede mejorar la comunicación, orientar las decisiones de los clientes y hacer que tu tienda se sienta más animada y atractiva, sin ocupar demasiado espacio.

Funciona mediante el uso y la adición de varios subcomponentes dentro de él, llamados Items, con contenido en su interior y diversas opciones para personalizarlos.

---

Configuración del componente

Al hacer clic en el nombre del componente encontrarás opciones generales para personalizarlo, que determinarán cómo se verá y se comportará la sección. Las opciones disponibles para este componente son las siguientes:

Ancho

Permite definir el ancho máximo que el componente se extenderá hasta la ventana del navegador.

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

Alineación

Encontrarás dos opciones para elegir la alineación tanto en dispositivos de escritorio como móviles de los subcomponentes de esta sección.

Como puedes añadir imágenes y texto dentro de cada ítem, la alineación los organizará de la siguiente manera:

• Izquierda: imagen a la izquierda, texto a la derecha.
• Centro: imagen en la parte superior, seguida del texto.
• Derecha: imagen a la derecha, texto a la izquierda.

Comportamiento

Este grupo de opciones te permite controlar y personalizar ciertos ajustes relacionados con el comportamiento del componente.

Dirección

Define la dirección horizontal en la que el componente se anima.

Velocidad

Define la velocidad de la animación.

Cantidad de clones

Dado que los ítems del componente deben repetirse para crear la transición fluida que hace que parezca un desplazamiento infinito, estarán contenidos dentro de un grupo.

Al definir el número en esta opción, podrás establecer cuántos grupos repetidos (clonados) tendrá el componente.

Por ejemplo, si ves espacios vacíos en el lado izquierdo o derecho (dependiendo de la opción Dirección), es posible que necesites aumentar la “cantidad de grupos” para que el componente pueda llenar esos “huecos”.

Puedes leer y encontrar ejemplos y casos de uso más adelante en esta sección de la página.

Igualar ancho de ítems

Permite que todos los ítems tengan exactamente el mismo ancho, independientemente de la extensión o cantidad de contenido dentro de ellos.

Detener al pasar el mouse

Permite detener la animación del componente cuando un usuario coloca el cursor sobre él.

Esto puede ser útil si los ítems son clicables y/o tienen enlaces, y deseas que los clientes puedan hacer clic en ellos sin ningún problema.

Opciones de imagen (General)

Este grupo de opciones proporciona ciertos ajustes para controlar cómo se comportarán las imágenes que puedes añadir y mostrar en cada ítem.

Visualización

Define cómo las imágenes se adaptarán al espacio disponible relacionado con el Proporción (dimensión) seleccionado a continuación.

• Redimensionar: Las imágenes se adaptarán lo más posible a la dimensión del espacio disponible.
• Recortar: Llenará todo el espacio disponible con la mayor parte de la imagen.

Tamaño

Define el tamaño de la imagen basándose en opciones predefinidas para dispositivos de escritorio y móviles, de la siguiente manera:

• Pequeño:
  • Escritorio: 50px
  • Móvil: 40px
• Mediano:
  • Escritorio: 75px
  • Móvil: 65px
• Grande:
  • Escritorio: 100px
  • Móvil: 90px
• Extra grande:
  • Escritorio: 125px
  • Móvil: 115px

Con estos tamaños en mente, puedes conocer la medida máxima para el ancho y el alto de cada imagen. Esto significa que idealmente no deberías subir ni usar imágenes más grandes que la que seleccionaste.

Proporción

Permite definir la dimensión para mostrar las imágenes.

Forma

Permite definir la forma en que se presentarán todas las imágenes.

Opciones de título

Al habilitar la opción Mostrar títulos dentro de este grupo, las siguientes estarán disponibles para usar:

Fuente

Define qué fuente usar, basándose en las seleccionadas en Configuración del tema > Fuentes.

Otros estilos

Las siguientes opciones permiten aplicar estilos a todos los títulos de los ítems:

• Peso
• Espaciado entre letras
• Mayúsculas

Apariencia

Este grupo contiene las siguientes opciones para personalizar el componente:

• Mostrar máscara: muestra un degradado de color difuminado en los lados izquierdo y derecho del componente para que los ítems se mezclen con el color de fondo del componente.
• Espacio izquierdo y derecho: muestra o elimina el espacio izquierdo y derecho entre el componente y la ventana del navegador.
• Colores del contenido: permite elegir el Paquete de colores para el componente.
• Margen superior: permite controlar el margen superior de la sección.
• Margen inferior: permite controlar el margen inferior de la sección.

---

---

Configuración del subcomponente

Como se mencionó antes, el subcomponente de un componente Marquee se llama Item, y puedes añadir tantos como desees. Las opciones para este subcomponente son las siguientes:

Título

Este campo permite mostrar un texto dentro del ítem.

Si se deja vacío, necesariamente deberás añadir una imagen para que se muestre algo en él.

Enlace

Esta opción te permite hacer que todo el ítem sea un enlace. Al elegir uno, las siguientes opciones estarán disponibles:

• Imagen del enlace: si está habilitado y el enlace que eliges es una categoría, producto o página, se mostrará su imagen siempre que tenga una.
• Texto del enlace: no visible para los comerciantes, pero útil para que los navegadores muestren un texto cuando los usuarios pasan el cursor sobre el ítem.
• Enlace externo: el enlace se abrirá en una nueva pestaña del navegador.

Opciones de imagen

Dentro de este grupo de opciones podrás subir una imagen personalizada para cada ítem.

Si has añadido un Enlace y también has habilitado Imagen del enlace, cuando subas una imagen aquí reemplazará a la que proviene de allí.

Una vez que subas la primera imagen, estará disponible una segunda opción para añadir otra específicamente para dispositivos móviles. Si no subes ninguna, la anterior se usará para todos los dispositivos.

Nota: los tamaños para las imágenes que necesitarás subir se pueden encontrar en esta sección de la página.

---

---

Solución de problemas

Como se mencionó antes, el componente Marquee puede presentar algunos espacios vacíos en el lado derecho y/o al final de la secuencia de ítems.

Si eso ocurre, hay algunas cosas que puedes hacer dentro de la configuración del componente para que funcione correctamente. Los escenarios más comunes pueden deberse a:

Pocos ítems

Si el componente no tiene demasiados ítems (ej. dos o tres como máximo), lo cual está bien, puedes aumentar el valor de la opción Cantidad de clones hasta el punto en que dejes de ver el hueco y, por lo tanto, el componente logre cubrirlo y funcione correctamente.

Pocos clones

Por el contrario, incluso si tienes muchos ítems añadidos en el componente y aun así no logra cubrir la secuencia y los huecos o espacios vacíos siguen siendo visibles, puedes intentar seguir aumentando el valor de la opción Cantidad de clones para lograr el mismo efecto mencionado anteriormente.

Igualar anchos

Si nada de lo anterior funciona y sigues viendo huecos o espacios vacíos en la secuencia, puedes intentar deshabilitar la opción Igualar ancho de ítems para que el ancho de todos tus ítems respete la cantidad de contenido que tienen y cubra todo el espacio disponible del componente.