Sie haben das Trustbadge noch nicht integriert? Dann führen Sie zunächst die Standardintegration durch, bevor Sie an dieser Stelle weitermachen. Dieser Artikel hilft Ihnen dabei: Wie kann ich das Trustbadge® ohne Plugin in meinen Shop integrieren?
Im oben verlinkten Artikel finden Sie auch den Trustbadge-Code, der die Grundlage für die im folgenden Text beschriebenen Anpassungen ist.
Innerhalb der Standardintegration sind für die Positionierung des Trustbadge® folgende Regeln festgelegt:
- Das Trustbadge wird in der Desktop-Ansicht auf der rechten Bildschirmseite und in der mobilen Ansicht auf der linken Bildschirmseite angezeigt.
- Das Trustbadge wird in der Desktop-Ansicht 54 Pixel und in der mobilen Ansicht 10 Pixel oberhalb des unteren Bildschirmrands angezeigt.
Selbstverständlich können Sie diese Regeln an Ihre individuellen Anforderungen anpassen. Der Trustbadge-Code gibt Ihnen die Möglichkeit, das Trustbadge in der Desktop- und der mobilen Ansicht unabhängig voneinander an verschiedenen Stellen Ihrer Webseite zu platzieren.
Wie verändere ich die Positionierung des Trustbadge in der Desktop-Ansicht?
Sie können das Trustbadge in der Desktop-Ansicht…
… horizontal vom rechten an den linken Bildschirmrand verrücken.
… vertikal nach oben oder unten verschieben.
… vollkommen flexibel auf Ihrer Webseite platzieren.
Trustbadge in der Desktop-Ansicht am linken Bildschirmrand platzieren
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-desktop-position="right"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-desktop-position="left"
Damit haben Sie das Trustbadge erfolgreich am linken Bildschirmrand platziert.
Trustbadge in der Desktop-Ansicht nach oben oder unten verschieben
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-desktop-y-offset="0"
- Die 0 durch die Pixelanzahl ersetzen, um die das Trustbadge nach oben oder unten verschoben werden soll.
Zwei Beispiele:
- Sie möchten das Trustbadge um 20 Pixel nach oben verschieben? Dann verwenden Sie folgende Codezeile:
data-desktop-y-offset="20"
- Sie möchten das Trustbadge nach unten verschieben? Dann nutzen Sie Minuswerte. Um das Trustbadge 20 Pixel nach unten zu verschieben, verwenden Sie folgende Codezeile:
data-desktop-y-offset="-20"
Bei einem Wert von -54 ist das Trustbadge ohne Abstand am unteren Bildschirmrand platziert. Wir empfehlen Ihnen daher, ausschließlich Werte bis -44 zu nutzen.
Damit haben Sie das Trustbadge erfolgreich nach unten oder oben verschoben.
Trustbadge flexibel in der Desktop-Ansicht platzieren
Neben der bisher beschriebenen Standardvariante des Trustbadge können Sie auch die Custom-Variante in Ihre Webseite integrieren.
Die Custom-Variante unterscheidet sich in drei Punkten von der Standardvariante:
- Sie sieht anders aus als die Standardvariante. Hier sehen Sie die Custom-Variante:
(mit Bewertungssternen) (ohne Bewertungssterne) - Sie können die Custom-Variante vollkommen flexibel auf Ihrer Webseite platzieren.
- Sie können 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 Ihnen, wie Sie die Größe des Trustbadge in der Desktop-Ansicht verändern können. Sie sind mit den oben genannten Standardwerten einverstanden? Dann überspringen Sie die nächsten beiden Schritte und fahren Sie mit Schritt 3 fort.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-desktop-custom-width="156"
- Die 156 durch die Pixelanzahl ersetzen, die sie als Breite des Trustbadge bestimmen möchten.
Welche Pixelanzahl Sie an dieser Stelle auswählen können, hängt davon ab, ob Sie die Bewertungssterne in der Desktop-Ansicht ausgeblendet haben.
- Haben Sie die Bewertungssterne ausgeblendet? Dann wählen Sie eine Pixelanzahl zwischen 32 und 58.
- Haben Sie die Bewertungssterne nicht ausgeblendet? Dann wählen Sie eine Pixelanzahl zwischen 100 und 500.
Die Pixelanzahl für die Höhe des Trustbadge ergibt sich automatisch aus der von Ihnen gewählten Breite. Sie wird nicht von Ihnen bestimmt.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-desktop-enable-custom="false"
- Die Codezeile durch die folgende Codezeile ersetzen:
data-desktop-enable-custom="true"
- Den Quellcode Ihrer Webseite öffnen.
- Die folgende Codezeile an der Position Ihrer Webseite platzieren, an der das Trustbadge erscheinen soll:
<div id="trustbadgeCustomContainer"></div>
Mögliche Positionen wären beispielsweise der Header oder der Footer.
Damit haben Sie das Trustbadge erfolgreich an der von Ihnen ausgewählten Stelle Ihrer Webseite integriert.
Wie verändere ich die Positionierung des Trustbadge in der mobilen Ansicht?
Sie können das Trustbadge in der mobilen Ansicht…
… horizontal vom linken Bildschirmrand in die Mitte oder nach rechts verrücken.
… vertikal nach oben oder unten verschieben.
… vollkommen flexibel auf Ihrer Webseite platzieren.
Trustbadge in der mobilen Ansicht 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 Sie das Trustbadge auf der rechten Seite platzieren möchten:data-mobile-position="right"
- Wenn Sie das Trustbadge in der Mitte platzieren möchten:data-mobile-position="center"
Damit haben Sie das Trustbadge erfolgreich am rechten Bildschirmrand oder in der Mitte platziert.
Trustbadge in der mobilen Ansicht 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:
- Sie möchten das Trustbadge um 5 Pixel nach oben verschieben? Dann verwenden Sie folgende Codezeile:
data-mobile-y-offset="5"
- Sie möchten das Trustbadge nach unten verschieben? Dann nutzen Sie Minuswerte. Um das Trustbadge 5 Pixel nach unten zu verschieben, verwenden Sie folgende Codezeile:
data-mobile-y-offset="-5"
Nutzen Sie hierbei ausschließlich Werte bis -10.
Damit haben Sie das Trustbadge erfolgreich nach unten oder oben verschoben.
Trustbadge flexibel in der mobilen Ansicht platzieren
Neben der bisher beschriebenen Standardvariante des Trustbadge können Sie auch die Custom-Variante in die mobile Ansicht Ihrer Webseite integrieren. Standardmäßig hat die Custom-Variante eine Breite von 156 Pixeln und eine Höhe von 78 Pixeln. Im Folgenden erklären wir Ihnen, wie Sie die Größe des Trustbadge verändern können. Sie sind mit den oben genannten Standardwerten einverstanden? Dann überspringen Sie die nächsten beiden Schritte und fahren Sie mit Schritt 3 fort.
- Innerhalb des Trustbadge-Codes die folgende Codezeile finden:
data-mobile-custom-width="156"
- Die 156 durch die Pixelanzahl ersetzen, die sie als Breite des Trustbadge bestimmen möchten.
Welche Pixelanzahl Sie an dieser Stelle auswählen können, hängt davon ab, ob Sie die Bewertungssterne ausgeblendet haben.
- Haben Sie die Bewertungssterne ausgeblendet? Dann wählen Sie eine Pixelanzahl zwischen 32 und 58.
- Haben Sie die Bewertungssterne nicht ausgeblendet? Dann wählen Sie eine Pixelanzahl zwischen 100 und 500.
Die Pixelanzahl für die Höhe des Trustbadge ergibt sich automatisch aus der von Ihnen gewählten Breite. Sie wird nicht von Ihnen bestimmt.
- 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 Ihrer Webseite öffnen.
- Die folgende Codezeile an der Position Ihrer Webseite platzieren, an der das Trustbadge erscheinen soll:
<div id="trustbadgeCustomMobileContainer"></div>
Mögliche Positionen wären beispielsweise der Header oder der Footer.
Damit haben Sie das Trustbadge erfolgreich an der von Ihnen ausgewählten Stelle Ihrer Webseite integriert.
Wie kann ich die Trustcard an einer anderen Stelle platzieren?
Die Trustcard öffnet sich nach dem Checkout als Popup-Fenster auf Ihrer Bestellbestätigungsseite. Über die Trustcard kann Ihre Kundschaft ihre Einwilligung zum Empfang einer Bewertungseinladung geben und/oder ihre Bestellung mithilfe des Käuferschutzes absichern.
Sie möchten nicht, dass sich die Trustcard als Popup-Fenster öffnet? Dann können Sie ihr eine feste Position auf Ihrer Bestellbestätigungsseite zuweisen.
- Die Template-Datei Ihrer Bestellbestätigungsseite öffnen.
- Die folgende Codezeile in Ihren Zwischenspeicher kopieren:
<div id="trustbadgeCustomCheckoutContainer"></div>
- Die Codezeile an der Stelle der Template-Datei einfügen, an der die Trustcard erscheinen soll.
Damit haben Sie die Trustcard erfolgreich an einer festen Position auf Ihrer Bestellbestätigungsseite platziert.