How can I adapt the mobile display of the Trustbadge®?

According to a Bitkom study, 50% of German customers shop using their mobiles, and this trend is on the rise.  To ensure that you are optimally prepared for an increase in mobile customers, Trusted Shops offers you a number of mobile display options for the Trustbadge®, which fit harmoniously into the mobile view of your online shop.

In the following article we will show you the different variants and explain how you can integrate them into your shop.

The Floating Variant

custom-tb.pngMobile_custom_device_TB.png

For smaller screen widths, such as those provided by smartphones and tablets, the Trustbadge is displayed in the Floating Variant by default. The Floating Variant ensures that the Trustmark is always visible to your customers. In doing so, this means that the shop space does not become swamped, and that valuable space is not taken up by the header. When scrolling, the Trustbadge automatically disappears and then only reappears when the user scrolls back up. You can view this mobile variant in our Demoshop using your smartphone.

You can adjust the positioning and display of the Trustbadge using the "responsive" parameter within your Trustbadge configuration. In the following sections, we will explain exactly what you need to do to achieve this.

Adjusting the horizontal positioning of the Floating Variant

The Floating Variant of the Trustbadge is displayed by default in the bottom left-hand corner of the mobile view. You also have the option of positioning the Trustbadge in the centre or in the bottom right-hand corner.

To do this, first open your existing Trustbadge configuration and check whether the parameter "responsive" is already included in the code. If it is included, you should find the following line of code within your Trustbadge configuration:

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

If you have found the above line of code in your Trustbadge configuration, please replace it with the following line of code:

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

Please make sure that the comma at the end of the above line of code is included in your code, otherwise the Trustbadge will not be displayed correctly.

If the parameter "responsive" is not yet included in your Trustbadge configuration, you will have to add it to the code. To do this, you will need to create a new line of code below the line

_tsConfig = {

and then insert the following line of code at this position:

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

The value 'right' is specified for the position in the line of code shown above, meaning that the Trustbadge will be displayed in the bottom right-hand corner of the mobile view. If you want to position the Trustbadge at the bottom and in the centre, you can change the value ‘right’ to ‘center’. If you change the value to ‘left’, the Trustbadge will be shown in the lower left-hand corner again.

Please note that the American English spelling of 'center' applies here, as it is hard coded.

Adjusting the vertical positioning of the Floating Variant

You also have the option of personalising the vertical positioning of the Trustbadge. To do this, first proceed as you would for adjusting the horizontal positioning and check whether the parameter "responsive" is already part of your Trustbadge configuration.

Then you will need to add or replace the parameter with the following line of code:

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

Please make sure that the comma at the end of the above line of code is included in your code, otherwise the Trustbadge will not be displayed correctly.

By using the value 'yOffset’, you can move the Trustbadge up by the chosen number of pixels. In the line of code above, the number of pixels is 150. You can adjust this value to the individual requirements of your shop.

In the above line of code the horizontal positioning is defined by the value 'right'. This means that the Trustbadge will be displayed in the bottom right corner when this line of code is used. If you would prefer to position the Trustbadge in the lower left corner or in the centre, you can change the value ‘right’ to ‘left’ for left, or to ‘center’ for a central position.

Displaying reviews within the Floating Variant

By default, only the Trustmark is displayed in the Floating Variant. You also have the option of displaying a Trustbadge with reviews in the mobile view. If you want to do this, you can replace the value 'floating' with 'floating_reviews' in the parameter “responsive”.

If the parameter "responsive" is not yet included in your Trustbadge configuration, you will first need to create a new line of code below the line

_tsConfig = {

and then insert the following line of code at this position:

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

Please make sure that the comma at the end of the above line of code is included in your code, otherwise the Trustbadge will not be displayed correctly.

If you also want to change the position of the Trustbadge, you can find out how in the previous sections on horizontal and vertical positioning of the Floating Variant.

The Top Bar Variant

trustbadge-mobile-topbar_EN.jpg

In addition to the Floating Variant, you can also display the Trustbadge as a top bar. This is a bar that is displayed above your shop header and contains both the trustmark and review information. This display format was used as standard until the beginning of March 2020.

To display the Trustbadge as a top bar

If you want to display the Trustbadge as a top bar in your shop, you will need to replace the value ‘floating’ with ‘topbar’ in the parameter "responsive".

If the parameter "responsive" is not yet included in your Trustbadge configuration, you will first need to create a new line of code below the line

_tsConfig = {

and then insert the following line of code at this position:

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

Please make sure that the comma at the end of the above line of code is included in your code, otherwise the Trustbadge will not be displayed correctly.

The Trustbadge is always displayed across the entire screen width in the top bar version, so you won’t need to adjust the positioning.

Please note that we will be discontinuing technical support for the top bar variant in the future. From this point on you will only be able to use the Floating Variant.


Was this article helpful?

6 out of 8 found this helpful