ℹ️ 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 sull'aspetto del Convertitore valuta sul tuo negozio.

Da stili di bandiera e tipografia a colori, confini e preferenze di visualizzazione, queste impostazioni aiutano a creare un Convertitore di valute che si sente come una parte naturale del tuo negozio, mantenendo un'esperienza fluida per acquirenti internazionali.

⚠️ Prima di iniziare

Per accedere alle impostazioni di Design & Styling:

→ Aperto Hoppy Currency Converter

→ Completare il processo di bordo

→ Aprire il Design scheda

💡 Tutti i cambiamenti di progettazione diventano visibili sul negozio dopo il salvataggio.

🏳️ Personalizzazione della bandiera

Questa sezione controlla come le bandiere appaiono durante il Convertitore di valute.

Le modifiche si applicano a entrambi:

• Visualizzazione valuta selezionata
• L'elenco delle valute a discesa

🎨 Stile di bandiera

Controlla l'aspetto visivo delle bandiere.

Tradizionale

Visualizza immagini di bandiera standard senza ulteriori styling.

Il meglio per: Minimal e professionali storefront dove si desidera che le bandiere si mescolino naturalmente nel design.

Moderno

Visualizza bandiere con:

• angoli arrotondati
• Ombre morbide
• Bordi sottili
• Trattamento visivo migliorato

Il meglio per: Moderni negozi che vogliono che il Convertitore di valute si distingua come un elemento di design premium.

💡 Lo stile selezionato si applica ad ogni bandiera visualizzata dal Convertitore di valute.

🔘 Tema della bandiera

Controlla la forma delle bandiere.

Round

Le bandiere appaiono con angoli arrotondati.

Circolo

Bandiere appaiono all'interno di una forma circolare.

Appartamento

Bandiere appaiono con angoli affilati e un look tradizionale.

Il tema selezionato aiuta a determinare la personalità visiva generale del widget.

🔘 Personalizzazione del selettore di valuta

Queste impostazioni controllano l'aspetto del widget principale del Convertitore di valute.

🎨 Tema

Controlla lo stile visivo generale del contenitore Convertitore di valute.

Predefinito

Un aspetto pulito e semplice che si fonde naturalmente nella maggior parte Shopify temi.

Modern Layer

Crea un effetto visivo stratificato dietro il widget per ulteriore profondità e enfasi.

💡 L'effetto Modern Layer utilizza automaticamente il colore di sfondo selezionato.

👀 Modalità di visualizzazione

Controlla quali informazioni appaiono all'interno del Convertitore di valute.

Mostra Bandiera e Valuta

Visualizza sia le informazioni sulla bandiera che sulla valuta.

Mostra solo la bandiera

Visualizza solo bandiere.

Mostra solo la valuta

Visualizza solo informazioni sulla valuta.

Questa impostazione si applica sia al selettore che all'elenco a discesa.

🌓 Tema di colore

Controlla se il Convertitore di valute utilizza un aspetto leggero o scuro.

Luce

Utilizza uno sfondo leggero con testo più scuro.

Oscuro

Utilizza uno sfondo scuro con testo più leggero.

Automatico

Risponde automaticamente alle preferenze del cliente.

💡 La modalità automatica aiuta il Convertitore di valute ad adattarsi naturalmente a diversi dispositivi e ambienti di navigazione.

🔤 Visualizza solo i codici di valuta

Controlla come appaiono i nomi delle valute.

Abilitato

Visualizza i codici di valuta brevi.

Esempi:

• USD
• EUR
• GBP

Disabili

Visualizza i nomi e i codici valutari completi.

Esempi:

• Dollaro americano (USD)
• Euro (EUR)
• British Pound (GBP)

Questo può aiutare a rendere la discesa più compatta quando supporta molte valute.

🎨 Personalizzazione del tema

Questa sezione controlla il core styling del Convertitore di valute.

