> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Cookie Consent – Design & Styling > ℹ️ **Note:** Questo articolo è stato tradotto automaticamente utilizzando AI e può contenere imprecisioni. Se qualcosa sembra sbagliato, si prega di contattare il nostro team di supporto. La sezione Design & Styling ti dà il controllo completo su come appare il tuo banner Cookie Consent sul tuo negozio. Dai modelli e dal posizionamento ai colori, alla tipografia, alle icone e allo styling dei bottoni, quasi ogni aspetto visivo del banner può essere personalizzato per abbinare il branding del tuo negozio e creare un'esperienza di consenso più professionale. # **⚠️ Prima di iniziare** Per accedere alle impostazioni di Design & Styling: → Aperto **RGPD** → Aperto **Impostazioni banner** → Navigare al **Design** scheda 💡 Un'anteprima live aggiorna automaticamente come si apportano modifiche, permettendo di vedere esattamente come apparirà il banner prima di salvare. --- ## **🎨 Modelli** I modelli offrono un modo rapido per applicare un design banner completo senza configurare manualmente ogni impostazione. ### **Che cosa fa** Si basa su una combinazione predefinita di: * Colori di sfondo * Colori di testo * Colori del pulsante * Colori icona Questo permette ai commercianti di lanciare rapidamente un design banner lucido. --- ### **Template disponibili** Esempi includono: * Foresta * Aqua * Avviso * Viola * Blu * Oceano * Giallo * Nero * Marina Militare --- ### **Modello personalizzato** Il modello personalizzato fornisce un punto di partenza neutro per i commercianti che preferiscono costruire il proprio design da zero. 💡 Questa è spesso l'opzione migliore quando si abbina una guida di stile di marca esistente. --- ## **👀 Visibilità** Controlli di visibilità quali dispositivi visualizzano il banner Cookie Consent. ### **Opzioni disponibili** #### **Desktop & Mobile** Visualizza il banner su tutti i dispositivi. --- #### **Solo Desktop** Visualizza il banner solo su dispositivi desktop. --- #### **Solo mobile** Visualizza il banner solo su dispositivi mobili. Questo può essere utile durante il test o la creazione di esperienze specifiche del dispositivo. --- ## **📍 Impostazioni posizione** Impostazioni di posizione di controllo dove il banner appare su dispositivi desktop e mobili. --- ### **💻 Tipo di visualizzazione Desktop** Determina lo stile di layout complessivo utilizzato sui dispositivi desktop. #### **Bar completo** Visualizza un banner teso sulla larghezza dello schermo. Comunemente usato per banner tradizionali di consenso dei cookie. --- #### **Carta galleggiante** Visualizza il banner come una carta galleggiante più piccola. Questo crea un aspetto più compatto e riduce la copertura dello schermo. --- ### **📌 Posizione Desktop** Le posizioni disponibili dipendono dal tipo di visualizzazione selezionato. #### **Posizione bar completa** * Top * Fondo --- #### **Posizione della carta galleggiante** * A sinistra * Top destra * Medio * In basso a sinistra * In basso a destra --- ### **📱 Posizione mobile** Controlla dove il banner appare sui dispositivi mobili. Le opzioni disponibili includono: * Top * Medio * Fondo 💡 Il posizionamento inferiore è spesso preferito perché si sente meno invadente su schermi più piccoli. --- ## **🎨 Styling della carta** Card Styling controlla l'aspetto del contenitore banner stesso. --- ### **🖼️ Colore dello sfondo** Controlla il colore di sfondo del banner. Potete: * Seleziona un colore visivamente * Inserisci manualmente un codice Hex Questo aiuta a allineare il banner con il vostro negozio di marca. --- ### **⭕ Radiatore ad angolo** Controlla come arrotondato gli angoli del banner appaiono. I valori inferiori creano angoli più nitidi mentre i valori più alti creano un aspetto più morbido. --- ### **📐 Impostazioni di ordine** Personalizza il profilo del banner. #### **Dimensione del bordo** Controlla lo spessore del bordo. --- #### **Colore di confine** Controlla il colore del bordo. Un bordo sottile può aiutare lo striscione distinguersi senza sentirsi distrarre. --- ## **✍️ Tipografia** Le impostazioni della tipografia controllano il modo in cui il testo appare durante il banner Cookie Consent. --- ### **🔠 Font Family** Controlla il carattere utilizzato in tutto il testo banner. #### **Utilizzare il carattere tema** Abbina automaticamente la tipografia utilizzata dalla tua Shopify tema. --- #### **Fonti personalizzate** Scegli dal sistema supportato e Google Fonts. Esempi includono: * Robot * Apri Sans * Montserrat * Poppins Utilizzando lo stesso carattere del tuo negozio, spesso crea l'esperienza più senza soluzione di continuità. --- ### **📝 Titolo Styling** Personalizza il titolo del banner. #### **Titolo Dimensioni** Controlla la dimensione del carattere del titolo. #### **Titolo Colore** Controlla il colore del testo del titolo. --- ### **📄 Descrizione Styling** Personalizza il testo del corpo visualizzato all'interno del banner. #### **Descrizione Dimensioni** Controlla la dimensione del carattere. #### **Descrizione Colore** Controlla il colore del testo. --- ### **🔗 Informativa sulla privacy Link** Personalizza l'aspetto del link Informativa sulla privacy. #### **Dimensione del link** Controlla la dimensione del carattere. #### **Colore dei colori** Controlla il colore del link. Scegliere un colore che rimane evidente mentre ancora corrispondente al design generale. --- ## **🔘 Button Design** Queste impostazioni controllano l'aspetto dei pulsanti di consenso. --- ### **🎨 Colore del pulsante** Controlla il colore di sfondo del pulsante. Questo è di solito uno degli elementi di design più visibili sul banner. --- ### **🔤 Pulsante Text Styling** Personalizzare l'aspetto del testo del pulsante. #### **Formato del testo** Controlla la dimensione del carattere del pulsante. #### **Colore del testo** Controlla il colore del carattere del pulsante. --- ### **⭕ Radiatore ad angolo** Controlla come arrotondato gli angoli del pulsante appaiono. Questo può essere configurato indipendentemente dal contenitore banner. --- ## **🎯 Impostazioni icone** Icons aiutano a rendere il banner più riconoscibile visivamente e coinvolgente. --- ### **🍪 Mostra Cookie Banner Icon** Consente o disabilita l'icona visualizzata accanto al contenuto del banner. Quando abilitata, una libreria icona diventa disponibile. --- ### **🖼️ Selezione delle icone** Scegli tra una varietà di icone integrate. Esempi includono: * Cookie * Schermo * Blocco * Sicurezza * Informazioni * Impostazioni impostazioni * Notifica * Avvertenza * Lista di controllo Le diverse icone possono contribuire a sottolineare la privacy, la sicurezza, la conformità o le informazioni generali. --- ### **🎨 Colori di icona** Personalizza l'aspetto delle icone del banner. #### **Colore delle icone** Controlla il colore del pulsante di chiusura. --- #### **Colore dell'icona** Controlla il colore dell'icona della freccia riaperto. Utilizzando colori complementari aiuta a mantenere un design coeso. --- ## **📏 Allineamento del testo** Controlla come il contenuto è allineato all'interno del banner. ### **Opzioni disponibili** #### **Sinistra** Allinea il contenuto sul lato sinistro. --- #### **Centro** Centro tutti i contenuti all'interno del banner. --- #### **Giusto.** Allinea il contenuto al lato destro. 💡 L'allineamento del centro è spesso l'opzione più equilibrata su entrambi i dispositivi desktop e mobili. --- ## **⚠️ Note importanti** ### **Modelli sostituire i colori esistenti** La selezione di un nuovo modello sostituisce automaticamente le impostazioni del colore corrente. Per i migliori risultati: 1. Selezionare prima un modello 2. Quindi applicare eventuali regolazioni di colore personalizzate --- ### **Opzioni di posizione Cambia dinamicamente** Le posizioni desktop disponibili dipendono dal tipo di visualizzazione selezionato. Se le scelte di posizione cambiano inaspettatamente, verificare se è selezionata la Full Bar o la Float Card. --- ### **Le icone devono essere abilitate** La libreria icona appare solo quando: **Mostra Cookie Banner Icon** è abilitato. --- ### **Visibilità Controlli dispositivo Targeting** Se il banner appare su un dispositivo ma non su un altro, verifica l'impostazione Visibilità selezionata. --- ### **Aggiornamenti di anteprima live automaticamente** Il pannello di anteprima si aggiorna come cambiamenti sono fatti, aiutando a rivedere il tuo design prima di salvare. --- # **🚀 Risultato finale** Una volta configurato con successo: ✅ Il banner Cookie Consent corrisponde al tuo branding storefront ✅ Colori, tipografia e pulsanti si sentono coerenti con il tema ✅ Il posizionamento banner è ottimizzato per desktop e mobile ✅ Icone e styling migliorano la chiarezza visiva ✅ I visitatori ricevono un'esperienza di consenso più lucida ✅ La messaggistica di conformità si sente professionale senza interrompere l'esperienza di shopping Un banner Cookie Consent ben progettato aiuta a mantenere la conformità creando un'esperienza più affidabile e senza soluzione di continuità per i visitatori. 🍪 ---