Questo articolo è disponibile anche in:

Stile personalizzato con CSS (banner Legacy)

Panoramica

Nel banner Legacy, la maggior parte delle opzioni di aspetto si trova in Cookie banner > Style: layout (posizione, larghezza, tema), colori, logo, font, z-index e animazioni. Usa il CSS personalizzato solo quando quei campi non bastano.

Il CSS personalizzato / lo stile avanzato è disponibile nei piani a pagamento (ad esempio Plus e superiori), non nel piano Basic gratuito.

Banner Legacy. Per i negozi senza il badge New version in Cookie banner. Se usi il nuovo banner, vedi How to switch to the new banner or switch back to the previous version.

Procedura per il nuovo banner: Custom styling with CSS.

Dove aggiungere il CSS (banner Legacy)

Apri Shopify Admin > Apps > Pandectes GDPR Compliance.
Vai su Cookie banner.
Verifica di non vedere il badge New version (l'interfaccia Legacy usa le schede Behavior, Style e Content).
Apri la scheda Style.
Usa Layout, Colors e Advanced styling per font, z-index e animazioni.
Aggiungi le regole personalizzate nell'area del custom CSS nella scheda Style (inclusa in Advanced styling nei piani a pagamento).
Clicca su Save e prova sullo storefront in una finestra privata.

Come appare il banner Legacy nel DOM

Radici tipiche sullo storefront:

#pandectes-banner
Classi di CookieConsent: .cc-window, .cc-message, .cc-compliance, .cc-btn

Il CSS del tema può influire sul banner Legacy perché non si trova dentro uno shadow root come il nuovo banner. Preferisci comunque il campo CSS personalizzato di Pandectes Style, così le regole viaggiano insieme alle tue impostazioni Pandectes.

Usa prima le impostazioni dell'app, poi il CSS

Obiettivo	Posizione in Legacy
Posizione barra, flottante o popup	Style > Layout > Position
Larghezza	Style > Layout > Width
Colori	Style > Colors
Logo	Style > Banner logo
Font	Style > Advanced styling
z-index	Style > Advanced styling > z-index
Etichette dei pulsanti	Scheda Content

Selettori di esempio (verifica sul tuo negozio)

Quando possibile, limita le regole alla radice del banner:

Finestra del banner

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

Testo del messaggio

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

Pulsanti Accept / Decline

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

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

Apri il pannello delle preferences nel tuo negozio e ispeziona i nomi delle classi. Variano in base al tipo di banner (Preferences, Informative, ecc.). Vedi Cookie Banner Modes (Legacy Version).

Ispezionare il banner live

Apri lo storefront con il banner visibile.
Clicca con il tasto destro sul banner e scegli Inspect.
Verifica la presenza di #pandectes-banner o .cc-window nel DOM.
Copia i nomi delle classi dai nodi che vuoi stilizzare. Non incollare i selettori della guida del nuovo banner (dialog.notice, pandectes-cmp).

Passare al nuovo banner

Il CSS personalizzato di Legacy non viene migrato automaticamente. Dopo l'upgrade, ricrea le regole in Style > Custom styling nel nuovo banner. Vedi: