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.


War der Artikel hilfreich?

4 von 5 fanden dies hilfreich