> ## 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). # 🎨 Come impostare CSS personalizzato per Hoppy Currency Converter > ℹ️ **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 funzione CSS personalizzata consente di personalizzare ulteriormente l'aspetto del Convertitore di valute al di là delle impostazioni standard di progettazione. Se si desidera regolare colori, spaziatura, bordi, ombre, o abbinare il widget a un negozio fortemente personalizzato, Custom CSS ti dà una maggiore flessibilità di styling senza modificare la tua Shopify file tematici. Questa guida cammina attraverso come aggiungere e gestire in modo sicuro CSS personalizzato per il Convertitore di valute. --- # **⚠️ Prima di iniziare** Prima di utilizzare Custom CSS, assicurarsi: * Hoppy Currency Converter è installato e attivo * L'App Embed è abilitato * Il processo di bordo è stato completato * Hai una chiara idea dei cambiamenti di stile che vorresti fare ⚠️ CSS non corretto può influenzare l'aspetto del widget. Sempre testare i cambiamenti con attenzione prima di lasciarli vivere sul tuo negozio. --- # **✅ Passo 1: Aprire le impostazioni CSS personalizzate** Aprire **Hoppy Currency Converter** app dalla tua Shopify Admin. Allora: → Cliccare **Avanzato** → Scorrere al **Impostazioni degli esperti** sezione → Individuare il **CSS personalizzato** campo Questo è dove vanno aggiunte tutte le regole di stile personalizzate. --- # **✅ Fase 2: comprendere le classi CSS disponibili** Per personalizzare il Convertitore di valute, è necessario indirizzare le classi CSS appropriate. Queste classi identificano diverse parti del widget e consentono di modellarli singolarmente. --- ## **🖥️ Convertitore di valute Desktop** .futureblink currency desktop ### **Utilizzare per** * Colori di sfondo * Borse * Ombre * Imbottitura * Margine Questa classe mira il Convertitore di valute visualizzato su dispositivi desktop. --- ## **📱 Convertitore di valute mobili** .futureblink currency mobile ### **Utilizzare per** * Spazio per dispositivi mobili * Mobile-specific styling * Regolazioni di layout mobili Questa classe mira il Convertitore di valute visualizzato su dispositivi mobili. --- ## **📋 Goccia di valuta** .futureblink-valuta-dropdown ### **Utilizzare per** * Gocciatura * Borse * raggio di confine * Ombre * Colori di sfondo Questa classe controlla l'elenco delle valute disponibili visualizzate dopo aver cliccato sul convertitore. --- ## **🔘 Interruttore di valute** .currency-switcher ### **Utilizzare per** * Pulsante stile * Aspetto della valuta selezionata * Borse * Spaziatura Questa classe controlla il selettore valuta visibile con cui i clienti interagiscono. --- ## **📄 Opzioni di goccia** .opzione ### **Utilizzare per** * Remi di valute individuali * Font sizing * Imbottitura * Effetti Hover Questa classe mira ogni opzione valuta all'interno del menu a tendina. --- # **✅ Passo 3: Creare le regole CSS** CSS utilizza una struttura semplice: selettore { proprietà: valore; # ### **Struttura di esempio** * Selezionatore → Quello che vuoi intuire * Proprietà → Cosa vuoi cambiare * Valore → Il nuovo aspetto --- # **🎨 Esempio: Cambia colore di sfondo** .futureblink currency desktop {} sfondo-colore: #f8f9fa; # Questo cambia il colore di sfondo del Convertitore di valute desktop. --- # **🔲 Esempio: Aggiungi bordi & ombre** .futureblink currency desktop {} confine: 1px solido #ddd; confine-radio: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); # Questo crea un aspetto più pulito in stile carta. --- # **📋 Esempio: Style the Currency Dropdown** .futureblink-currency dropdown { confine-radio: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); # Questo aggiunge angoli arrotondati e una più forte ombra a discesa. --- # **📱 Esempio: Regolare lo spazio mobile** .futureblink currency mobile imbottitura: 12px 16px; margin-top: 8px; # Questo aumenta la spaziatura intorno al widget mobile. --- # **⚠️ Se gli stili non si applicano** A volte lo stile del widget predefinito può sovrascrivere il CSS personalizzato. Se succede, aggiungi: ! alla dichiarazione CSS. ### **Esempio** .futureblink currency desktop {} sfondo-colore: bianco!importante; confine-radio: 10px!importante; # 💡 Utilizzo `!important` è raccomandato ogni volta che uno stile personalizzato non viene applicato con successo. --- # **✅ Passo 4: Salva le tue modifiche** Dopo aver aggiunto il tuo CSS: → Cliccare **Salva** I cambiamenti di stile sono applicati immediatamente al widget Convertitore di valute. --- # **✅ Passo 5: Testare il Widget** Visita il tuo negozio e verifica le modifiche. Assicurarsi di provare: * Dispositivi desktop * Dispositivi mobili * Comportamento a discesa valuta * Pagine di negozio diverse Questo aiuta a garantire lo stile funziona costantemente attraverso il vostro negozio. --- # **🔍 Hai bisogno di più corsi CSS?** Se desideri personalizzare parti aggiuntive del Convertitore di Valuta: 1. Apri il tuo negozio 2. Fare clic con il pulsante destro del mouse sul convertitore di valuta 3. Fare clic **Controllo** 4. Recensione della struttura HTML 5. Individuare nomi di classe aggiuntivi Queste classi possono quindi essere utilizzate all'interno del campo Custom CSS. --- # **⚠️ Note importanti** ### **Cambiamenti Vai a vivere immediatamente** Non c'è alcuna modalità di bozza per CSS personalizzata. Eventuali modifiche diventano visibili sul negozio non appena li salvi. --- ### **Impostazioni di progettazione CSS personalizzate** Se una regola di stile esiste in entrambi: * Impostazioni di progettazione * CSS personalizzato La versione Custom CSS prenderà la priorità. --- ### **Desktop & Mobile May Richiede Styling separato** Le modifiche effettuate alle classi desktop non influiscono automaticamente sulle classi mobili. Per i migliori risultati, rivedere entrambe le versioni separatamente. --- ### **Aggiornamenti tematici Maggio Affect Custom CSS** Maggiore Shopify aggiornamenti tema possono cambiare la struttura del negozio. Se ciò accade, alcune regole CSS potrebbero essere regolate. --- # **🎉 Risultato finale** Una volta configurato con successo: ✅ Il Convertitore di valute corrisponde al tuo marchio di negozio ✅ Colori, spaziatura e bordi possono essere personalizzati ✅ I layout desktop e mobili possono essere progettati in modo indipendente ✅ Personalizzazione visiva avanzata diventano possibili ✅ Styling può essere regolato senza modificare Shopify file tematici Utilizzando Custom CSS ti dà un controllo aggiuntivo sull'aspetto del Convertitore di valute e aiuta a creare un'esperienza di negozio più senza soluzione di continuità. 🎨 ---