> ## 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). # 🎨 Wie man Custom CSS für Hoppy Currency Converter > ℹ️ **Note:** Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team. Mit der Custom CSS-Funktion können Sie das Erscheinungsbild des Currency Converters über die Standard-Design-Einstellungen hinaus weiter anpassen. Egal, ob Sie Farben, Abstände, Rahmen, Schatten anpassen oder das Widget an eine stark angepasste Storefront anpassen möchten, Custom CSS bietet Ihnen zusätzliche Styling-Flexibilität, ohne Ihre Shopify Themendateien. In diesem Leitfaden erfahren Sie, wie Sie benutzerdefiniertes CSS für den Currency Converter sicher hinzufügen und verwalten können. --- # **⚠️ Bevor Sie beginnen** Bevor Sie Custom CSS verwenden, stellen Sie sicher: * Hoppy Currency Converter ist installiert und aktiv * Das App Embed ist aktiviert * Der Onboarding-Prozess ist abgeschlossen * Sie haben eine klare Vorstellung von den Styling-Änderungen, die Sie vornehmen möchten ⚠️ Falsches CSS kann das Aussehen des Widgets beeinflussen. Testen Sie Änderungen immer sorgfältig, bevor Sie sie live auf Ihrer Storefront lassen. --- # **✅ Schritt 1: Öffnen Sie die Custom CSS-Einstellungen** Offen **Hoppy Currency Converter** App von Deiner Shopify Admin. Dann: → Klicken **Fortgeschritten** → Scrollen zum **Experteneinstellungen** Abschnitt → Finden Sie die **Custom CSS** Feld Hier sollten alle benutzerdefinierten Styling-Regeln hinzugefügt werden. --- # **✅ Schritt 2: Verstehen der verfügbaren CSS-Klassen** Um den Currency Converter anzupassen, müssen Sie die entsprechenden CSS-Klassen anvisieren. Diese Klassen identifizieren verschiedene Teile des Widgets und ermöglichen es Ihnen, sie individuell zu gestalten. --- ## **🖥️ Desktop Währungskonverter** .futureblink currency desktop ### **Verwendung für** * Hintergrundfarben * Grenzen * Schatten * Polsterung * Margen Diese Klasse zielt auf den Währungskonverter ab, der auf Desktop-Geräten angezeigt wird. --- ## **📱 Mobile Währungskonverter** .futureblink currency mobile ### **Verwendung für** * Mobilfunkspezifischer Abstand * Mobiles spezifisches Styling * Mobile Layoutanpassungen Diese Klasse zielt auf den Währungskonverter ab, der auf mobilen Geräten angezeigt wird. --- ## **📋 Währung Dropdown** Futureblink-Währungs-Dropdown ### **Verwendung für** * Dropdown-Styling * Grenzen * Grenzradius * Schatten * Hintergrundfarben Diese Klasse steuert die Liste der verfügbaren Währungen, die nach dem Klick auf den Konverter angezeigt werden. --- ## **🔘 Währungsumschalter** Währungsumwandler ### **Verwendung für** * Button Styling * Ausgewähltes Aussehen der Währung * Grenzen * Abstand Diese Klasse steuert die sichtbare Währungsauswahl, mit der Kunden interagieren. --- ## **📄 Dropdown-Optionen** Option ### **Verwendung für** * Einzelwährungszeilen * Schriftgröße * Polsterung * Schwebeeffekte Diese Klasse zielt auf jede Währungsoption innerhalb des Dropdowns ab. --- # **✅ Schritt 3: Erstellen Sie Ihre CSS-Regeln** CSS verwendet eine einfache Struktur: wähler { Eigenschaft: Wert; } ### **Beispielstruktur** * Selector Was Sie stylen möchten * Eigentum Was Sie ändern wollen * Wert → Der neue Auftritt --- # **🎨 Beispiel: Hintergrundfarbe ändern** .futureblink currency desktop Hintergrundfarbe: #f8f9fa; } Dies ändert die Hintergrundfarbe des Desktop Currency Converters. --- # **🔲 Beispiel: Hinzufügen von Borders & Shadows** .futureblink currency desktop Grenze: 1px solid #ddd; Grenzradius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } Dies schafft ein saubereres Erscheinungsbild im Kartenstil. --- # **📋 Beispiel: Style the Currency Dropdown** Futureblink-Währungs-Dropdown Grenzradius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } Dies fügt abgerundete Ecken und einen stärkeren Dropdown-Schatten hinzu. --- # **📱 Beispiel: Mobile Spacing anpassen** .futureblink currency mobile Padding: 12px 16px; Margin-Top: 8px; } Dies erhöht den Abstand um das mobile Widget herum. --- # **⚠️ Wenn Styles nicht angewendet werden** Manchmal kann das Standard-Widget-Styling Ihr benutzerdefiniertes CSS überschreiben. Wenn dies geschieht, fügen Sie hinzu: !wichtig zur CSS-Erklärung. ### **Beispiel** .futureblink currency desktop Hintergrundfarbe: weiß !wichtig; border-radius: 10px !wichtig; } 💡 Verwendung `!important` wird empfohlen, wenn ein benutzerdefinierter Stil nicht erfolgreich angewendet wird. --- # **✅ Schritt 4: Speichern Sie Ihre Änderungen** Nach dem Hinzufügen Ihres CSS: → Klicken **Sparen** Die Styling-Änderungen werden sofort auf das Currency Converter-Widget angewendet. --- # **✅ Schritt 5: Testen Sie das Widget** Besuchen Sie Ihre Storefront und überprüfen Sie die Änderungen. Achten Sie darauf, zu testen: * Tischcomputer * Mobile Geräte * Währung Dropdown Verhalten * Verschiedene Storefront Seiten Dies hilft sicherzustellen, dass das Styling konsistent in Ihrem Shop funktioniert. --- # **🔍 Benötigen Sie mehr CSS-Klassen?** Wenn Sie weitere Teile des Currency Converters anpassen möchten: 1. Öffnen Sie Ihre Storefront 2. Rechtsklick auf den Currency Converter 3. Klicken **Inspektion** 4. Überprüfen Sie die HTML-Struktur 5. Suchen Sie zusätzliche Klassennamen Diese Klassen können dann im Custom CSS-Feld verwendet werden. --- # **⚠️ Wichtige Hinweise** ### **Änderungen gehen sofort live** Es gibt keinen Entwurfsmodus für Custom CSS. Alle Änderungen werden auf der Storefront sichtbar, sobald Sie sie speichern. --- ### **Custom CSS überschreibt Designeinstellungen** Wenn eine Styling-Regel in beiden existiert: * Entwurfseinstellungen * Custom CSS Die Custom CSS Version wird Vorrang haben. --- ### **Desktop & Mobile erfordern möglicherweise separates Styling** Änderungen an Desktop-Klassen wirken sich nicht automatisch auf mobile Klassen aus. Für die besten Ergebnisse, überprüfen Sie beide Versionen separat. --- ### **Theme-Updates können Custom CSS beeinflussen** Großhändler Shopify Theme-Updates können die Storefront-Struktur ändern. In diesem Fall müssen möglicherweise einige CSS-Regeln angepasst werden. --- # **🎉 Endergebnis** Einmal erfolgreich konfiguriert: ✅ Der Currency Converter passt zu Ihrem Storefront-Branding ✅ Farben, Abstände und Grenzen können angepasst werden ✅ Desktop- und mobile Layouts können unabhängig gestaltet werden ✅ Erweiterte visuelle Anpassungen werden möglich ✅ Styling kann ohne Bearbeitung angepasst werden Shopify Themendateien Die Verwendung von Custom CSS gibt Ihnen zusätzliche Kontrolle über das Erscheinungsbild des Währungskonverters und hilft, ein nahtloseres Storefront-Erlebnis zu schaffen. 🎨 ---