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.

 

 

 


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

Utilisateurs qui ont trouvé cela utile : 4 sur 5