Personalización del diseño del banner (nueva versión)
Descripción general
Los ajustes de Layout te permiten controlar cómo aparece y se comporta el banner de cookies en tu tienda.
Puedes personalizar la apariencia del diálogo del banner, su posición, la disposición de los botones y los efectos de animación directamente dentro de la aplicación.
Para acceder a estas opciones, ve a:
Cookie banner > Layout
La configuración del diseño funciona junto con el ajuste Consent dialogs, que determina si los visitantes ven un aviso de cookies, un diálogo de preferencias o ambos en secuencia.
Consent Dialogs
El primer paso para configurar el diseño del banner es seleccionar qué consent dialogs se mostrarán a los visitantes.
Las opciones disponibles incluyen:
- Cookie Notice – Muestra un banner donde los visitantes pueden aceptar o rechazar las cookies rápidamente.
- Cookie Notice & Preferences – Muestra primero un aviso de cookies y permite a los visitantes abrir el diálogo de preferencias para gestionar las categorías de cookies.
- Preferences Only – Muestra de inmediato el diálogo completo de preferencias, lo que permite a los visitantes configurar directamente las categorías de cookies.
Opciones de diseño de Cookie Notice
Cuando el diálogo Cookie Notice está activado, hay varias opciones de diseño disponibles.
Estas opciones definen cómo se muestra el banner inicial.
Dialog Appearance
Controla el formato visual del aviso de cookies.
Diseños disponibles:
- Box – Un diálogo compacto que aparece como una ventana flotante.
- Bar – Un banner horizontal que se muestra a lo ancho de la página.
- Wide – Un diálogo más grande que ofrece más espacio para el contenido.
Position
Define dónde aparece el banner en la pantalla.
Las posiciones disponibles dependen de la apariencia del diálogo seleccionada.
Algunos ejemplos son:
- Center
- Top left
- Top center
- Top right
- Bottom left
- Bottom center
- Bottom right
- Middle left
Para el diseño Bar, el banner puede aparecer en:
- Top
- Bottom
Window Size
Controla el tamaño general del diálogo del banner.
Tamaños disponibles:
- XS
- SM
- MD
- LG
- XL
Los tamaños mayores ofrecen más espacio para mensajes más largos, logotipos y botones adicionales.
Animation (Show / Hide)
Controla la animación que se usa cuando el banner aparece o desaparece.
Estilos de animación disponibles:
- Fade
- Slide
- Zoom
- Grow
Las animaciones ayudan a que la interacción con el banner sea más fluida y más llamativa.
Buttons
Define qué botones aparecen en el diálogo del aviso de cookies.
Las opciones disponibles incluyen:
- Accept–Decline (recomendado)
- Accept only
- Decline only
- Preferences
La configuración seleccionada determina las opciones de interacción disponibles para los visitantes.
Button Layout
Controla cómo se organizan los botones dentro del banner.
Diseños disponibles:
- Horizontal
- Horizontal (grouped)
- Horizontal (justified)
Additional Options
Los ajustes de diseño adicionales incluyen:
Reverse order
Invierte el orden de los botones.
Hide header
Oculta los elementos del encabezado del banner, como:
- Título
- Logotipo
- Botón de cierre
- Selector de idioma
Center align
Centra el contenido del banner, incluidos:
- Encabezado
- Mensaje
- Botones
Funciona mejor con los tipos de diálogo Box y Wide.
Opciones de diseño del diálogo Preferences
Cuando el diálogo Preferences está activado, hay ajustes de diseño adicionales disponibles para la ventana de consentimiento detallada.
Dialog Appearance
Define el estilo de diseño de la ventana de preferencias.
Opciones disponibles:
- Box – Un diálogo flotante centrado.
- Drawer – Un panel deslizante que aparece desde la parte superior o inferior.
- Sidepanel – Un panel que se desliza desde el lado izquierdo o derecho.
Position
La posición depende del tipo de diálogo seleccionado.
Algunos ejemplos son:
Para Box:
- Center
- Top left
- Top center
- Top right
- Bottom left
- Bottom center
- Bottom right
Para Drawer:
- Top
- Bottom
Para Sidepanel:
- Left
- Right
Buttons
Define qué botones están disponibles dentro del diálogo de preferencias.
Configuraciones disponibles:
- Accept–Decline
- Accept only
- Decline only
Button Layout
Controla cómo se muestran los botones de acción.
Diseños disponibles:
- Vertical
- Vertical (grouped)
- Horizontal
- Horizontal (grouped)
- Horizontal (justified)
Additional Options
Reverse order
Invierte el orden de los botones.
Require Save Preferences
Cuando está activada:
- Los botones Accept y Decline actualizan las selecciones de categorías
- El consentimiento se almacena solo después de hacer clic en Save preferences
Esta opción da a los visitantes más control para revisar sus elecciones antes de confirmarlas.
Categories & Cookies Display
Controla cómo aparecen las categorías de cookies y sus detalles en el diálogo de preferencias.
Las opciones disponibles incluyen:
Show category descriptions
Muestra una breve explicación debajo de cada categoría de cookies.
Show cookies list
Permite a los visitantes expandir las categorías y ver las cookies individuales asociadas a ellas.
Use checkboxes instead of switches
Muestra los controles de categoría como casillas de verificación en lugar de interruptores.
Animation
Controla cómo aparece y se cierra el diálogo de preferencias.
Tipos de animación disponibles:
- Fade
- Slide
- Zoom
- Grow
Resumen
Los Layout settings te permiten controlar por completo cómo aparecen y se comportan los diálogos de consentimiento.
Con estas opciones, puedes configurar:
- El tipo de diálogo de consentimiento que se muestra
- La posición y el tamaño del banner
- La disposición de los botones y las opciones de interacción
- La estructura del diálogo de preferencias
- Las animaciones y la presentación visual
En conjunto, estos ajustes ayudan a garantizar que el banner se integre sin problemas con el diseño de tu tienda y con la experiencia de usuario.
Actualizado el: 19/10/2026
¡Gracias!