Comment paramétrer l’affichage mobile du Trustbadge®?

Selon une étude de Bitkom, 50 % des clientes et des clients utilisent leur smartphone ou leur tablette pour effectuer des achats, et la part des achats mobiles continue d'augmenter. Afin de vous y préparer dans de bonnes conditions, Trusted Shops propose plusieurs possibilités pour intégrer parfaitement votre Trustbadge®à l’affichage mobile de votre boutique en ligne.

L’article ci-dessous vous présente les différentes variantes ainsi que la manière de les paramétrer.

La variante flottante

custom-tb.pngMobile_custom_device_TB.png

La variante flottante du Trustbadge s’affiche par défaut sur les écrans des smartphones et des tablettes. Son avantage : la marque de confiance reste toujours visible. De plus, l’affichage de votre site n’est pas perturbé, et l’en-tête reste disponible. Le Trustbadge disparait automatiquement en défilant vers le bas, et réapparait lorsque l'utilisateur fait défiler vers le haut. Découvrez cette variante mobile sur votre smartphone dans notre boutique de démonstration.

Ouvrez les paramètres du Trustbadge pour régler sa position et son affichage à l’aide du paramètre « responsive ». Nous vous expliquons la procédure en détail dans les paragraphes suivants.

Voici comment activer le positionnement horizontal de la variante flottante

Dans la variante flottante, le Trustbadge apparaît par défaut en bas à gauche de l’affichage mobile. Vous avez également la possibilité de le placer au milieu ou à droite.

Commencez pour cela par ouvrir les paramètres actuels de votre Trustbadge et regardez si le code contient déjà le paramètre « responsive ». Oui ? Vous devriez alors trouver la ligne de code suivante dans la configuration de votre Trustbadge :

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

Si elle apparaît dans la configuration de votre Trusbadge, veuillez la remplacer par la ligne suivante :

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

Assurez-vous de copier aussi la virgule située à la fin de cette ligne de code. Sinon, le Trustbadge ne s’affichera pas correctement.

Si le paramètre « responsive » n’apparaît pas encore dans la configuration de votre Trustbadge, vous devez alors l’ajouter au code. Ajoutez pour cela sous la ligne

