ℹ️ Note: Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team.

Möchten Sie die vollständige Kontrolle darüber haben, wie Ihre Trust Badges auf Ihrer Storefront aussehen? 🎨

Während die Registerkarte Design umfangreiche Anpassungsoptionen bietet, Custom CSS gibt Ihnen die Flexibilität, erweiterte Styling-Anpassungen vorzunehmen, die über die Standardeinstellungen hinausgehen.

Egal, ob Sie den Abstand verfeinern, strenge Markenrichtlinien einhalten, benutzerdefinierte visuelle Effekte hinzufügen oder themenspezifische Stylingkonflikte lösen, Custom CSS bietet die volle kreative Kontrolle über Ihr Trust Badge-Design.

⚠️ Bevor Sie beginnen

Vor der Verwendung von Custom CSS:

• Stellen Sie sicher, dass Sie bereits ein Trust Badge erstellt haben.
• Haben Sie ein grundlegendes Verständnis von CSS oder Zugang zu einem Entwickler.
• Verstehen Sie, dass Custom CSS die Standard-Designeinstellungen außer Kraft setzen kann.

💡 Wenn Sie noch kein Trust Badge erstellt haben, erstellen Sie eines, bevor Sie mit diesem Leitfaden fortfahren.

🛠️ Schritt 1 - Öffnen Sie den Design Tab

Offen Hoppy Trust Badges App und navigieren Sie zum Trust Badge, das Sie anpassen möchten.

Dann:

➡️ Klicken Sie Design Tab.

Scrollen Sie nach unten, bis Sie die Custom CSS Schnitt.

Dieser Abschnitt enthält alle Tools, die zum Hinzufügen und Verwalten von benutzerdefiniertem Styling erforderlich sind.

🎨 Schritt 2 - Öffnen Sie den Custom CSS-Abschnitt

Innerhalb der Custom CSS Abschnitt finden Sie:

• Ein CSS Editor
• A View Guide Taste
• An Beantragen Taste
• Ein Starter CSS Template

Die Startervorlage enthält die verfügbaren Selektoren, die für Ihr Trust Badge angepasst werden können.

Dies macht es einfacher, mit dem Styling zu beginnen, ohne dass Storefront-Elemente manuell inspiziert werden müssen.

✍️ Schritt 3 - Fügen Sie Ihr benutzerdefiniertes CSS hinzu

Der Editor enthält mehrere vorkonfigurierte Selektoren, die auf bestimmte Trust Badge-Elemente abzielen.

Verfügbare Selektoren

Container

Auswahl

Beschreibung

.futureblink-trust-badge

Gesamter Trust Badge Container

Titel

Auswahl

Beschreibung

.futureblink-trust-badge .fb-title

Haupttitel

.futureblink-trust-badge.mobile .fb-title

Mobiles Title Styling

💡 Für schwimmende Abzeichen verwendet der Titelselektor .title statt .fb-title.

Unterrubrik

Auswahl

Beschreibung

.futureblink-trust-badge .subheading

Beschreibungstext

.futureblink-trust-badge.mobile .subheading

Mobile Description Styling

Icons

Auswahl

Beschreibung

.futureblink-trust-badge .icon

Abzeichensymbole

.futureblink-trust-badge.mobile .icon

Mobile Icon Styling

Call-To-Action-Taste

Auswahl

Beschreibung

.futureblink-trust-badge .cta-button

CTA-Button

.futureblink-trust-badge.mobile .cta-button

Mobiles CTA Button Styling

Beispiel: CSS

So fügen Sie dem Badge-Container eine Polsterung hinzu und passen den Titel an:

.futureblink-trust-badge {
padding: 20px;
}

.futureblink-trust-badge .fb-title {
color: #2c3e50;
font-size: 18px;
}

💡 Sie können bei Bedarf zusätzliche CSS-Selektoren, Medienanfragen, Animationen und Stylingregeln hinzufügen.

📱 Schritt 4 — Hinzufügen von Mobile-Specific Styling

Um mobile Geräte gezielt anzusprechen, verwenden Sie die .mobile Variation der Selektoren.

Beispiel:

.futureblink-trust-badge.mobile .fb-title {
font-size: 14px;
}

Die App wird automatisch verpackt .mobile Selektoren in einer mobilen Medienabfrage beim Rendern auf Ihrer Storefront.

