> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/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). # 🎨 Consentimiento de cookies – Diseño y estilo > ℹ️ **Note:** Este artículo fue traducido automáticamente usando AI y puede contener imprecisiones. Si algo se ve mal, póngase en contacto con nuestro equipo de apoyo. La sección Design & Styling te da control completo sobre cómo aparece tu banner Cookie Consent en tu escaparate. Desde plantillas y posicionamiento a colores, tipografía, iconos y estilo de botones, casi todos los aspectos visuales de la bandera se pueden personalizar para que coincida con su marca de tienda y crear una experiencia de consentimiento más profesional. # **⚠️ Antes de empezar** Para acceder a la configuración de diseño y estilo: → Abierto **GDPR EU Cookie Banner** → Abierto **Configuración de Banner** → Navegar a la **Diseño** pestaña 💡 Una actualización de previsualización en vivo automáticamente al hacer cambios, lo que le permite ver exactamente cómo aparecerá el banner antes de guardar. --- ## **🎨 Plantillas** Las plantillas proporcionan una manera rápida de aplicar un diseño completo de banner sin configurar manualmente cada configuración. ### **Lo que hace** Aplica una combinación predefinida de: * Colores de fondo * Colores de texto * Colores de botón * Colores de icono Esto permite a los comerciantes lanzar rápidamente un diseño de banner pulido. --- ### **Plantillas disponibles** Por ejemplo: * Forest * Aqua * Alerta * Púrpura * Azul * Océano * Amarillo * Negro * Marina --- ### **Plantilla personalizada** La plantilla personalizada proporciona un punto de partida neutral para los comerciantes que prefieren construir su propio diseño desde cero. 💡 Esta es a menudo la mejor opción al igualar una guía de estilo de marca existente. --- ## **👀 Visibilidad** Controles de visibilidad que los dispositivos muestran el banner Cookie Consent. ### **Opciones disponibles** #### **Desktop & Mobile** Muestra el banner en todos los dispositivos. --- #### **Solo para escritorio** Muestra el banner sólo en dispositivos de escritorio. --- #### **Solo móvil** Muestra el banner sólo en dispositivos móviles. Esto puede ser útil cuando se prueba o se crean experiencias específicas de un dispositivo. --- ## **📍 Ajustes de posición** Control de configuración de posición donde el banner aparece en dispositivos de escritorio y móviles. --- ### **💻 Tipo de pantalla de escritorio** Determina el estilo de diseño general utilizado en dispositivos de escritorio. #### **Full Bar** Muestra un banner estirado a través del ancho de la pantalla. Comúnmente utilizado para banners tradicionales de consentimiento de cookies. --- #### **Float Card** Muestra el banner como una tarjeta flotante más pequeña. Esto crea una apariencia más compacta y reduce la cobertura de la pantalla. --- ### **📌 Posición de escritorio** Las posiciones disponibles dependen del tipo de pantalla seleccionado. #### **Posiciones de barra completa** * Top * Bottom --- #### **Posiciones de la tarjeta flotante** * Top Izquierda * Top Right * Medio ambiente * Bottom Left * Correcto. --- ### **📱 Posición móvil** Controla donde aparece el banner en dispositivos móviles. Las opciones disponibles incluyen: * Top * Medio ambiente * Bottom 💡 La colocación de los átomos suele ser preferida porque se siente menos intrusiva en pantallas más pequeñas. --- ## **🎨 Card Styling** Card Styling controla la apariencia del contenedor de banner en sí. --- ### **🖼️ Color de fondo** Controla el color de fondo de la bandera. Puedes: * Seleccione un color visualmente * Introduzca un código hex manualmente Esto ayuda a alinear el banner con su marca de tienda. --- ### **⭕ Corner Radius** Controla lo redondeado que aparecen las esquinas del banner. Los valores inferiores crean esquinas más afiladas mientras que los valores superiores crean una apariencia más suave. --- ### **📐 Ajustes fronterizos** Personalizar el esquema de banner. #### **Tamaño de la frontera** Controla el espesor de la frontera. --- #### **Color de la frontera** Controla el color de la frontera. Una frontera sutil puede ayudar a la bandera a destacar sin sentir distracción. --- ## **✍️ Tipografía** Los ajustes de tipografía controlan cómo aparece el texto a través de la pancarta Cookie Consent. --- ### **🔠 Fuente Familia** Controla la fuente utilizada en todo el texto de banner. #### **Use Theme Font** Coincide automáticamente con la tipografía utilizada por su Shopify tema. --- #### **Fuentes personalizadas** Elija entre sistema compatible y Google Fonts. Por ejemplo: * Roboto * Open Sans * Montserrat * Poppins Utilizando la misma fuente que tu escaparate a menudo crea la experiencia más perfecta. --- ### **📝 Título Styling** Personalizar el título de banner. #### **Título Tamaño** Controla el tamaño de la fuente de título. #### **Título Color** Controla el color del texto del título. --- ### **📄 Descripción Styling** Personalizar el texto corporal mostrado dentro del banner. #### **Descripción Tamaño** Controla el tamaño de la fuente. #### **Descripción Color** Controla el color del texto. --- ### **🔗 Política de privacidad Enlace** Personalizar la apariencia del enlace Política de Privacidad. #### **Enlace tamaño** Controla el tamaño de la fuente. #### **Link Color** Controla el color del enlace. Elija un color que sigue siendo notable mientras sigue igualando el diseño general. --- ## **🔘 Button Design** Estos ajustes controlan la apariencia de los botones de consentimiento. --- ### **🎨 Button Color** Controla el color de fondo del botón. Este es generalmente uno de los elementos de diseño más visibles en el banner. --- ### **🔤 Button Text Styling** Personalizar la apariencia del texto del botón. #### **Tamaño del texto** Controla el tamaño de la fuente del botón. #### **Color de texto** Controla el color de la fuente del botón. --- ### **⭕ Corner Radius** Controla cómo aparecen los botones redondeados. Esto se puede configurar independientemente del contenedor de banner. --- ## **🎯 Ajustes de iconos** Los iconos ayudan a que la bandera sea más reconocible y atractiva. --- ### **🍪 Mostrar Cookie Banner Icon** Permite o desactiva el icono mostrado junto al contenido de banner. Cuando está habilitado, se dispone de una biblioteca de iconos. --- ### **🖼️ Selección de iconos** Elige entre una variedad de iconos incorporados. Por ejemplo: * Cookie * Escudo * Cerradura * Seguridad * Información * Ajustes * Notificación * Advertencia * Lista de verificación Diferentes iconos pueden ayudar a enfatizar la privacidad, seguridad, cumplimiento o información general. --- ### **🎨 Icon Colores** Personalizar la apariencia de iconos de banner. #### **Cerrar Icon Color** Controla el color del botón de cierre. --- #### **Arrow Icon Color** Controla el color del icono de flecha reabierta. Usar colores complementarios ayuda a mantener un diseño cohesivo. --- ## **📏 Ajuste de texto** Controla cómo el contenido está alineado dentro del banner. ### **Opciones disponibles** #### **Izquierda** Alinea el contenido al lado izquierdo. --- #### **Center** Centro todo el contenido dentro de la bandera. --- #### **Bien.** Alinea el contenido al lado derecho. 💡 La alineación del centro es a menudo la opción más equilibrada en dispositivos de escritorio y móviles. --- ## **⚠️ Notas importantes** ### **Plantillas Reemplazar Colores existentes** Seleccionar una nueva plantilla reemplaza automáticamente la configuración de color actual. Para los mejores resultados: 1. Seleccione una plantilla primero 2. Luego aplique cualquier ajuste de color personalizado --- ### **Opciones de posición Cambiar dinámicamente** Las posiciones de escritorio disponibles dependen del tipo de pantalla seleccionado. Si las opciones de posición cambian inesperadamente, verifique si Full Bar o Float Card es seleccionado. --- ### **Los iconos deben estar habilitados** La biblioteca de iconos sólo aparece cuando: **Mostrar Cookie Banner Icon** está habilitado. --- ### **Visibilidad Controles Device Targeting** Si el banner aparece en un dispositivo pero no en otro, verifique el ajuste de visibilidad seleccionado. --- ### **Actualizaciones de vista previa en vivo automáticamente** El panel de vista previa refresca como se hacen cambios, ayudándole a revisar su diseño antes de guardar. --- # **🚀 Resultado final** Una vez configurado con éxito: ✅ El banner de Cookie Consent coincide con tu marca comercial ✅ Colores, tipografía y botones se sienten consistentes con tu tema ✅ La colocación de Banner está optimizada para escritorio y móvil ✅ Iconos y estilo mejora la claridad visual ✅ Los visitantes reciben una experiencia de consentimiento más pulida ✅ La mensajería de cumplimiento se siente profesional sin interrumpir la experiencia de compra Una pancarta de Consentimiento de Cookies bien diseñada ayuda a mantener el cumplimiento al crear una experiencia más confiable e inigualable para sus visitantes. 🍪 ---