Questo articolo è disponibile anche in:

Come personalizzare stile, colori, loghi e pulsanti del banner (nuova versione)

Panoramica

Il layout (posizione e tipo di finestra) è trattato separatamente. Se stai passando dal Legacy Banner, consulta la Guida alla migrazione: ricreare il tuo aspetto Legacy nella Nuova versione.

La scheda Style controlla l'aspetto del banner, della finestra delle preferenze e del widget del consenso. Puoi caricare loghi, scegliere lo stile dei pulsanti, impostare i colori (anche per modalità chiara e scura), regolare superfici e font e aggiungere CSS personalizzato.

Lo stile non cambia quando i cookie vengono accettati. Le regole sul consenso restano in All settings > Consent model & regions.

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

Passaggi per il Legacy: Guida alla migrazione: ricreare il tuo aspetto Legacy nella Nuova versione.

Prima di iniziare

Verifica che la pagina Banner mostri il badge New version.
Usa Enable for admins se vuoi testare sullo store live senza mostrare il banner ai visitatori. Consulta Come attivare, disattivare o testare il banner in modalità solo admin (Nuova versione).
Usa l'anteprima nell'app (Desktop / Mobile, Chiaro / Scuro) mentre modifichi.

Apri la scheda Style

Apri Admin Shopify > App > Pandectes GDPR Compliance.
Vai su Cookie banner.
Apri la scheda Style.
Salva quando compare la barra delle modifiche non salvate.

Loghi

Puoi impostare un logo per il banner principale e un logo separato per il widget del consenso.

Banner logo: compare nell'intestazione dell'avviso cookie e delle preferenze (a meno che Hide header non sia attivo nella scheda Content).
Widget logo: compare sul widget del consenso.

Carica un PNG o JPG, oppure scegli un logo dalla galleria. Dopo il salvataggio, le modifiche allo storefront possono richiedere un po' di tempo per comparire.

Pulsanti

Le impostazioni dei pulsanti si applicano alle azioni principali (Accetta / Rifiuta tutto) e secondarie (Preferenze / Salva).

Opzioni tipiche:

Varianti piene o con solo contorno (ghost)
Dimensione e raggio degli angoli
Bordo
Etichette dei pulsanti in grassetto (sezione dei font)

Usa un pulsante Accept pieno e un pulsante Decline con solo contorno quando vuoi che Accetta risalti. I requisiti di Google per i banner richiedono comunque un Rifiuta chiaro e l'accesso alle preferenze. Consulta Come creare un banner che rispetta i requisiti di Google per i banner (Nuova versione).

Colori

Scegli una modalità colore (per esempio chiara o scura), un preset oppure i tuoi colori.

I colori Base, primary, secondary, and accent determinano sfondi, testi e pulsanti.
Auto calculate / auto-adjust può ricavare una palette dal tuo tema Shopify, così non devi inserire ogni valore esadecimale a mano.
Controlla gli sfondi Light e Dark nell'anteprima live, così il banner resta leggibile per i visitatori che usano la modalità scura.

Superfici, font e animazioni

Surfaces: padding, raggio degli angoli, float (finestra mobile), bordo, ombra e Stacking Depth (z-index) (come il banner si sovrappone agli altri elementi del tema).
Fonts: famiglia e dimensione. Lascia vuoto per seguire il font dello store.
Animations: attiva o disattiva le animazioni e imposta la durata. Il Layout sceglie comunque il tipo di animazione (dissolvenza, scorrimento, zoom, crescita).

Se il banner è dietro un header sticky o un widget chat, aumenta Stacking Depth (z-index) (oppure clicca Set max). Il valore massimo è 2147483647. Consulta Come risolvere il banner nascosto dietro gli elementi del tema (Nuova versione).

CSS personalizzato

Per le modifiche che i controlli di Style non permettono, usa Custom styling / CSS Rules nella stessa scheda. Le regole si applicano all'interno del web component pandectes-cmp.

Consulta Personalizzare lo stile con CSS.

Il CSS personalizzato del Legacy Banner non viene copiato quando passi al Nuovo Banner. Aggiungi di nuovo le regole in Style > Custom styling.

Mobile e desktop

Molti campi di Style possono essere diversi su mobile. Usa Mobile same as desktop o Mobile different from desktop. Consulta Come usare layout del banner diversi su mobile e desktop (Nuova versione).