Have you not integrated the Trustbadge® yet? Then first carry out the standard integration before continuing. This article can help you: How can I integrate the Trustbadge® in my shop without a plugin?
In the article linked above, you will also find the Trustbadge code, which is the basis for all adjustments described in the following text.
Within the standard integration, the following rules are defined for the positioning of the Trustbadge®:
- For desktops, the Trustbadge is displayed on the right side of the screen and in the mobile version, on the left side of the screen.
- In desktop devices, the Trustbadge is displayed 54 pixels above the lower edge of the screen and in the mobile devices, 10 pixels above.
You can naturally adapt these rules to your individual needs. The Trustbadge code gives you the option of placing the Trustbadge in different places in the desktop and mobile view, independently of each other.
How do I change the positioning in desktop view?
In desktop view, the Trustbadge can be moved...
... horizontally from the right to the left edge of the screen.
... vertically up or down.
... completely flexibily on your website.
Placing the Trustbadge on the left edge of the screen in the desktop version of your website
- Find the following line of code within the Trustbadge code:
data-desktop-position="right"
- Replace the line of code with the following line of code:
data-desktop-position="left"
You have now successfully placed the Trustbadge on the left edge of the screen.
Moving the Trustbadge up or down in the desktop version of your website
- Find the following line of code within the Trustbadge code:
data-desktop-y-offset="0"
- Replace the 0 with the number of pixels by which the Trustbadge should be moved up or down.
Two examples:
- Would you like to move the Trustbadge up by 20 pixels? Then use the following line of code:
data-desktop-y-offset="20"
- Would you like to move the Trustbadge down? Then use minus values. To move the Trustbadge 20 pixels down, use the following line of code:
data-desktop-y-offset="-20"
With a value of -54, the Trustbadge is placed at the bottom edge of the screen without any space. We therefore recommend that you do not use values beyond -44.
You have now successfully moved the Trustbadge up or down.
Flexible placement of the Trustbadge in the desktop version of your website
In addition to the previously described standard variant of the Trustbadge, you can also integrate the custom variant into your website.
The custom variant differs from the standard variant in three ways:
- It looks different from the standard variant. Here, you can see the custom variant:
(with star ratings) (without star ratings) - You can place the custom variant on your website with complete flexibility.
- You can change the size of the custom variant.
By default, the custom variant has a width of 156 pixels and a height of 78 pixels. Below, we explain how you can change the size of the Trustbadge in the desktop view. Do the aforementioned default values suit you? Then skip the next two steps and proceed to step 3.
- Find the following line of code within the Trustbadge code:
data-desktop-custom-width="156"
- Replace the 156 with the number of pixels that you want to specify as the width of the Trustbadge.
The number of pixels you can specify here depends on whether you have hidden the star ratings in the desktop view.
- Have you hidden the star ratings? Then select a number of pixels between 32 and 58.
- Have you not hidden the star ratings? Then select a number of pixels between 100 and 500.
The number of pixels for the height of the Trustbadge is automatically determined by the width you have selected. You cannot specify it.
- Find the following line of code within the Trustbadge code:
data-desktop-enable-custom="false"
- Replace the line of code with the following line of code:
data-desktop-enable-custom="true"
- Open the source code of your website.
- Place the following line of code on your website in the position where the Trustbadge should appear:
<div id="trustbadgeCustomContainer"></div>
Possible options would be, for example, the header or the footer.
You have now successfully integrated the Trustbadge in the position you selected on your website.
How do I change the positioning in the mobile view?
In mobile view, the Trustbadge can be moved...
... horizontally from the left edge of the screen to the centre or to the right.
... vertically up or down.
... completely flexibily on your website.
In the mobile view, place the Trustbadge on the right edge of the screen or in the centre
- Find the following line of code within the Trustbadge code:
data-mobile-position="left"
- Replace the line of code with one of the following lines of code:
- If you want to place the Trustbadge on the right side:data-mobile-position="right"
- If you want to place the Trustbadge in the centre:data-mobile-position="center"
You have now successfully placed the Trustbadge on the right edge of the screen or in the centre.
Moving the Trustbadge up or down in the mobile version of your website
- Find the following line of code within the Trustbadge code:
data-mobile-y-offset="0"
- Replace the 0 with the number of pixels by which the Trustbadge should be moved up or down.
Two examples:
- Would you like to move the Trustbadge up by 5 pixels? Then use the following line of code:
data-mobile-y-offset="5"
- Would you like to move the Trustbadge down? Then use minus values. To move the Trustbadge 5 pixels down, use the following line of code:
data-mobile-y-offset="-5"
Only use values up to -10.
You have now successfully moved the Trustbadge up or down.
Flexible placement of the Trustbadge in the mobile version of your website
In addition to the previously described standard variant of the Trustbadge, you can also integrate the custom variant into the mobile view of your website. By default, the custom variant has a width of 156 pixels and a height of 78 pixels in the mobile view. Below, we explain how you can change the size of the Trustbadge in the mobile view. Do the aforementioned default values suit you? Then skip the next two steps and proceed to step 3.
- Find the following line of code within the Trustbadge code:
data-mobile-custom-width="156"
- Replace the 156 with the number of pixels that you want to specify as the width of the Trustbadge.
The number of pixels you can specify here depends on whether you have hidden the star ratings in the mobile view.
- Have you hidden the star ratings? Then select a number of pixels between 32 and 58.
- Have you not hidden the star ratings? Then select a number of pixels between 100 and 500.
The number of pixels for the height of the Trustbadge is automatically determined by the width you have selected. It does not need to be specified by you.
- Find the following line of code within the Trustbadge code:
data-mobile-enable-custom="false"
- Replace the line of code with the following line of code:
data-mobile-enable-custom="true"
- Open the source code of your website.
- Place the following line of code on your website in the position where the Trustbadge should appear:
<div id="trustbadgeCustomMobileContainer"></div>
Possible options would be, for example, the header or the footer.
You have now successfully integrated the Trustbadge in the position you selected on your website.
How can I place the Trustcard elsewhere?
After checkout, the Trustcard appears as a pop-up window on the order confirmation page of your shop. Using the Trustcard, your customers can give their consent to receiving a review invite and/or protect their order with the Buyer Protection.
You don't want the Trustcard to open as a popup? Then, you can assign it a fixed position on your order confirmation page.
- Open the template file of your order confirmation page.
- Copy the following code line to your clipboard:
<div id="trustbadgeCustomCheckoutContainer"></div>
- Insert the code line at the position of the template file where the Trustcard should appear.
You have now successfully placed the Trustcard in a fixed position on your order confirmation page.