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

Die Vertrauensabzeichen & Icons Abschnitt hilft Händlern, ihre Glaubwürdigkeit im Geschäft visuell zu verbessern, indem anpassbare Vertrauensindikatoren wie sichere Zahlungssymbole, Garantieabzeichen, Lieferhighlights und mehr verwendet werden.

Dieser Abschnitt ermöglicht die vollständige Kontrolle über:

• Badge Aussehen
• Layoutverhalten
• Typografie
• Animationen
• Hintergrunddesign
• Mobile Reaktionsfähigkeit
• Advanced CSS Anpassung

🎨 Meldebogen

Was es tut

Ändert das visuelle Gesamtthema und die Farbpalette Ihrer Abzeichen.

Wie zu verwenden

Klicken Sie auf den Dropdown, um aus Presets wie:

• Schwarzer Freitag
• Minimal
• Minze
• Dämmerung

Diese Vorlagen passen sofort zu Ihrem Shop-Branding und visuellem Stil.

👀 Sichtbarkeit

Was es tut

Steuert, welche Geräte Ihre Vertrauensabzeichen sehen können.

Verfügbare Optionen

• Desktop und Mobile → Zeigt überall Abzeichen
• Nur Desktop → Versteckt auf mobilen Geräten
• Nur mobil Versteckt auf Desktop-Geräten

Dies hilft Händlern, gerätespezifische Erlebnisse zu erstellen.

↔️ Layout-Orientierung (Desktop & Mobile)

Was es tut

Bestimmt, wie einzelne Abzeichen angeordnet sind.

Verfügbare Optionen

Horizontal

Abzeichen erscheinen nebeneinander in einer einzigen Reihe.

Vertikal

Badges stapeln sich in einem spaltenlayout untereinander.

Für Desktop- und Mobile-Layouts können separate Steuerelemente verfügbar sein.

📱 Badge Display Verhalten (nur mobil)

Was es tut

Steuert, wie sich Abzeichen auf kleineren mobilen Bildschirmen verhalten, wenn der Platz begrenzt wird.

Verfügbare Optionen

Rollend

Kunden können horizontal wischen, um alle Abzeichen in einer Reihe anzuzeigen.

Gurtband

Badges bewegen sich automatisch in die nächste Zeile, so dass alle zusammen sichtbar sind.

✨ Animation

Was es tut

Fügt Eingabeanimationen hinzu, wenn Abzeichen auf der Seite geladen werden.

Wie zu verwenden

Wählen Sie einen Animationsstil aus dem Dropdown.

Animationsoptionen umfassen:

• Slide In
• Pelz
• Fade Up
• Und mehr

Animationen helfen, die Aufmerksamkeit des Kunden zu erregen, ohne dass zusätzliche Designarbeiten erforderlich sind.

🖼️ Hintergrundstil

Was es tut

Steuert das Hintergrundbild hinter dem Badge-Bereich.

Verfügbare Optionen

• Einzelfarben
• Gefälle
• Tricolor Gradient
• Muster

Zusätzliche Anpassung

Händler können auch anpassen:

• Gradientenwinkelgrad
• Einzelfarben
• Hex-Farbcode
• Muster Aussehen

Dies hilft, Abzeichen visuell in das Storefront-Design einzufügen.

📐 Grenzen und Ecken

Eckenradius (px)

Kontrolliert, wie abgerundet die äußeren Ecken erscheinen.

• Höhere Werte → Mehr abgerundete Ecken
• 0 → Scharfe quadratische Ecken

Randgröße (px)

Stellt die Dicke des äußeren Randes ein.

Randfarbe

Ändert die Farbe der Grenzlinie.

Grenzstil

Verfügbare Stile können umfassen:

• fest
• gepunktet
• Gestrichelt
• Keine

📏 Spacing (Desktop vs Mobile)

Der Abstand kann separat für Desktop- und Mobilgeräte angepasst werden.

Dies stellt sicher, dass Ihr Badge-Layout über alle Bildschirmgrößen hinweg ausgewogen und reaktionsschnell bleibt.

Inside Spacing (Padding)

Kontrolliert den Abstand innerhalb des Badge-Containers.

Verfügbare Anweisungen:

• oben
• Boden
• Links
• rechts

So entsteht eine Atempause zwischen Inhalt und Grenzen.

Außerhalb des Abstands (Marge)

Fügt Abstand außerhalb des Badge-Blocks hinzu.

Verfügbare Kontrollen:

