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

Estilos personalizados con CSS

Descripción general

La mayor parte de la personalización de marca es más fácil de hacer en la app que con CSS. En la pestaña Style puedes configurar logotipos, variantes de botones, colores, fuentes, superficies (relleno, radio, sombra, z-index) y animaciones sin escribir código. Consulta How to customize banner style, colors, logos, and buttons (New Version).

Usa Custom styling solo cuando los controles de Style no puedan lograr lo que necesitas (por ejemplo, un diseño de botones concreto, un tratamiento de bordes o la posición del widget).

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: Custom styling with CSS (Legacy Banner).

Custom styling está disponible en los planes de pago (por ejemplo, Plus y superiores). No se incluye en el plan Basic gratuito. Mejora tu plan desde el selector de planes de la app si el editor de CSS está bloqueado.

Dónde abrir Custom styling

Abre Shopify Admin > Apps > Pandectes GDPR Compliance.
Ve a Cookie banner.
Confirma que la insignia New version es visible en la página Banner.
Abre la pestaña Style.
Desplázate hasta Custom styling (puede aparecer Learn more junto al título de la sección, que enlaza a este artículo).
En CSS Rules, elige Desktop y/o Mobile si necesitas reglas distintas para cada tipo de pantalla.
Pega tu CSS y haz clic en Save cuando aparezca la barra de cambios sin guardar.

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

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

Prefiere 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 (rellenos / con contorno, radio)	Buttons
Ancho del banner, posición, tipo de diálogo	Pestaña Layout
Familia y tamaño de fuente	Fonts
Sombra, relleno, borde, apilamiento sobre el tema	Surfaces (incluido z-index)
Movimiento al abrir/cerrar	Animations
Posición del widget y del aviso	Layout (aviso / preferencias / widget de consentimiento)

Si el banner queda detrás de un encabezado fijo o de una app de chat, aumenta Surfaces > z-index antes de añadir CSS. Consulta How to fix the banner hiding behind theme elements (New Version).

Ejemplos de CSS

Pega las reglas en CSS Rules y luego haz clic en Save. Ajusta los colores y tamaños a tu marca.

Borde de acento en el aviso de cookies:

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

Colores de los botones Accept y Decline:

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

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

Mover el widget de consentimiento un poco más arriba en la página:

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

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

Consejos

Empieza con un cambio pequeño, guarda y comprueba la tienda.
Usa las reglas CSS de Desktop y Mobile cuando necesites un estilo distinto en pantallas pequeñas.
Si un cambio no se muestra, espera un minuto y actualiza la página.

El CSS personalizado del banner Legacy no se copia al actualizar. Vuelve a añadir las reglas aquí después de la migración. Consulta How to switch to the new banner or switch back to the previous version.