> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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** ![](https://storage.crisp.chat/users/helpdesk/website/-/1/a/5/a/1a5af239e847cf00/screenshot-2026-03-05-at-41126_1uppcxs.png) 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: 1. **Cookie Notice** – Muestra un banner donde los visitantes pueden aceptar o rechazar las cookies rápidamente. 2. **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. 3. **Preferences Only** – Muestra de inmediato el diálogo completo de preferencias, lo que permite a los visitantes configurar directamente las categorías de cookies. ![](https://storage.crisp.chat/users/helpdesk/website/-/1/a/5/a/1a5af239e847cf00/screenshot-2026-03-05-at-41157_kk3yj.png) --- # 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 ![](https://storage.crisp.chat/users/helpdesk/website/-/1/a/5/a/1a5af239e847cf00/screenshot-2026-03-05-at-41246_1pohuc4.png) --- ### 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/1/a/5/a/1a5af239e847cf00/screenshot-2026-03-05-at-41352_1uts38o.png) --- ### 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.