> ## 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). # 🎨 Währungskonverter – Design & Styling > ℹ️ **Note:** Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team. Der Design & Styling-Bereich gibt Ihnen die vollständige Kontrolle über das Aussehen des Währungskonverters auf Ihrer Storefront. Von Flaggenstilen und Typografie bis hin zu Farben, Grenzen und Anzeigepräferenzen helfen Ihnen diese Einstellungen, einen Währungskonverter zu erstellen, der sich wie ein natürlicher Teil Ihres Shops anfühlt und gleichzeitig ein reibungsloses Erlebnis für internationale Käufer bietet. # **⚠️ Bevor Sie beginnen** Um auf die Design & Styling-Einstellungen zuzugreifen: → offen **Hoppy Currency Converter** → Abschluss des Onboarding-Prozesses → Öffnen Sie die **Design** Spitze 💡 Alle Designänderungen werden nach dem Speichern auf der Storefront sichtbar. --- ## **🏳️ Flaggenanpassung** Dieser Abschnitt steuert, wie Flags im gesamten Währungskonverter erscheinen. Änderungen gelten für beide: * Die ausgewählte Währungsanzeige * Die Dropdown Währungsliste --- ### **🎨 Flaggenstil** Steuert das visuelle Erscheinungsbild von Flaggen. #### **Traditionell** Zeigt Standard-Flaggenbilder ohne zusätzliches Styling an. **Am besten für:** Minimale und professionelle Storefronts, bei denen sich Flaggen natürlich in das Design einfügen sollen. --- #### **modern** Zeigt Flaggen mit: * Abgerundete Ecken * Weiche Schatten * Subtile Grenzen * Verbesserte visuelle Behandlung **Am besten für:** Moderne Schaufenster, die den Currency Converter als Premium-Designelement hervorheben möchten. 💡 Der gewählte Stil gilt für jedes Flag, das vom Currency Converter angezeigt wird. --- ### **🔘 Flaggenthema** Steuert die Form der Flaggen. #### **rund** Flaggen erscheinen mit sanft abgerundeten Ecken. #### **Kreis** Flaggen erscheinen in einer kreisförmigen Form. #### **flach** Flaggen erscheinen mit scharfen Ecken und einem traditionellen Look. Das ausgewählte Thema hilft, die visuelle Gesamtpersönlichkeit des Widgets zu bestimmen. --- ## **🔘 Währung Selector Customization** Diese Einstellungen steuern das Aussehen des Haupt-Währungswandler-Widgets. --- ### **🎨 Thema** Steuert den gesamten visuellen Stil des Currency Converter-Containers. #### **Ausfall** Ein sauberes und einfaches Aussehen, das sich natürlich in die meisten einfügt Shopify Themen. #### **Moderne Schicht** Erstellt einen mehrschichtigen visuellen Effekt hinter dem Widget für zusätzliche Tiefe und Betonung. 💡 Der Modern Layer-Effekt verwendet automatisch Ihre ausgewählte Hintergrundfarbe. --- ### **👀 Anzeigemodus** Steuert, welche Informationen innerhalb des Währungskonverters erscheinen. #### **Show Flag und Währung** Zeigt sowohl die Flagge als auch die Währungsinformationen an. #### **Nur Show Flag** Zeigt nur Flaggen an. #### **Nur Währung anzeigen** Zeigt nur Währungsinformationen an. Diese Einstellung gilt sowohl für den Selektor als auch für die Dropdown-Liste. --- ### **🌓 Farbthema** Kontrolliert, ob der Currency Converter ein helles oder dunkles Erscheinungsbild verwendet. #### **Licht** Verwendet einen hellen Hintergrund mit dunklerem Text. #### **Dunkel** Verwendet einen dunklen Hintergrund mit hellerem Text. #### **Automatik** Passt automatisch die Systempräferenz des Käufers an. 💡 Der automatische Modus hilft dem Währungskonverter, sich auf natürliche Weise an verschiedene Geräte und Browserumgebungen anzupassen. --- ### **🔤 Nur Währungscodes anzeigen** Kontrolliert, wie Währungsnamen erscheinen. #### **Aktiviert** Zeigt kurze Währungscodes an. Beispiele: * USD * EUR * GBP #### **Behinderte** Zeigt vollständige Währungsnamen und -codes an. Beispiele: * US-Dollar (USD) * Euro (EUR) * Britisches Pfund (GBP) Dies kann dazu beitragen, den Dropdown bei der Unterstützung vieler Währungen kompakter zu gestalten. --- ## **🎨 Theme Customization** Dieser Abschnitt steuert das Kerndesign des Currency Converters. --- ### **📦 Grenzstil** Steuert, wie der Widget-Rahmen angezeigt wird. #### **Box Shadow** Fügt einen subtilen Schatten um den Currency Converter herum hinzu. #### **Grenzlinie** Fügt einen sichtbaren Rahmen um das Widget herum hinzu. #### **Keine Grenze** Entfernt Grenzen und Schatten vollständig. Jede Option erzeugt eine andere visuelle Betonung, abhängig von Ihrem Storefront-Stil. --- ### **🔤 Schriftfamilie** Steuert die Schriftart, die im gesamten Währungskonverter verwendet wird. #### **Verwenden Theme Font** Passt Ihre Shopify Thema Typografie automatisch. #### **Google Fonts** Wählen Sie aus einer Vielzahl von unterstützten Fonts. Beispiele hierfür sind: * Roboto * Offene Sans * Montserrat * Mobben 💡 Die Verwendung Ihrer Theme-Font schafft in der Regel das nahtloseste Storefront-Erlebnis. --- ### **🎨 Hintergrundfarbe** Steuert die Hintergrundfarbe des Currency Converters. Sie können: * Verwenden Sie den Color Picker * Geben Sie einen Hex-Farbwert ein Wählen Sie eine Farbe, die Ihre Storefront ergänzt und dabei leicht zu identifizieren ist. --- ### **🖊️ Textfarbe** Steuert die Farbe des Textes im gesamten Währungskonverter. Dazu gehören: * Ausgewählte Währung * Dropdown-Optionen * Etiketten Stellen Sie für eine optimale Lesbarkeit einen ausreichenden Kontrast zwischen den Text- und Hintergrundfarben sicher. --- ### **🖱️ Mouseover Farbe** Steuert die Farbe, die angezeigt wird, wenn Kunden über Währungsoptionen schweben. Dies hilft den Kunden klar zu erkennen, welche Option sie auswählen möchten. Ein subtiler Kontrast zur Hintergrundfarbe funktioniert normalerweise am besten. --- ### **🔽 Dropdown Icon Farbe** Steuert die Farbe des Dropdown-Indikatorsymbols. Das Abgleichen dieser Farbe mit Ihrer Textfarbe erzeugt oft das konsistenteste Erscheinungsbild. --- ## **⚠️ Wichtige Hinweise** ### **Dark Theme überschreibt einige Farben** Bei Verwendung: * Dark Theme * Automatik Theme (während ein Käufer den dunklen Modus verwendet) Der Währungskonverter kann optimierte Farben im Dunkelmodus anstelle der ausgewählten Hintergrund- und Textfarben verwenden. Für erweiterte Dark-Mode-Anpassung verwenden Sie Custom CSS. --- ### **Layer Theme verwendet Hintergrundfarbe** Das Modern Layer Theme generiert automatisch seinen geschichteten Effekt mit der ausgewählten Hintergrundfarbe. Das Ändern der Hintergrundfarbe verändert auch das Erscheinungsbild der Schicht. --- ### **Anzeigemodus gilt überall** Anzeige Moduseinstellungen betreffen: * Die ausgewählte Währungsanzeige * Dropdown Währungsoptionen Beide Standorte bleiben immer synchronisiert. --- ### **Schriftwechsel gelten weltweit** Die ausgewählte Schriftart wirkt sich auf den gesamten Currency Converter-Text aus, einschließlich: * Ausgewählte Währung * Dropdown-Optionen * Suchergebnisse (falls zutreffend) --- ### **Brauchen Sie mehr Customization?** Für erweitertes Styling über den Tab Design hinaus, verwenden Sie: **Erweitert → Custom CSS** Dies ermöglicht es Entwicklern, vollständig benutzerdefinierte Stile auf den Currency Converter anzuwenden. --- # **🚀 Endergebnis** Einmal erfolgreich konfiguriert: ✅ Der Currency Converter passt zu Ihrem Storefront-Branding ✅ Flaggen werden in Ihrem bevorzugten Stil und Ihrer bevorzugten Form angezeigt ✅ Farben und Typografie fühlen sich konsistent mit Ihrem Thema an ✅ Währungsauswahl bleibt klar und einfach zu bedienen ✅ Internationale Käufer genießen ein polierteres Erlebnis ✅ Der Currency Converter fühlt sich an wie ein natürlicher Teil Ihrer Storefront Ein gut gestalteter Währungskonverter sieht nicht nur besser aus - er hilft auch, ein reibungsloseres und vertrauenswürdigeres Einkaufserlebnis für Kunden auf der ganzen Welt zu schaffen. 🌍 ---