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

Estilos personalizados con CSS

Resumen

La mayor parte de la personalización de marca es más fácil en la app que en CSS. En la pestaña Style puedes configurar logotipos, variantes de botones, colores, fuentes, superficies (padding, radio, sombra, z-index) y animaciones sin escribir código. Consulta Cómo personalizar el estilo, los colores, los logotipos y los botones del banner (nueva versión).

Usa Custom styling solo cuando los controles de Style no permitan lo que necesitas (por ejemplo, una disposición concreta de botones, un tratamiento de bordes o la posición del widget).

Nuevo banner. Para tiendas con la insignia New version en Cookie banner. En el banner clásico, consulta Cómo cambiar al nuevo banner o volver a la versión anterior.

Pasos del banner clásico: CSS personalizado (banner clásico).

Custom styling is available on paid plans (por ejemplo, Plus y superior). No está incluido en el plan Basic gratuito. Mejora de plan desde el selector de planes de la app si el editor de CSS está bloqueado.

Dónde abrir el CSS personalizado

Abre Shopify Admin > Apps > Pandectes GDPR Compliance.
Ve a Cookie banner.
Confirma que la insignia New version se ve en la página Banner.
Abre la pestaña Style.
Desplázate hasta Custom styling (puede que veas Learn more junto al título de la sección, que enlaza con este artículo).
En CSS Rules, usa los iconos de escritorio y móvil si necesitas reglas distintas para cada vista.
Pega tu CSS y luego pulsa Save cuando aparezca la barra de cambios sin guardar.

CSS Rules field in the Custom styling card on the Style tab

Prueba en la tienda en una ventana privada. Si usas Enable for admins, solo verá el banner el personal con sesión iniciada mientras pruebas.

Añade el CSS del banner en Custom styling en la app Pandectes. El CSS de tu tema de Shopify normalmente no cambia el nuevo banner. Usa el editor de esta página en su lugar.

Prioriza los ajustes de la app antes que el CSS

Objetivo	Usa primero la pestaña Style
Colores y modo claro/oscuro	Colors
Aspecto de los botones (relleno/contorno, radio)	Buttons
Ancho, posición o tipo de diálogo del banner	pestaña Layout
Familia y tamaño de fuente	Fonts
Sombra, padding, borde, apilado por encima del tema	Surfaces (incluido Stacking Depth (z-index))
Movimiento al abrir o cerrar	Animations
Posición del widget y del aviso	Layout (aviso / preferencias / widget de consentimiento)

Si el banner queda detrás de una cabecera fija o de una app de chat, sube Surfaces > Stacking Depth (z-index) antes de añadir CSS. Consulta Cómo solucionar que el banner quede oculto detrás de elementos del tema (nueva versión).

Ejemplo de CSS

Pega las reglas en CSS Rules y después Save. Ajusta colores y tamaños para que coincidan con tu marca.

Accent border on the cookie notice:

dialog.dialog.notice {
  border-left: 4px solid #00ffbf;
}

Accept and Decline button colors:

button.filled.allow.primary {
  background: #111111;
}

button.filled.deny.primary {
  background: #666666;
}

Sube ligeramente el widget de consentimiento en la página:

button.widget.bottom.left {
  bottom: 24px;
}

Para ajustes de color avanzados, el editor también admite CSS variables (por ejemplo --ai-bg, --ai-text) en los diálogos de aviso y de preferencias. Tu equipo de soporte o un desarrollador puede ayudarte si ya usas variables en la app.

Consejos

Empieza con un cambio pequeño, guarda y comprueba la tienda.
Usa los iconos de escritorio y móvil situados encima de CSS Rules cuando necesites un estilo distinto en pantallas pequeñas.
Si un cambio no aparece, espera un minuto y actualiza la página.