ℹ️ 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. 🍪

Actualizado el: 10/09/2026