ℹ️ 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. 🌍

Aktualisiert am: 10/09/2026