ℹ️ 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à. 🎨

Aggiornato il: 10/09/2026