Questo articolo è disponibile anche in:

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

Panoramica

Il layout (posizione e tipo di dialogo) è trattato a parte. Se arrivi dal banner Legacy, vedi Migration Guide: Recreating your Legacy Look in New Version.

La scheda Style controlla l'aspetto del banner, del dialogo delle preferences e del consent widget. Puoi caricare loghi, scegliere gli stili dei pulsanti, impostare i colori (anche chiaro e scuro), regolare superfici e font e aggiungere CSS personalizzato.

Style non cambia quando i cookie sono consentiti. Le regole di consenso restano in All settings > Consent model & regions.

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: Migration Guide: Recreating your Legacy Look in New Version.

Prima di iniziare

Verifica che la pagina Banner mostri il badge New version.
Usa Enable for admins se vuoi provare sul negozio live senza mostrare il banner ai visitatori. Vedi How to enable, disable, or test the banner in admin-only mode (New Version).
Usa l'anteprima nell'app (Desktop / Mobile, Light / Dark) mentre modifichi.

Apri la scheda Style

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

Loghi

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

Banner logo: compare nel cookie notice e nell'header delle preferences (a meno che Hide header sia attivo in Layout).
Widget logo: compare sul consent widget.

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

Pulsanti

Le impostazioni dei pulsanti si applicano alle azioni primarie (Accept / Deny all) e a quelle secondarie (Preferences / Save).

Opzioni tipiche:

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

Usa un pulsante Accept pieno e un pulsante Decline con contorno se vuoi dare risalto ad Accept. I requisiti di Google per il banner richiedono comunque un Decline chiaro e l'accesso alle preferences. Vedi How to create a banner that meets Google’s banner requirements (New Version).

Colori

Scegli una modalità colore (ad esempio chiaro o scuro), un preset oppure i tuoi colori.

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

Superfici, font e animazioni

Surfaces: padding, raggio degli angoli, float (finestra sospesa), bordo, ombra e z-index (come il banner si sovrappone agli altri elementi del tema).
Fonts: famiglia e dimensione. Lascia vuoto per seguire il font del negozio.
Animations: attiva o disattiva il movimento e imposta la durata. Il tipo di animazione (fade, slide, zoom, grow) si sceglie comunque in Layout.

Se il banner finisce dietro un header fisso o un widget di chat, aumenta lo z-index. Il valore massimo è 2147483647. Vedi How to fix the banner hiding behind theme elements (New Version).

Stile personalizzato (CSS)

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.

Vedi Custom styling with CSS.

Il CSS personalizzato del banner Legacy 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 oppure Mobile different from desktop. Vedi How to use different banner layouts on mobile and desktop (New Version).