Questo articolo è disponibile anche in:

Stile personalizzato con CSS

Panoramica

La maggior parte della personalizzazione del brand è più semplice nell'app che in CSS. Nella scheda Style puoi impostare loghi, varianti dei pulsanti, colori, font, superfici (padding, raggio, ombra, z-index) e animazioni senza scrivere codice. Vedi Come personalizzare lo stile, i colori, i loghi e i pulsanti del banner (nuova versione).

Usa Custom styling solo quando i controlli di Stile non sono sufficienti per ottenere ciò che ti serve (ad esempio un layout specifico dei pulsanti, un trattamento dei bordi o la posizione del widget).

Nuovo banner. Per gli store con il badge New version su Cookie banner. Per il Banner legacy, consulta Come passare al nuovo banner o tornare alla versione precedente.

Passaggi legacy: Personalizzazione con CSS (Banner legacy).

Custom styling is available on paid plans (ad esempio Plus e superiori). Non è incluso nel piano Basic gratuito. Passa a un piano superiore dal selettore dei piani nell'app se l'editor CSS è bloccato.

Dove aprire la personalizzazione CSS

Apri Admin Shopify > App > Pandectes GDPR Compliance.
Vai su Cookie banner.
Verifica che il badge New version sia visibile nella pagina Banner.
Apri la scheda Style.
Scorri fino a Custom styling (potresti vedere Learn more accanto al titolo della sezione, che rimanda a questo articolo).
In CSS Rules, usa le icone desktop e mobile se ti servono regole diverse per ciascun viewport.
Incolla il tuo CSS, poi clicca su Save quando compare la barra delle modifiche non salvate.

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

Testa lo storefront in una finestra privata. Se usi Enable for admins, durante i test il banner sarà visibile solo allo staff connesso.

Aggiungi il CSS del banner in Custom styling nell'app Pandectes. Il CSS del tema Shopify di solito non modifica il Nuovo banner. Usa invece l'editor di questa pagina.

Prima le impostazioni dell'app, poi il CSS

Obiettivo	Usa prima la scheda Stile
Colori e modalità chiara/scura	Colors
Aspetto dei pulsanti (pieno / con contorno, raggio)	Buttons
Larghezza, posizione e tipo di finestra del banner	scheda Layout
Famiglia e dimensione del font	Fonts
Ombra, padding, bordo, sovrapposizione rispetto al tema	Surfaces (incluso Stacking Depth (z-index))
Animazioni in apertura e chiusura	Animations
Posizione dell'avviso e del widget	Layout (avviso / preferenze / widget del consenso)

Se il banner finisce sotto un header fisso o un'app di chat, aumenta Surfaces > Stacking Depth (z-index) prima di aggiungere CSS. Vedi Come risolvere il banner che si nasconde dietro gli elementi del tema (nuova versione).

Esempio di CSS

Incolla le regole in CSS Rules, poi clicca su Save. Modifica colori e dimensioni per adattarli al tuo brand.

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;
}

Sposta il widget del consenso un po' più in alto nella pagina:

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

Per modifiche avanzate dei colori, l'editor supporta anche CSS variables (ad esempio --ai-bg, --ai-text) nelle finestre di avviso e preferenze. Il tuo team di supporto o uno sviluppatore può aiutarti se nell'app usi già delle variabili.

Suggerimenti

Inizia con una modifica piccola, salva e controlla lo storefront.
Usa le icone desktop e mobile sopra CSS Rules quando ti servono stili diversi sugli schermi piccoli.
Se una modifica non appare, aspetta un minuto e ricarica la pagina.