• Höchste Marge
• Unterste Marge

Nützlich zum Trennen von Abzeichen von umgebenden Storefront-Abschnitten.

Icon Spacing

Steuert den Abstand zwischen einzelnen Abzeichen / Icons.

🔷 Icon Styling

Abzeichen/Icon Shape

Was es tut

Fügt dekorative Hintergründe hinter einzelnen Icons hinzu.

Verfügbare Optionen

• Keine
• Schutzschild
• Emblem
• Kreis
• Quadrat

📏 Größe & Customization

Desktop / Mobile Größe (px)

Steuert die Symbolgröße unabhängig für:

• Desktop
• Mobil

Hintergrundfarbe

Ändert die Hintergrundfarbe hinter der Symbolform.

Eckenradius

Passt an, wie abgerundet der Icon-Hintergrund wird.

🚀 Pro Styling (Fortgeschritten)

Icon Animation

Fügt kontinuierliche Bewegungseffekte zu Icons hinzu.

Beispiele können sein:

• Schütteln
• Puls
• Hüllen

Icon Hover Animation

Triggert Animationen, wenn Kunden über Icons schweben.

Beispiele können sein:

• Float
• Wackeln
• Holografisch

Icon Shadow

Fügt Tiefe und Schichtungseffekte unter Verwendung von Schatten hinzu.

Beispiele können sein:

• Weichglühen
• Subtile Tropfen Schatten

➖ Icon-Separator

Was es tut

Fügt Trennlinien zwischen einzelnen Badge-Icons hinzu.

Wie zu verwenden

Ermöglicht die Icon Separator hinzufügen Checkbox.

Dies hilft, einen saubereren Abstand und eine visuelle Trennung zu schaffen.

✍️ Typografie (Text & Fonts)

Schriftartauswahl

Was es tut

Steuert den Typografiestil, der für Badge-Titel und Unterüberschriften verwendet wird.

Verfügbare Optionen

• Verwenden Sie Ihre Shopify Thema:
• Wählen Sie Custom Fonts
• Google Fonts Unterstützung

Die Verwendung der Theme-Schrift hilft, die Konsistenz der Storefront aufrechtzuerhalten.

📝 Titel & Untertitel Styling

Größe (px)

Kontrolliert die Textgröße.

Farbe

Ändert die Textfarbe mit:

• Farbwähler
• Hex-Code

📐 Textabstand

Was es tut

Steuert den Abstand zwischen Textzeilen für eine bessere Lesbarkeit.

Durch die Erhöhung des Abstands können sich die Inhalte sauberer und Premium fühlen.

💻 Custom CSS (für Entwickler)

Erweitertes Feature

Wenn integrierte Einstellungen nicht ausreichen, können Händler ein vollständig benutzerdefiniertes CSS-Styling hinzufügen.

Verfügbare Zielklassen

Gesamter Badge Container

.futureblink-trust-badge

Titel Text

.fb-Titel

Teilüberschrift Text

.Unterposition

CTA-Taste

.cta-Button

⚡ Anwendung von Custom CSS

Wie zu verwenden

1. Fügen Sie Ihr eigenes CSS in den Editor ein
2. Klicken Beantragen
3. Vorschau ändert sich sofort

❗ Überschreibend Shopify Themenstile

Manchmal Shopify Themen können Ihr individuelles Styling überschreiben.

Wenn Ihre CSS-Änderungen nicht korrekt angezeigt werden, verwenden Sie:

!wichtig

Dies zwingt Ihr Styling, Vorrang vor Themenstilen zu haben.

Beispiel:

.fb-title
Farbe: rot !wichtig;
}

✅ Endergebnis

Nach erfolgreicher Konfiguration helfen Trust Badges & Icons, ein professionelleres, vertrauenswürdigeres und conversion-orientiertes Storefront-Erlebnis zu schaffen.

Mit dem richtigen Styling an Ort und Stelle:

• ✅ Store Glaubwürdigkeit verbessert
• ✅ Wichtige Garantien werden sichtbarer
• ✅ Das Vertrauen der Kunden steigt
• ✅ Store Branding fühlt sich polierter an
• ✅ Mobile Reaktionsfähigkeit verbessert
• ✅ Badge-Layouts werden sauberer und organisierter
• ✅ Visuelle Konsistenz über die Storefront wird stärker

Gut gestaltete Vertrauensabzeichen können signifikant sein

Aktualisiert am: 10/09/2026