Questo articolo è disponibile anche in:

Stile personalizzato con CSS

Panoramica

Gran parte della personalizzazione del brand è più semplice da fare nell'app che con il CSS. Nella scheda Style puoi impostare loghi, varianti dei pulsanti, colori, font, superfici (padding, raggio, ombra, z-index) e animazioni senza scrivere codice. Vedi How to customize banner style, colors, logos, and buttons (New Version).

Usa Custom styling solo quando i controlli di Style non bastano per ottenere ciò che ti serve (ad esempio una disposizione specifica dei pulsanti, un trattamento dei bordi o la posizione del widget).

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

Procedura per Legacy: Custom styling with CSS (Legacy Banner).

Custom styling è disponibile nei piani a pagamento (ad esempio Plus e superiori). Non è incluso nel piano Basic gratuito. Se l'editor CSS è bloccato, passa a un piano superiore dal selettore dei piani nell'app.

Dove aprire Custom styling

Apri Shopify Admin > Apps > 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 (accanto al titolo della sezione potresti vedere Learn more, che rimanda a questo articolo).
In CSS Rules, scegli Desktop e/o Mobile se ti servono regole diverse per ogni viewport.
Incolla il tuo CSS, poi clicca su Save quando compare la barra delle modifiche non salvate.

Prova sullo storefront in una finestra privata. Se usi Enable for admins, durante i test solo lo staff con l'accesso effettuato vedrà il banner.

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

Usa prima le impostazioni dell'app, poi il CSS

Obiettivo	Usa prima la scheda Style
Colori e modalità chiara/scura	Colors
Aspetto dei pulsanti (pieno / con contorno, raggio)	Buttons
Larghezza, posizione e tipo di dialogo del banner	Scheda Layout
Famiglia e dimensione del font	Fonts
Ombra, padding, bordo, sovrapposizione al tema	Surfaces (incluso z-index)
Movimento in apertura/chiusura	Animations
Posizione di widget e notice	Layout (notice / preferences / consent widget)

Se il banner finisce dietro un header fisso o un'app di chat, aumenta Surfaces > z-index prima di aggiungere CSS. Vedi How to fix the banner hiding behind theme elements (New Version).

CSS di esempio

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

Bordo di accento sul cookie notice:

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

Colori dei pulsanti Accept e Decline:

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

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

Sposta leggermente più in alto il consent widget nella pagina:

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

Per regolazioni avanzate dei colori, l'editor supporta anche le variabili CSS (ad esempio --ai-bg, --ai-text) nei dialoghi notice e preferences. Il tuo team di supporto o il tuo sviluppatore possono aiutarti se usi già le variabili nell'app.

Suggerimenti

Inizia con una piccola modifica, salva e controlla lo storefront.
Usa le CSS Rules per Desktop e Mobile quando ti serve uno stile diverso sugli schermi piccoli.
Se una modifica non compare, aspetta un minuto e aggiorna la pagina.