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

Estilos personalizados con CSS (banner Legacy)

Descripción general

En el banner Legacy, la mayoría de las opciones de apariencia están en Cookie banner > Style: diseño (posición, ancho, tema), colores, logotipo, fuentes, z-index y animaciones. Usa CSS personalizado solo cuando esos campos no sean suficientes.

El CSS personalizado / los estilos avanzados están disponibles en los planes de pago (por ejemplo, Plus y superiores), no en el plan Basic gratuito.

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

Pasos para el nuevo banner: Custom styling with CSS.

Dónde añadir CSS (banner Legacy)

Abre Shopify Admin > Apps > Pandectes GDPR Compliance.
Ve a Cookie banner.
Confirma que no ves la insignia New version (la interfaz Legacy usa las pestañas Behavior, Style y Content).
Abre la pestaña Style.
Usa Layout, Colors y Advanced styling para las fuentes, el z-index y las animaciones.
Añade reglas personalizadas en el área de custom CSS de la pestaña Style (incluida con Advanced styling en los planes de pago).
Haz clic en Save y prueba en la tienda en una ventana privada.

Cómo aparece el banner Legacy en el DOM

Raíces típicas en la tienda:

#pandectes-banner
Clases de CookieConsent: .cc-window, .cc-message, .cc-compliance, .cc-btn

El CSS del tema puede afectar al banner Legacy porque no está dentro de un shadow root como el nuevo banner. Aun así, prefiere el campo de CSS personalizado de Pandectes Style para que las reglas viajen con tus ajustes de Pandectes.

Prefiere los ajustes de la app antes que el CSS

Objetivo	Ubicación en Legacy
Barra, flotante o ventana emergente (posición)	Style > Layout > Position
Ancho	Style > Layout > Width
Colores	Style > Colors
Logotipo	Style > Banner logo
Fuentes	Style > Advanced styling
z-index	Style > Advanced styling > z-index
Etiquetas de los botones	Pestaña Content

Selectores de ejemplo (verifícalos en tu tienda)

Limita las reglas a la raíz del banner siempre que sea posible:

Ventana del banner

#pandectes-banner .cc-window {
  border-top: 3px solid #00ffbf;
}

Texto del mensaje

#pandectes-banner .cc-message {
  font-size: 14px;
}

Botones Accept / Decline

#pandectes-banner .cc-btn.cc-allow {
  background-color: #111111;
}

#pandectes-banner .cc-btn.cc-deny {
  background-color: #666666;
}

Ventana emergente de preferencias

Abre el panel de preferencias en tu tienda e inspecciona los nombres de las clases. Varían según el tipo de banner (Preferences, Informative, etc.). Consulta Cookie Banner Modes (Legacy Version).

Inspeccionar el banner en vivo

Abre la tienda con el banner visible.
Haz clic derecho en el banner y elige Inspect.
Confirma #pandectes-banner o .cc-window en el DOM.
Copia los nombres de las clases de los nodos a los que quieras dar estilo. No pegues selectores de la guía del nuevo banner (dialog.notice, pandectes-cmp).

Actualizar al nuevo banner

El CSS personalizado de Legacy no se migra automáticamente. Después de actualizar, vuelve a crear las reglas en Style > Custom styling en el nuevo banner. Consulta: