Trust-Badge erstellen

Ein Trust-Badge ist ein Block aus Symbolen für Zahlung, Sicherheit, Versand, Garantie oder Richtlinien, optional mit Titel und Beschreibung. Der Editor hat zwei Tabs: Design für Inhalt und Gestaltung und Placement für die integrierte Position auf der Produktseite und den Shortcode.

1. Trust Badges öffnen

   Öffnen Sie in Ihrem Shopify Admin Sami Product Labels, wählen Sie in der App-Navigation Extra Features und dann den Tab Trust Badges.

   Wenn Sie bereits Trust-Badges haben, zeigt die Seite sie in einer Tabelle an. Ist die Liste leer, sehen Sie stattdessen den Bereich Create your first trust badge.

   

   Der Tab „Trust Badges“ enthält die Aktion zum Erstellen, die gespeicherten Trust-Badges und die empfohlenen Vorlagen.

2. Startpunkt wählen

   Klicken Sie auf Create trust badge. Die Schaltfläche erscheint im Seitenkopf, wenn die Tabelle sichtbar ist, oder im Bereich für den leeren Zustand, solange Sie noch kein Trust-Badge erstellt haben.

   Scrollen Sie zu Featured templates. Klicken Sie auf View all templates, um alle vier Designs anzuzeigen: Eco-Friendly template, With payment method, Policies store template und Badge box template. Klicken Sie bei einer Vorlage auf Select, um sie mit bereits angewendeten Symbolen und Gestaltungsoptionen zu öffnen.

   Beide Wege öffnen den Editor im Tab Design.

   

   Erstellen Sie ein Trust-Badge von Grund auf oder wählen Sie eine der vier empfohlenen Vorlagen.

3. Trust-Badge benennen

   Das Namensfeld befindet sich über der Vorschau. Ersetzen Sie New Trust Badge durch einen Namen mit bis zu 50 Zeichen. Dieser Name dient nur dazu, das Trust-Badge in der App zu erkennen, und wird Ihrer Kundschaft nicht angezeigt.

   

   Verwenden Sie einen eindeutigen internen Namen, damit Sie das Trust-Badge in der Tabelle leicht finden.

4. Titel und Beschreibung hinzufügen

   Öffnen Sie unter Content & Badges die Felder Title und Description und geben Sie den optionalen Text ein, der über den Symbolen erscheint. Beide Felder unterstützen Fett, Kursiv, Unterstreichen, Emojis, Textausrichtung und den Quellcode-Modus.

   Die Felder sind sprachspezifisch. Ihre Beschriftungen zeigen die aktive Sprache an, zum Beispiel Title (en). Über die Sprachauswahl über der Vorschau bearbeiten Sie eine andere Sprache.

   Lassen Sie beide Felder leer, wenn nur die Symbole angezeigt werden sollen.

   

   Title und Description sind optionale Rich-Text-Felder, die Sie für jede Sprache separat bearbeiten.

5. Badge-Symbole hinzufügen

   Klicken Sie unter Badges auf Add Badge und wählen Sie dann:

   Option	Funktion
   Select badge image	Öffnet den Dialog Select Image.
   Line break	Beginnt mit den folgenden Symbolen eine neue Zeile.

   Suchen Sie in Select Image mit Search images nach einem Symbol. Die Quelle Library enthält mehr als 400 Bilder zu Zahlung, Sicherheit, Versand, Garantie und Richtlinien; die aktuelle Anzahl der Elemente steht neben dem Namen der Quelle. Wählen Sie ein oder mehrere Bilder aus und klicken Sie dann auf Select Image.

   Wechseln Sie zu Design your Images, um hochgeladene, per URL importierte oder zugehörige eigene Designs zu verwenden. Klicken Sie nach der Auswahl eines Bildes auf Edit with AI, wenn Sie vor dem Hinzufügen eine Variante erstellen möchten.

   

   Durchsuchen Sie die integrierte Bibliothek oder wechseln Sie zu „Design your Images“ und bestätigen Sie dann Ihre Auswahl.

