Este artículo también está disponible en:

Cómo personalizar el estilo, los colores, los logotipos y los botones del banner (nueva versión)

Descripción general

El diseño (posición y tipo de diálogo) se explica por separado. Si vienes del banner Legacy, consulta Migration Guide: Recreating your Legacy Look in New Version.

La pestaña Style controla el aspecto del banner, del diálogo de preferencias y del widget de consentimiento. Puedes subir logotipos, elegir estilos de botones, definir colores (incluidos claro y oscuro), ajustar superficies y fuentes, y añadir CSS personalizado.

Style no cambia cuándo se permiten las cookies. Las reglas de consentimiento siguen en All settings > Consent model & regions.

Nuevo banner. Para tiendas con la insignia New version en Cookie banner. Si usas el banner Legacy, consulta How to switch to the new banner or switch back to the previous version.

Pasos para Legacy: Migration Guide: Recreating your Legacy Look in New Version.

Antes de empezar

Confirma que la página Banner muestra la insignia New version.
Usa Enable for admins si quieres probar en la tienda real sin mostrar el banner a los visitantes. Consulta How to enable, disable, or test the banner in admin-only mode (New Version).
Usa la vista previa de la app (Desktop / Mobile, Light / Dark) mientras editas.

Abre la pestaña Style

Abre Shopify Admin > Apps > Pandectes GDPR Compliance.
Ve a Cookie banner.
Abre la pestaña Style.
Haz clic en Save cuando aparezca la barra de cambios sin guardar.

Logotipos

Puedes establecer un logotipo para el banner principal y otro distinto para el widget de consentimiento.

Banner logo: aparece en el aviso de cookies y en el encabezado de preferencias (salvo que Hide header esté activado en Layout).
Widget logo: aparece en el widget de consentimiento.

Sube un PNG o JPG, o elige un logotipo de la galería. Después de guardar, los cambios en la tienda pueden tardar un poco en aparecer.

Botones

Los ajustes de botones se aplican a las acciones principales (Accept / Deny all) y a las secundarias (Preferences / Save).

Opciones habituales:

Variantes rellenas o con contorno (ghost)
Tamaño y radio de las esquinas
Borde
Etiquetas de botón en negrita (sección de fuentes)

Usa un botón Accept relleno y un botón Decline con contorno si quieres que Accept destaque. Los requisitos de banner de Google siguen exigiendo un Decline claro y acceso a las preferencias. Consulta How to create a banner that meets Google’s banner requirements (New Version).

Colores

Elige un modo de color (por ejemplo claro u oscuro), un preajuste o tus propios colores.

Los colores Base, primary, secondary y accent determinan fondos, texto y botones.
Auto calculate / el autoajuste puede derivar una paleta a partir de tu tema de Shopify para que no tengas que introducir cada valor hexadecimal a mano.
Previsualiza los fondos Light y Dark en el visor en vivo para que el banner siga siendo legible para los visitantes que usan el modo oscuro.

Superficies, fuentes y animaciones

Surfaces: relleno, radio de las esquinas, float (ventana flotante), borde, sombra y z-index (cómo se apila el banner sobre otros elementos del tema).
Fonts: familia y tamaño. Déjalo vacío para usar la fuente de la tienda.
Animations: activa o desactiva el movimiento y establece la duración. Layout sigue eligiendo el tipo de animación (fade, slide, zoom, grow).

Si el banner queda detrás de un encabezado fijo o de un widget de chat, aumenta z-index. El valor máximo es 2147483647. Consulta How to fix the banner hiding behind theme elements (New Version).

Estilos personalizados (CSS)

Para cambios que los controles de Style no permiten, usa Custom styling / CSS Rules en la misma pestaña. Las reglas se aplican dentro del componente web pandectes-cmp.

Consulta Custom styling with CSS.

El CSS personalizado del banner Legacy no se copia al cambiar al nuevo banner. Vuelve a añadir las reglas en Style > Custom styling.

Móvil y escritorio

Muchos campos de Style pueden diferir en móvil. Usa Mobile same as desktop o Mobile different from desktop. Consulta How to use different banner layouts on mobile and desktop (New Version).