Product Update: The Trustbadge Has a New Look on Mobile

22.05.2019, 4m

Current forecasts show that by 2020 more than 50% of all transactions in online shops will be processed via smartphones. In order for you to be optimally prepared for this with Trusted Shops, we’d like to present our new mobile display options for the Trustbadge®.


Three new standards for mobile devices

With our three new standard solutions for mobile Trustbadge displays, you have full control over how the Trustbadge integrates into your shop.

The Trustbadge is there to help you present your shop’s trustworthiness to online shoppers in a simple and effective way. Not only can you show the seal of approval and take away the fear of losing money from your customers - you also collect reviews for your shop and its products, especially for purchases via smartphones.

Always in view: The new floating variant

trustbadge-mobile-floatingThe new floating variant always keeps the trustmark in view for your online shoppers. With this variation, the trustmark doesn’t take up too much space on your website. When scrolling, the Trustbadge disappears automatically and only reappears when the user scrolls upwards.

You can view this mobile version in our demo shop via your smartphone.


All shops that use the trustmark and want to have Trusted Shops ratings displayed as well, have the opportunity to do so in the floating version of the Trustbadge. The Trustbadge will then display the yellow rating stars as well as the overall rating of the shop in addition to the trustmark.


If your shop only uses the review system or has not yet been certified, the floating version of the Trustbadge displays the yellow review stars in combination with the overall rating of the shop. Otherwise, it behaves exactly the same as the floating version with trustmark: When the website is opened, the Trustbadge is directly visible and disappears when scrolling down and reappears when scrolling up.

Custom variant available for mobile devices


If you wanted to use the standard variant of the Trustbadge for your desktop shop and a different one for your mobile site, this was previously only possible via work-arounds. We have now standardised this option for you. With only two lines of code, you can now use the custom variants for mobile devices independently of the desktop version.

With these new options, you can now place the trustmark and your ratings where you want them and where they fit best in the different versions of your website.

The classic: The responsive version

UK_tb-header-trustmark-reviewsThe third is our classic: The responsive version. The bar is displayed above your shop header and contains the trustmark as well as reviews information. Existing shop integrations are currently still displayed in the responsive version.

How to use the new layouts

To use the new displays, the new parameter "responsive" with a configuration object is used.

Place custom variant mobile differently from the desktop version

'responsive': {'variant': 'custom', 'customElementId': 'myMobileCustomTrustbadge'}

The "custom" and "custom_reviews" variants are possible values in the object for "variant".

Insert the following HTML code into the position where you want the Trustbadge® to be displayed – for example, in the header or the footer of the page:

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

Use the CSS properties 'width' and 'height' in this HTML code to set the displayed size of the Trustbadge. Both values must be specified.

In doing so, please observe the Trustbadge's original aspect ratio (width:height) of 2:1 in the 'custom_reviews' variant or 1:1 for the 'custom' variant.

Use Floating Variant

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

The new floating variant is even easier to use: Simply add the above code as an additional parameter to your existing Trustbadge integration and as a Trustmark-customer, you will automatically benefit from our new floating variant.

In order to display star-ratings next to the trustmark in the floating variant, simply set the following parameter: 

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

Use Responsive Version

The responsive version does not require any adjustments to a regular Trustbadge integration and is automatically displayed on all mobile devices unless you have replaced it with the custom version.

For more information on how to integrate the Trustbadge into your shop and how to use it with popular e-commerce platforms, please refer to our integration tips.

New trust cards for mobile devices

After a customer’s successful checkout in your shop, the Trustcard shows online shoppers the possibility to secure their purchase with our Trusted Shops Buyer Protection and to be reminded to submit a review for your shop. 


If you haven't integrated the Trustbadge yet or have questions about the integration, get in contact with your personal Customer Success Manager - they will be more than happy to help you!