Du hast das Trustbadge® noch nicht integriert? Dann führe zunächst die Standardintegration durch, bevor du an dieser Stelle weitermachst. Dieser Artikel hilft dir dabei: Wie kann ich das Trustbadge® ohne Plugin in meinen Shop integrieren?
Im oben verlinkten Artikel findest du auch den Trustbadge-Code, der die Grundlage für die im folgenden Text beschriebenen Anpassungen ist.
Du kannst die mobile Darstellung des Trustbadge unabhängig von der Darstellung in der Desktop-Ansicht konfigurieren. Innerhalb der Standardintegration sind für das mobile Trustbadge folgende Regeln festgelegt:
- Das Trustbadge stellt deine gesammelten Bewertungssterne und – nach erfolgreicher Zertifizierung – dein Gütesiegel dar.
- Das Trustbadge wird auf der linken Bildschirmseite angezeigt.
- Das Trustbadge wird 10 Pixel oberhalb des unteren Bildschirmrands angezeigt.
Selbstverständlich kannst du diese Regeln an deine individuellen Anforderungen anpassen. In diesem Artikel erklären wir dir, wie du mithilfe des Trustbadge®-Codes…
- … die Darstellung des mobilen Trustbadge verändern kannst.
- … das Trustbadge an einer anderen Stelle deiner mobilen Ansicht platzieren kannst.
- … den Fade-out-Modus deaktivieren kannst.
Wie kann ich das mobile Trustbadge anders darstellen?
Innerhalb der Standardintegration stellt das Trustbadge deine gesammelten Bewertungssterne und – nach erfolgreicher Zertifizierung – dein Gütesiegel dar.
Mithilfe des Trustbadge-Codes hast du drei Möglichkeiten, die Darstellung des Trustbadge zu verändern:
- Du kannst die gesammelten Bewertungssterne ausblenden und nur noch dein Gütesiegel anzeigen.
- Du kannst auch in der mobilen Ansicht deiner Webseite die Desktop-Variante des Trustbadge verwenden.
- Du kannst in der mobilen Ansicht die Topbar-Variante des Trustbadge verwenden.
Bewertungssterne ausblenden
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-disable-reviews="false"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-mobile-disable-reviews="true"
Damit hast du die Bewertungssterne in der mobilen Ansicht erfolgreich ausgeblendet.
Desktop-Variante des Trustbadge in der mobilen Ansicht nutzen
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-disable-mobile="false"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-disable-mobile="true"
Damit nutzt du auch in der mobilen Ansicht die Desktop-Variante des Trustbadge.
Topbar-Variante des Trustbadge nutzen
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-enable-topbar="false"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-mobile-enable-topbar="true"
Damit nutzt du in der mobilen Ansicht die Topbar-Variante des Trustbadge.
Die Topbar-Variante des Trustbadge ist fest am oberen Bildschirmrand positioniert. Du kannst diese Positionierung nicht verändern.
Wie kann ich das mobile Trustbadge an einer anderen Stelle platzieren?
Innerhalb der Standardintegration wird das mobile Trustbadge auf der linken Bildschirmseite und 10 Pixel oberhalb des unteren Bildschirmrands angezeigt.
Mithilfe des Trustbadge-Codes kannst du das mobile Trustbadge…
… horizontal vom linken Bildschirmrand in die Mitte oder nach rechts verrücken.
… vertikal nach oben oder unten verschieben.
… flexibel in der mobilen Ansicht deiner Webseite platzieren.
Trustbadge am rechten Bildschirmrand oder in der Mitte platzieren
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-position="left"
-
Die Codezeile durch eine der folgenden Codezeilen ersetzen:
- Wenn du das Trustbadge auf der rechten Seite platzieren möchtest:data-mobile-position="right"
- Wenn du das Trustbadge in der Mitte platzieren möchtest:
data-mobile-position="center"
Damit hast du das Trustbadge erfolgreich am rechten Bildschirmrand oder in der Mitte platziert.
Trustbadge nach oben oder unten verschieben
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-y-offset="0"
- Die 0 durch die Pixelanzahl ersetzen, um die das Trustbadge nach oben oder unten verschoben werden soll.
Zwei Beispiele:
- Du möchtest das Trustbadge um 5 Pixel nach oben verschieben? Dann verwende folgende Codezeile:
data-mobile-y-offset="5"
-
Du möchtest das Trustbadge nach unten verschieben? Dann nutze Minuswerte. Um das Trustbadge 5 Pixel nach unten zu verschieben, verwende folgende Codezeile:
data-mobile-y-offset="-5"
Nutze hierbei ausschließlich Werte bis -10.
Damit hast du das Trustbadge erfolgreich nach unten oder oben verschoben.
Trustbadge flexibel auf deiner Webseite platzieren
Neben der bisher beschriebenen Standardvariante des Trustbadge kannst du auch die Custom-Variante in die mobile Ansicht deiner Webseite integrieren.
Die Custom-Variante unterscheidet sich in drei Punkten von der Standardvariante:
-
Sie sieht anders aus als die Standardvariante. Hier siehst du die Custom-Variante:
(mit Bewertungssternen) (ohne Bewertungssterne) - Du kannst die Custom-Variante vollkommen flexibel auf deiner Webseite platzieren.
- Du kannst die Größe der Custom-Variante verändern.
Standardmäßig hat die Custom-Variante eine Breite von 156 Pixeln und eine Höhe von 78 Pixeln. Im Folgenden erklären wir dir, wie du die Größe des Trustbadge verändern kannst. Du bist mit den oben genannten Standardwerten einverstanden? Dann überspringe die nächsten beiden Schritte und fahre mit Schritt 3 fort.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-custom-width="156"
- Die 156 durch die Pixelanzahl ersetzen, die du als Breite des Trustbadge bestimmen möchtest.
Welche Pixelanzahl du an dieser Stelle auswählen kannst, hängt davon ab, ob du die Bewertungssterne ausgeblendet hast.
- Hast du die Bewertungssterne ausgeblendet? Dann wähle eine Pixelanzahl zwischen 32 und 58.
- Hast du die Bewertungssterne nicht ausgeblendet? Dann wähle eine Pixelanzahl zwischen 100 und 500.
Die Pixelanzahl für die Höhe des Trustbadge ergibt sich automatisch aus der von dir gewählten Breite. Sie muss nicht von dir bestimmt werden.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-enable-custom="false"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-mobile-enable-custom="true"
- Den Quellcode deiner Webseite öffnen.
- Die folgende Codezeile an der Position deiner Webseite platzieren, an der das Trustbadge erscheinen soll:
<div id="trustbadgeCustomMobileContainer"></div>
Mögliche Positionen wären beispielsweise der Header oder der Footer.
Damit hast du das Trustbadge erfolgreich an der von dir ausgewählten Stelle deiner Webseite integriert.
Wie kann ich den Fade-out-Modus des mobilen Trustbadge deaktivieren?
In der mobilen Ansicht ist der Fade-out-Modus automatisch aktiviert. In diesem Modus wird das Trustbadge im oberen Bereich jeder Seite angezeigt. Es wird allerdings langsam ausgeblendet, sobald deine Kundschaft nach unten scrollt. Es erscheint erneut, sobald deine Kundschaft in den oberen Bereich der Seite zurückkehrt. Du kannst den Fade-out-Modus deaktivieren, sodass das Trustbadge nicht mehr ausgeblendet wird.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-enable-fadeout="true"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-mobile-enable-fadeout="false"
Damit hast du den Fade-out-Modus in der mobilen Ansicht erfolgreich deaktiviert.