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

Aktualisiert am: 10/09/2026