📦 Stile di confine

Controlla come viene visualizzato il bordo del widget.

Box Ombra

Aggiunge un'ombra sottile intorno al Convertitore di valute.

Linea di trasporto

Aggiunge un bordo visibile intorno al widget.

No Border

Rimuove completamente i confini e le ombre.

Ogni opzione crea una diversa enfasi visiva a seconda del tuo stile storefront.

🔤 Font Family

Controlla il carattere utilizzato durante il Convertitore di valute.

Utilizzare il carattere tema

Abbina il tuo Shopify tipografia tematica automaticamente.

Google Fonts

Scegli tra una varietà di caratteri supportati.

Esempi includono:

• Robot
• Apri Sans
• Montserrat
• Poppins

💡 Utilizzando il tuo carattere a tema, in genere crea l'esperienza di storefront più senza soluzione di continuità.

🎨 Colore dello sfondo

Controlla il colore di sfondo del Convertitore di valute.

Potete:

• Utilizzare il raccoglitore di colore
• Inserisci un valore di colore Hex

Scegli un colore che completa il tuo negozio rimanendo facile da identificare.

🖊️ Colore del testo

Controlla il colore del testo durante il Convertitore di valute.

Questo include:

• Moneta selezionata
• Opzioni di discesa
• Etichette

Per una migliore leggibilità, assicura un contrasto sufficiente tra il testo e i colori di sfondo.

🖱️ Colore del mouseover

Controlla il colore indicato quando i clienti superano le opzioni di valuta.

Questo aiuta i clienti a identificare chiaramente quale opzione stanno per selezionare.

Un sottile contrasto dal colore di sfondo di solito funziona meglio.

🔽 Colore dell'icona a goccia

Controlla il colore dell'icona a discesa.

Abbinando questo colore con il colore del testo spesso crea l'aspetto più coerente.

⚠️ Note importanti

Tema scuro sovrascrive alcuni colori

Quando si utilizza:

• Tema scuro
• Automatico Tema (mentre un shopper utilizza la modalità scura)

Il Convertitore di valute può utilizzare colori ottimizzati dark-mode invece dei colori di sfondo e testo selezionati.

Per la personalizzazione avanzata della modalità oscura, utilizzare Custom CSS.

Layer Theme utilizza il colore di sfondo

Il tema Modern Layer genera automaticamente il suo effetto stratificato utilizzando il colore di sfondo selezionato.

Cambiare il colore di sfondo cambia anche l'aspetto dello strato.

Modalità di visualizzazione si applica ovunque

Visualizza Le impostazioni della modalità influiscono:

• Visualizzazione valuta selezionata
• Opzioni di valuta a discesa

Entrambe le posizioni rimangono sempre sincronizzate.

Cambiamenti di carattere Applicare globalmente

Il carattere selezionato colpisce tutto il testo Convertitore di valute, tra cui:

• Moneta selezionata
• Opzioni di discesa
• Risultati della ricerca (se applicabile)

Hai bisogno di più personalizzazione?

Per lo styling avanzato oltre la scheda Design, utilizzare:

Avanzato → CSS personalizzato

Questo consente agli sviluppatori di applicare stili completamente personalizzati al Convertitore di valute.

🚀 Risultato finale

Una volta configurato con successo:

✅ Il Convertitore di valute corrisponde al tuo marchio di negozio

✅ Bandiere display nel tuo stile e forma preferito

✅ Colori e tipografia si sentono coerenti con il vostro tema

✅ La selezione della valuta rimane chiara e facile da usare

✅ Gli acquirenti internazionali godono di un'esperienza più lucida

✅ Il Convertitore di valute si sente come una parte naturale del tuo negozio

Un Convertitore di valute ben progettato non solo sembra meglio - aiuta anche a creare un'esperienza di shopping più fluida e affidabile per i clienti di tutto il mondo. 🌍

Aggiornato il: 10/09/2026