Wie kann ich die mobile Darstellung des Trustbadge® anpassen?

Laut einer Bitkom-Studie shoppen 50 Prozent der deutschen Kundinnen und Kunden mobil – Tendenz steigend.  Damit Sie auf diesen Trend optimal vorbereitet sind, bietet Ihnen Trusted Shops mehrere mobile Darstellungsmöglichkeiten für das Trustbadge® an, die sich harmonisch in die mobile Ansicht Ihres Onlineshops einfügen.

Im folgenden Artikel stellen wir Ihnen die unterschiedlichen Varianten vor. Darüber hinaus erläutern wir Ihnen, wie Sie diese in Ihren Shop integrieren können.

Die Floating-Variante

custom-tb.pngMobile_custom_device_TB.png

Bei kleineren Bildschirmbreiten, die beispielsweise Smartphones und Tablets zur Verfügung stellen, wird das Trustbadge standardmäßig in der Floating-Variante dargestellt. Die Floating-Variante hält das Gütesiegel stets im Blick Ihrer Kundschaft. Dabei wird der Shop nicht großflächig überlagert oder zu viel wertvoller Platz im Header belegt. Beim Scrollen verschwindet das Trustbadge automatisch und taucht erst wieder auf, wenn der User nach oben scrollt. Über Ihr Smartphone können Sie diese mobile Variante in unserem Demoshop einsehen.

Sie können die Positionierung und die Darstellung des Trustbadge über den Parameter „responsive“ innerhalb Ihrer Trustbadge-Konfiguration anpassen. Was Sie hierfür genau tun müssen, erläutern wir Ihnen in den folgenden Abschnitten.

So passen Sie die horizontale Positionierung der Floating-Variante an

Die Floating-Variante des Trustbadge wird standardmäßig in der linken unteren Ecke der mobilen Ansicht angezeigt. Darüber hinaus haben Sie die Möglichkeit, das Trustbadge mittig oder in der rechten unteren Ecke zu positionieren.

Öffnen Sie hierfür zunächst Ihre bestehende Trustbadge-Konfiguration und überprüfen Sie, ob der Parameter „responsive“ bereits Bestandteil des Codes ist. In diesem Fall sollten Sie die folgende Codezeile innerhalb Ihrer Trustbadge-Konfiguration finden:

'responsive': {'variant': 'floating'},

Sofern Sie die obige Codezeile innerhalb Ihrer Trustbadge-Konfiguration gefunden haben, ersetzen Sie diese bitte durch die nachfolgende Codezeile:

'responsive': {'variant':'floating', 'position':'right'},

Achten Sie bitte darauf, dass Sie das Komma am Ende der Codezeile mit in den Code kopieren. Ansonsten kann das Trustbadge nicht korrekt angezeigt werden.

Sofern der Parameter „responsive“ noch nicht Bestandteil Ihrer Trustbadge-Konfiguration sein sollte, müssen Sie ihn zusätzlich in den Code einfügen. Legen Sie hierfür bitte unterhalb der Zeile