_tsConfig = {

une nouvelle ligne de code et insérez-y la ligne suivante :

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

La valeur 'right' indiquée ici pour la position signifie que le Trustbadge va être visible en bas à droite de l’affichage mobile. Si vous préférez avoir le Trustbadge centré en bas, veuillez remplacer la valeur 'right' par 'center'. Si vous la remplacez par 'left' , alors votre Trustbadge apparaîtra à nouveau en bas à gauche.

Voici comment activer le positionnement vertical de la variante flottante

Vous avez par ailleurs la possibilité de personnaliser la position verticale du Trustbadge. Procédez ici comme pour configurer la position horizontale et regardez si les paramètres de votre Trustbadge contiennent déjà le paramètre « responsive ».

Le cas échéant, ajoutez la ligne de code suivante ou remplacez le paramètre par cette ligne :

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

Assurez-vous de copier également la virgule située à la fin de cette ligne de code. Sinon, le Trustbadge ne s'affichera pas correctement.

La valeur 'yOffset' vous permet à présent de déterminer le déplacement vers le haut du Trustbadge (en pixels). Dans l’exemple ci-dessus, la valeur par défaut est de 150 pixels. Vous devez maintenant choisir cette valeur pour qu’elle réponde aux caractéristiques de votre boutique.

La valeur de la position horizontale est 'right' dans la ligne de code ci-dessus. Par conséquent, si vous l’utilisez, le Trustbadge sera affiché en bas à droite. Si vous préférez l’afficher à gauche ou au centre, veuillez remplacer la valeur 'right' par 'left' pour gauche ou 'center' pour milieu.

Afficher les étoiles d’évaluation dans la variante flottante

Par défaut, la variante flottante n’affiche que la marque de confiance. Vous pouvez toutefois faire apparaître le Trustbadge avec les étoiles d’évaluation sur les terminaux mobiles. Pour cela, veuillez remplacer la valeur 'floating' dans le paramètre « responsive » par 'floating_reviews'.

Si le paramètre « responsive » n’apparaît pas encore dans la configuration de votre Trustbadge, vous devez commencer par ajouter en dessous de la ligne

_tsConfig = {

une nouvelle ligne de code pour y insérer la ligne suivante :

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

Assurez-vous de copier également la virgule située à la fin de cette ligne de code. Sinon, le Trustbadge ne s'affichera pas correctement.

Si vous souhaitez également modifier la position du Trustbadge, veuillez vous conformer aux parties ci-dessus concernant la position horizontale et verticale de la variante flottante.

La variante Topbar

trustbadge-mobile-topbar_FR.jpg

La variante Topbar est une autre possibilité d’afficher votre Trustbadge. Cette barre située au-dessus du nom de votre boutique contient aussi bien la marque de confiance que des informations sur vos évaluations. Il s’agissait de la variante par défaut jusqu’au début du mois de mars 2020.

Voici comment afficher le Trustbadge sous forme de Topbar

Pour afficher le Trustbadge dans votre boutique sous forme de Topbar, veuillez remplacer la valeur 'floating' par 'topbar' dans le paramètre « responsive ».

Si le paramètre « responsive » n'apparaît pas encore dans la configuration de votre Trustbadge, vous devez commencer par ajouter en dessous de la ligne

_tsConfig = {

une nouvelle ligne de code pour y insérer la ligne suivante :

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

Assurez-vous de copier également la virgule située à la fin de cette ligne de code. Sinon, le Trustbadge ne s'affichera pas correctement.

Vous n’avez pas à modifier la position du Trustbadge, car il apparaît toujours sur toute la largeur de l’écran dans la variante Topbar.

Nous vous rappelons ici que nous allons arrêter l’assistance technique de la variante Topbar. Après, seule la variante flottante sera disponible.

Les variantes mobiles personnalisées

À l’instar de l’affichage de bureau, vous avez également la possibilité de placer le Trustbadge n’importe où dans votre boutique dans l’affichage mobile. Utilisez pour cela l’une des deux variantes personnalisées custom ou custom_reviews.

helpcenter_BILD.png

La variante custom

TB5-custom-trustmark-only_FR.pngreviews-only_FR.png

La variante custom_reviews (avec et sans marque de confiance)

Dans cet article, nous expliquons comment intégrer les variantes personnalisées du Trustbadge dans votre affichage de bureau : Quelles sont les variantes d'affichage du Trustbadge® et comment les intégrer dans ma boutique?

À l’aide du paramètre « responsive » et d’un élément DIV, vous pouvez intégrer l’une des deux variantes personnalisées dans l’affichage mobile de votre boutique. Il suffit de suivre les instructions ci-dessous.

Si vous le souhaitez, vous pouvez également placer votre Trustbadge à un endroit différent de celui de la version de bureau.

Étape 1: Créez un élément DIV

Pour pouvoir utiliser l’une des deux variantes du Trustbadge, custom et custom_reviews, vous devez d’abord créer un élément DIV. Pour ce faire, copiez le code HTML suivant dans le système de votre boutique où vous souhaitez que le Trustbadge apparaisse. Les positions possibles seraient, par exemple, l’en-tête ou le pied de page.

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

Vous pouvez utiliser les propriétés de largeur et de hauteur pour ajuster la hauteur et la largeur du Trustbadge. Il suffit de remplacer les valeurs numériques derrière la largeur et la hauteur selon vos besoins. Veuillez noter que le rapport d'aspect original (largeur:hauteur) du Trustbadge est de respectivement 2:1 dans la variante custom_reviews et 1:1 dans la variante custom.

Étape 2 : Lier l’élément DIV à la configuration du Trustbadge

Pour que le Trustbadge apparaisse à l’endroit souhaité, vous devez maintenant connecter l’élément DIV créé à l’étape 1 à votre configuration de Trustbadge existante. Pour ce faire, ouvrez d’abord la configuration du Trustbadge et vérifiez si le code contient déjà le paramètre « responsive ». Oui ? Vous devriez alors trouver la ligne de code suivante dans la configuration de votre Trustbadge :

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

Si elle apparaît dans la configuration de votre Trusbadge, veuillez la remplacer par la ligne suivante :

'responsive': {'variant': 'custom', 'customElementId': 'myMobileCustomTrustbadge'},
Avec cette ligne de code, vous activez la variante custom. Si vous préférez utiliser la variante custom_reviews, vous devez remplacer la valeur « custom » de la propriété « variant » par « custom_reviews ».

Si vous ne trouvez pas le paramètre « responsive » dans la configuration de votre Trustbadge, vous devez le créer. Pour ce faire, veuillez créer une nouvelle ligne de code sous la ligne

_tsConfig = {

et insérez le code ci-dessus à cet endroit.


Cet article a-t-il été utile ?

Utilisateurs qui ont trouvé cela utile : 8 sur 12