Personalización del diseño del banner (versión Legacy)

Puedes personalizar el diseño y el estilo de tu banner directamente dentro de la aplicación. Esto te permite crear un aspecto que coincida con la imagen de marca y la experiencia de usuario de tu organización.

Para acceder a estas opciones, ve a:
Cookie banner > Style

Position

Elige dónde y cómo aparecerá el banner en tu sitio web:

1. Popup: Centrado en la pantalla.
2. Overlay: Funciona como el popup, pero bloquea la página hasta que el usuario interactúa con el banner.
3. Bar at the top: Fija en la parte superior de la pantalla.
4. Bar at the top (pushdown): Se desliza hacia abajo desde la parte superior, empujando el contenido hacia abajo. (Nota: puede no funcionar bien con encabezados fijos.)
5. Floating at the top left: Situado arriba a la izquierda con un pequeño margen.
6. Floating at the top center: Situado arriba en el centro con un pequeño margen.
7. Floating at the top right: Situado arriba a la derecha con un pequeño margen.
8. Bar at the bottom: Fija en la parte inferior de la pantalla.
9. Floating at the bottom left: Situado abajo a la izquierda con un pequeño margen.
10. Floating at the bottom center: Situado abajo en el centro con un pequeño margen.
11. Floating at the bottom right: Situado abajo a la derecha con un pequeño margen.

Theme

Selecciona un tema para controlar el relleno, el estilo de los botones y la apariencia:

1. Block: Relleno pequeño, botones cuadrados con ancho proporcional.
2. Classic: Relleno pequeño, botones redondeados de igual ancho.
3. Edgeless: Sin relleno, botones cuadrados de igual ancho.
4. Wired: Igual que Block pero con los fondos y colores de los botones invertidos.

Tabla comparativa de temas

Text Alignment

Se aplica al título, al mensaje y al logotipo del banner:

• Left
• Center
• Right

Width

Ajusta el ancho del banner usando unidades em (relativas al tamaño de fuente). Ejemplo: 2em = el doble del tamaño de fuente.

• Se controla con un control deslizante.
• Funciona con vista previa en vivo para obtener resultados al instante.
• Útil para mensajes largos o etiquetas de botones largas.
• Nota: se aplica solo a las posiciones de banner, no a las barras (las barras siempre ocupan todo el ancho).

Font Size

Ajusta el tamaño del texto usando unidades px. Ejemplo: 1px = 1/96 de pulgada.

• Se controla con un control deslizante.
• Funciona con vista previa en vivo.
• Por defecto usa el tamaño establecido por el tema de tu tienda.

Padding

Ajusta el espacio interior del banner usando unidades px.

• Se controla con un control deslizante.
• Funciona con vista previa en vivo.
• Los valores predeterminados varían según el tema.
• Nota: no es compatible con el tema Edgeless.

Colors

Personaliza los colores del banner y de los botones:

• Elige de una paleta o define colores personalizados.
• Admite los formatos Hex (p. ej., #123456) y RGBA.
• RGBA añade compatibilidad con la transparencia además de los valores de rojo, verde y azul.

Font Family

De forma predeterminada, el banner hereda la fuente del tema de tu tienda. También puedes elegir entre fuentes web seguras compatibles con todos los navegadores:

• Arial, Arial Black, Verdana, Tahoma, Trebuchet MS, Impact
• Times New Roman, Didot, Georgia, American Typewriter
• Andalé Mono, Courier, Lucida Console, Monaco
• Bradley Hand, Brush Script MT, Luminari, Comic Sans MS

Si quieres usar una fuente personalizada, primero cárgala en los recursos de tu tienda y haz que esté disponible en tu archivo CSS.

z-index

Controla el orden de apilamiento del banner.

• Los valores más altos garantizan que el banner aparezca por encima de otros elementos de la página.
• Ajústalo si hay conflictos con otras apps o scripts.

Container ID

Define el ID HTML del contenedor del banner.

• Cámbialo solo si necesitas apuntar al banner con scripts o selectores CSS personalizados.

Banner Shadow

Añade una sombra detrás del banner.

• Útil cuando los colores del banner y del fondo son similares, ya que mejora la visibilidad.

Animation

Activa animaciones para la aparición y el cierre del banner:

• Fade-in / slide-in al abrir.
• Fade-out / slide-out al cerrar.

También se aplica al enlace Re-open banner (Revoke), si está activado en Behavior.

• Nota: no es compatible con todos los navegadores.

Custom CSS

Añade tus propias reglas CSS para una personalización adicional.

• Útil para ajustar con precisión el tamaño de los botones, los colores de los bordes, el espaciado y más.

Guía en vídeo

Actualizado el: 19/10/2026