Wenn Sie es vorziehen, Ihre eigenen Medienanfragen zu schreiben, werden diese genau wie eingegeben aufbewahrt.

✅ Schritt 5 - Wenden Sie Ihr CSS an

Sobald Ihr CSS hinzugefügt wurde:

➡️ Klicken Beantragen.

Die Live-Vorschau wird automatisch aktualisiert, sodass Sie Ihre Styling-Änderungen sofort überprüfen können.

Wenn Sie Ihr benutzerdefiniertes Styling später entfernen möchten:

➡️ Klicken Zurücksetzen.

Dadurch wird Ihr Custom CSS entfernt und die Standard-Design-Einstellungen wiederhergestellt.

👀 Schritt 6 - Überprüfen Sie die Vorschau

Nach der Anwendung Ihres CSS:

➡️ Überprüfen Sie die Desktop-Vorschau.

➡️ Überprüfen Sie die Mobile Preview.

Prüfen Sie, ob

• Der Text erscheint korrekt.
• Icons bleiben richtig ausgerichtet.
• Der Abstand sieht konsequent aus.
• Tasten werden wie erwartet angezeigt.

Falls Anpassungen erforderlich sind:

➡️ Aktualisieren Sie das CSS.

➡️ Klicken Beantragen noch einmal.

Die Vorschau wird nach jeder Änderung automatisch aktualisiert.

💾 Schritt 7 — Speichern und Veröffentlichen

Sobald Sie mit dem Design zufrieden sind:

➡️ Klicken Sparen.

➡️ Klicken Veröffentlichen.

⚠️ Sparen allein aktualisiert die Storefront nicht.

Das Trust Badge muss ebenfalls veröffentlicht werden, bevor Kunden die Änderungen sehen können.

⚠️ Wichtige Hinweise

Custom CSS überschreibt Standardeinstellungen

Custom CSS hat Vorrang vor den meisten Design-Tab-Einstellungen.

Wenn eine Farb-, Abstands- oder Typografieeinstellung ignoriert zu werden scheint, wird sie wahrscheinlich von Ihrem CSS überschrieben.

Automatisches !wichtiges Handling

Die App fügt automatisch hinzu !important Priorität auf CSS-Deklarationen beim Rendern von Stilen auf der Storefront.

Sie müssen nicht hinzufügen !important manuell.

Scoped Styling

Custom CSS wird automatisch auf das spezifische Trust Badge, das bearbeitet wird, beschränkt.

Dies verhindert Styling-Konflikte mit:

• Andere Trust Badges
• Themenelemente
• Sonstige Storefront-Komponenten

Leere Selektoren sind erlaubt

Sie müssen nicht jeden in der Vorlage bereitgestellten Selektor verwenden.

Fügen Sie nur Stile zu den Elementen hinzu, die Sie anpassen möchten.

CSS-Validierung

Der Editor validiert keine CSS-Syntax.

Wenn ein Stil nicht korrekt angewendet wird:

➡️ Überprüfen Sie die Selektornamen.

➡️ Überprüfen Sie Zahnspangen und Semikolons.

➡️ Überprüfen Sie das CSS auf Syntaxfehler.

❓ Fehlerbehebung

Wenn Ihre Styles nicht korrekt erscheinen:

➡️ bestätigen, dass Beantragen wurde angeklickt.

➡️ Überprüfen Sie, ob das Trust Badge wurde Gerettet und Veröffentlicht.

➡️ Überprüfen Sie, ob die Selektornamen genau mit der bereitgestellten Vorlage übereinstimmen.

➡️ Testen Sie in einem Incognito- oder Private-Browserfenster.

➡️ Erfrischen Sie die Storefront, um zwischengespeicherte Stile zu löschen.

🎉 Endergebnis

✅ Ihr Trust Badge kann über die Standard-Designeinstellungen hinaus angepasst werden.

✅ Branding, Abstand, Typografie und Icon-Styling können präziser gesteuert werden.

✅ Desktop- und mobile Layouts können unabhängig gestaltet werden.

✅ Benutzerdefinierte Stile bleiben für das ausgewählte Trust Badge isoliert.

Custom CSS bietet eine flexible Möglichkeit, ein ausgefeilteres und markenkonsistenteres Trust Badge-Erlebnis zu schaffen, während die Einfachheit der integrierten Design-Tools der App erhalten bleibt. ✨

Aktualisiert am: 10/09/2026