6. Jedes Symbol anordnen und konfigurieren

   Jedes Symbol erscheint als Zeile in der Liste Badges. Ziehen Sie eine Zeile am Griff, um die Anzeigereihenfolge zu ändern, oder klicken Sie auf Delete, um sie zu entfernen. Mit Line break-Elementen legen Sie fest, wo eine neue Zeile beginnt.

   Klicken Sie in der Zeile auf die Schaltfläche General, um die Einstellungen zu öffnen:

   • Change Image – ersetzt das ausgewählte Symbol.
   • Link – lässt das Symbol eine URL öffnen; mit der Option für externe Links öffnet sie sich in einem neuen Tab.
   • Tooltip – fügt einen Text mit bis zu 150 Zeichen hinzu, der erscheint, wenn man mit dem Mauszeiger auf das Symbol zeigt.
   • Layout colors – färbt unterstützte Ebenen in integrierten SVG-Symbolen um.

   

   Ziehen Sie Symbole, um sie neu anzuordnen, und ändern Sie unter „General“ Bild, Link, Tooltip oder unterstützte Farben.

7. Trust-Badge-Block gestalten

   Mit den einklappbaren Design-Bereichen passen Sie das Trust-Badge an Ihr Theme an:

   Bereich	Wichtigste Einstellungen
   Design Main Section	Blockbreite, Außenabstand, Innenabstand, Rahmenstärke, -stil und -farbe, Schatten und Eckenradius.
   Design title & description	Eigene Schriftart, Farbe, Schriftgröße und Zeilenhöhe für Titel und Beschreibung.
   Design Badge	Stil „Mono“, „Mono card“, „Original“ oder „Original card“; Ausrichtung; Breite und Höhe; Außenabstand; Animation.
   Responsive size	Separate Symbolbreite und -höhe für Tablet und Smartphone.
   Advance Section	Eigenes CSS und eine anklickbare CSS-Referenz für die Selektoren des Trust-Badges.

   Die verfügbaren Animationen sind SlideInUp, SadeInDown, BounceIn, FlipInX und ZoomIn. Aktivieren Sie Animation, wählen Sie einen Effekt und sehen Sie ihn sich mit der Wiedergabetaste in der Vorschau an.

   

   Öffnen Sie die einzelnen Design-Bereiche, um Container, Text, Symbole, responsive Größen und eigenes CSS zu gestalten.

   Hinweis

   Klicken Sie unter Advance Section in CSS reference auf einen Selektor, um dessen Regel mit passendem Geltungsbereich in den Editor für eigenes CSS einzufügen.

8. Anzeigeort des Trust-Badges festlegen

   Wechseln Sie zum Tab Placement:

   Option	Funktion
   Product page	Aktivieren Sie den Schalter, um das Trust-Badge auf allen Produktseiten an der integrierten Position der App anzuzeigen.
   Shortcode	Kopieren Sie das Snippet, wenn Sie das Trust-Badge an einer individuellen Position in Ihrem Theme platzieren möchten.

   Ein nicht gespeichertes Trust-Badge verwendet data-id="new" in seinem Shortcode. Speichern Sie das Trust-Badge, bevor Sie dieses Snippet in Ihrem Theme platzieren.

   

   Nutzen Sie die integrierte Position auf der Produktseite oder kopieren Sie den Shortcode für eine individuelle Position.

   Hinweis

   Den vollständigen Ablauf im Theme-Editor finden Sie unter Trust-Badge per Shortcode platzieren.

9. Vorschau ansehen und speichern

   Mit den Bedienelementen über der Vorschau können Sie:

   • die Bearbeitungssprache wechseln;
   • die Product page in der Vorschau ansehen;
   • zwischen Desktop- und Mobilansicht wechseln;
   • das Beispielprodukt ein- oder ausblenden;
   • das Trust-Badge auf Active oder Draft setzen.

   Prüfen Sie die Vorschau und klicken Sie dann oben rechts auf Save. Klicken Sie auf Discard, wenn Sie die Seite verlassen möchten, ohne Ihre ungespeicherten Änderungen zu behalten.

   

   Sehen Sie sich das Ergebnis in der Vorschau an, wählen Sie „Active“ oder „Draft“ und speichern Sie dann das Trust-Badge.

Nächste Schritte

• Trust-Badges im Überblick – verwalten Sie gespeicherte Trust-Badges, Vorlagen, Status und Platzierung.
• Trust-Badge per Shortcode platzieren – fügen Sie das Trust-Badge an einer exakten Position in Ihrem Theme ein.

Tipp

Brauchen Sie Hilfe?

Wenn Sie bei diesen Schritten auf Schwierigkeiten stoßen, schreiben Sie uns an [email protected].