_tsConfig = {

eine neue Codezeile an und fügen Sie die nachfolgende Codezeile an dieser Stelle ein:

'responsive': {'variant':'floating', 'position':'right'},

Mit dem innerhalb dieser Codezeile für die Position angegebenen Wert 'right' wird das Trustbadge in der rechten unteren Ecke der mobilen Ansicht angezeigt. Sofern Sie das Trustbadge mittig im unteren Bereich positionieren wollen, ändern Sie bitte den Wert 'right' in 'center'. Wenn Sie den Wert in 'left' ändern, wird das Trustbadge wieder in der linken unteren Ecke angezeigt.

So passen Sie die vertikale Positionierung der Floating-Variante an

Darüber hinaus haben Sie die Möglichkeit, die vertikale Positionierung des Trustbadge individuell anzupassen. Verfahren Sie hierfür zunächst wie bei der Anpassung der horizontalen Positionierung und überprüfen Sie, ob der Parameter „responsive“ bereits Bestandteil Ihrer Trustbadge-Konfiguration ist.

Anschließend ergänzen bzw. ersetzen Sie den Parameter bitte durch die folgende Codezeile:

'responsive': {'variant':'floating', 'position':'right', 'yOffset':'150'},

Achten Sie bitte darauf, dass Sie das Komma am Ende der Codezeile mit in den Code kopieren. Ansonsten kann das Trustbadge nicht korrekt angezeigt werden.

Über den Wert 'yOffset' können Sie nun bestimmen, um wie viele Pixel das Trustbadge nach oben verschoben werden soll. In der obigen Codezeile sind 150 Pixel voreingestellt. Diesen Wert müssen Sie nun an die individuellen Voraussetzungen Ihres Shops anpassen.

In der obigen Codezeile ist die horizontale Positionierung über den Wert 'right' definiert. Dementsprechend wird das Trustbadge bei Verwendung dieser Codezeile in der rechten unteren Ecke angezeigt. Wenn Sie das Trustbadge lieber in der linken unteren Ecke oder mittig positionieren möchten, ändern Sie den Wert 'right' bitte in 'left' für links oder 'center' für mittig.

Bewertungssterne innerhalb der Floating-Variante anzeigen

Standardmäßig wird in der Floating-Variante nur das Gütesiegel angezeigt. Zusätzlich haben Sie die Möglichkeit, auch ein Trustbadge mit Bewertungssternen in der mobilen Ansicht darzustellen. Wenn Sie dies tun möchten, ersetzen Sie bitte im Parameter „responsive“ den Wert 'floating' durch 'floating_reviews'.

Sollte der Parameter „responsive“ noch nicht Bestandteil Ihrer Trustbadge-Konfiguration sein, müssen Sie zunächst unterhalb der Zeile

_tsConfig = {

eine neue Codezeile anlegen und die nachfolgende Codezeile an dieser Stelle einfügen:

'responsive': {'variant': 'floating_reviews'},

Achten Sie bitte darauf, dass Sie das Komma am Ende der Codezeile mit in den Code kopieren. Ansonsten kann das Trustbadge nicht korrekt angezeigt werden.

Sofern Sie zusätzlich die Positionierung des Trustbadge verändern möchten, beachten Sie bitte die obigen Abschnitte zur horizontalen und vertikalen Positionierung der Floating-Variante.

Die Topbar-Variante

trustbadge-mobile-topbar_DE.jpg

Neben der Floating-Variante können Sie das Trustbadge auch als Topbar darstellen. Dabei handelt es sich um eine Leiste, die oberhalb Ihres Shopheaders angezeigt wird und sowohl das Gütesiegel als auch Bewertungsinformationen beinhaltet. Diese Darstellungsform wurde bis Anfang März 2020 standardmäßig ausgespielt.

So stellen Sie das Trustbadge als Topbar dar

Wenn Sie das Trustbadge in Ihrem Shop als Topbar darstellen wollen, ersetzen Sie bitte im Parameter „responsive“ den Wert  'floating' durch 'topbar'.

Sollte der Parameter „responsive“ noch nicht Bestandteil Ihrer Trustbadge-Konfiguration sein, müssen Sie zunächst unterhalb der Zeile

_tsConfig = {

eine neue Codezeile anlegen und die nachfolgende Codezeile an dieser Stelle einfügen:

'responsive': {'variant': 'topbar'},      

Achten Sie bitte darauf, dass Sie das Komma am Ende der Codezeile mit in den Code kopieren. Ansonsten kann das Trustbadge nicht korrekt angezeigt werden.

Da das Trustbadge in der Topbar-Variante stets über die gesamte Breite angezeigt wird, müssen Sie die Positionierung nicht eigens anpassen.

Beachten Sie bitte, dass wir den technischen Support für die Topbar-Variante in Zukunft einstellen werden. Ab diesem Zeitpunkt wird nur noch die Floating-Variante nutzbar sein.

Die mobilen Custom-Varianten

Wie in der Desktop-Ansicht haben Sie auch in der mobilen Darstellung die Möglichkeit, das Trustbadge an jeder beliebigen Stelle Ihres Shops zu platzieren. Verwenden Sie hierfür eine der beiden Custom-Varianten custom oder custom_reviews.

helpcenter_BILD.png

Die Variante custom

TB5-custom-trustmark-only_DE.pngreviews-only_DE.png

Die Variante custom_reviews (mit und ohne Gütesiegel)

Wie Sie die Custom-Varianten des Trustbadge in Ihre Desktop-Ansicht integrieren, erläutern wir Ihnen in diesem Artikel: Welche Darstellungsvarianten des Trustbadge® existieren und wie binde ich diese in meinen Shop ein?

Mithilfe des Parameters „responsive“ und eines DIV-Elements können Sie eine der beiden Custom-Varianten in Ihre mobile Shopansicht integrieren. Folgen Sie hierfür einfach der folgenden Anleitung.

Falls Sie dies wünschen, können Sie Ihr Trustbadge auf diese Weise auch an einer anderen Stelle platzieren als in der Desktop-Variante.

Schritt 1: Erstellen Sie ein DIV-Element

Um eine der beiden Trustbadge-Varianten custom und custom_reviews nutzen zu können, müssen Sie zunächst ein DIV-Element erstellen. Kopieren Sie hierfür den folgenden HTML-Code an der Stelle in Ihr Shopsystem, an der das Trustbadge erscheinen soll. Mögliche Positionen wären beispielsweise der Header oder der Footer.

<div id="myMobileCustomTrustbadge" style="width:100px;height:50px"></div>

Über die Eigenschaften width und height können Sie die Höhe und die Breite des Trustbadge anpassen. Ersetzen Sie hierfür einfach die Zahlenwerte hinter width (Breite) und height (Höhe) entsprechend Ihrer Bedürfnisse. Beachten Sie hierbei bitte das ursprüngliche Seitenverhältnis (Breite:Höhe) des Trustbadge von 2:1 in der Variante custom_reviews bzw. 1:1 für die Variante custom.

Schritt 2: Verknüpfen Sie das DIV-Element mit der Trustbadge-Konfiguration

Damit das Trustbadge an der von Ihnen gewünschten Stelle erscheinen kann, müssen Sie nun noch das in Schritt 1 erstellte DIV-Element mit Ihrer bestehenden Trustbadge-Konfiguration verbinden. Öffnen Sie hierfür zunächst die Trustbadge-Konfiguration und überprüfen Sie, ob der Parameter „responsive“ bereits Bestandteil des Codes ist. In diesem Fall sollten Sie die folgende Codezeile innerhalb Ihrer Trustbadge-Konfiguration finden:

'responsive': {'variant': 'floating'},

Sofern Sie die obige Codezeile innerhalb Ihrer Trustbadge-Konfiguration gefunden haben, ersetzen Sie diese bitte durch die nachfolgende Codezeile:

'responsive': {'variant': 'custom', 'customElementId': 'myMobileCustomTrustbadge'},
Mit dieser Codezeile aktivieren Sie die Variante custom. Wenn Sie lieber die Variante custom_reviews nutzen möchten, müssen Sie den Wert 'custom' für die Eigenschaft 'variant' durch 'custom_reviews' ersetzen.

Sollten Sie den Parameter „responsive“ nicht in Ihrer Trustbadge-Konfiguration finden, müssen Sie ihn noch anlegen. Erstellen Sie hierfür bitte unterhalb der Zeile

_tsConfig = {

eine neue Codezeile und fügen Sie den oben angegebenen Code an dieser Stelle ein.


War der Artikel hilfreich?

6 von 9 fanden dies hilfreich