Créer un badge de confiance

Un badge de confiance est un bloc d’icônes de paiement, de sécurité, de livraison, de garantie ou de politique, avec un titre et une description facultatifs. L’éditeur comporte deux onglets : Design pour le contenu et le style, et Placement pour la position intégrée sur la page produit et le shortcode.

1. Ouvrir Trust Badges

   Dans votre admin Shopify, ouvrez Sami Product Labels, sélectionnez Extra Features dans la navigation de l’application, puis l’onglet Trust Badges.

   Si vous avez déjà des badges de confiance, la page les affiche dans un tableau. Si la liste est vide, la page affiche à la place un panneau Create your first trust badge.

   

   L’onglet Trust Badges contient l’action de création, les badges de confiance enregistrés et les modèles proposés.

2. Choisir comment commencer

   Cliquez sur Create trust badge. Le bouton apparaît dans l’en-tête de la page lorsque le tableau est visible, ou dans le panneau d’état vide si vous n’avez pas encore créé de badge de confiance.

   Faites défiler jusqu’à Featured templates. Cliquez sur View all templates pour afficher les quatre designs : Eco-Friendly template, With payment method, Policies store template et Badge box template. Cliquez sur Select sur un modèle pour l’ouvrir avec ses icônes et son style déjà appliqués.

   Les deux options ouvrent l’éditeur sur l’onglet Design.

   

   Créez un badge de confiance de zéro, ou sélectionnez l’un des quatre modèles proposés.

3. Nommer le badge de confiance

   Le champ du nom apparaît au-dessus de l’aperçu. Remplacez New Trust Badge par un nom de 50 caractères maximum. Ce nom sert uniquement à identifier le badge de confiance dans l’application et n’est pas affiché à votre clientèle.

   

   Utilisez un nom interne clair pour retrouver facilement le badge de confiance dans le tableau.

4. Ajouter un titre et une description

   Dans Content & Badges, ouvrez Title et Description et saisissez le texte facultatif qui apparaît au-dessus des icônes. Les deux champs prennent en charge le gras, l’italique, le souligné, les emoji, l’alignement du texte et le mode source.

   Les champs sont propres à chaque langue. Leurs intitulés indiquent la langue active, par exemple Title (en). Utilisez le sélecteur de langue au-dessus de l’aperçu pour modifier une autre langue.

   Laissez les deux champs vides si vous voulez n’afficher que les icônes.

   

   Title et Description sont des champs de texte enrichi facultatifs, modifiés séparément pour chaque langue.

5. Ajouter des icônes de badge

   Sous Badges, cliquez sur Add Badge, puis choisissez :

   Option	Ce qu’elle fait
   Select badge image	Ouvre la boîte de dialogue Select Image.
   Line break	Fait commencer les icônes suivantes sur une nouvelle ligne.

   Dans Select Image, utilisez Search images pour trouver une icône. La source Library contient plus de 400 images de paiement, de sécurité, de livraison, de garantie et de politique ; le nombre d’éléments actuel apparaît à côté du nom de la source. Sélectionnez une ou plusieurs images, puis cliquez sur Select Image.

   Passez à Design your Images pour utiliser des designs importés, issus d’une URL ou des créations personnalisées associées. Après avoir sélectionné une image, cliquez sur Edit with AI si vous voulez créer une variante avant de l’ajouter.

   

   Recherchez dans la bibliothèque intégrée ou passez à Design your Images, puis confirmez votre sélection.

6. Réordonner et configurer chaque icône

   Chaque icône apparaît sous forme de ligne dans la liste Badges. Faites glisser une ligne par sa poignée pour changer l’ordre d’affichage, ou cliquez sur Delete pour la supprimer. Utilisez des éléments Line break pour contrôler où commence une nouvelle ligne.

   Cliquez sur le bouton General de la ligne pour ouvrir ses réglages :

   • Change Image : remplacez l’icône sélectionnée.
   • Link : faites ouvrir une URL par l’icône ; utilisez l’option de lien externe pour l’ouvrir dans un nouvel onglet.
   • Tooltip : ajoutez jusqu’à 150 caractères affichés lorsqu’une personne pointe l’icône.
   • Layout colors : recolorez les calques pris en charge dans les icônes SVG intégrées.

   

   Faites glisser les icônes pour les réordonner, et utilisez General pour modifier l’image, le lien, l’infobulle ou les couleurs prises en charge.

7. Styliser le bloc de badge de confiance

   Utilisez les sections de design repliables pour harmoniser le badge de confiance avec votre thème :

   Section	Principaux réglages
   Design Main Section	Largeur du bloc, marge, remplissage, taille/style/couleur de bordure, ombre et rayon d’arrondi.
   Design title & description	Police personnalisée, couleur, taille de police et hauteur de ligne pour le titre et la description.
   Design Badge	Style mono, carte mono, original ou carte originale ; alignement ; largeur et hauteur ; marge ; et animation.
   Responsive size	Largeur et hauteur d’icône distinctes pour tablette et mobile.
   Advance Section	CSS personnalisé et une référence CSS cliquable pour les sélecteurs du badge de confiance.

   Les animations disponibles sont SlideInUp, SadeInDown, BounceIn, FlipInX et ZoomIn. Activez Animation, sélectionnez un effet et utilisez le bouton de lecture pour l’aperçu.

   

   Ouvrez chaque section de design pour styliser le conteneur, le texte, les icônes, les tailles adaptatives et le CSS personnalisé.

   Note

   Dans Advance Section, cliquez sur un sélecteur de CSS reference pour insérer sa règle ciblée dans l’éditeur de CSS personnalisé.

8. Choisir où le badge de confiance s’affiche

   Passez à l’onglet Placement :

   Option	Ce qu’elle fait
   Product page	Activez l’interrupteur pour afficher le badge de confiance à la position intégrée de l’application sur toutes les pages produit.
   Shortcode	Copiez l’extrait si vous voulez placer le badge de confiance à une position personnalisée de votre thème.

   Un badge de confiance non enregistré utilise data-id="new" dans son shortcode. Enregistrez le badge de confiance avant de placer cet extrait dans votre thème.

   

   Utilisez la position intégrée de la page produit ou copiez le shortcode pour une position personnalisée.

   Note

   Consultez Placer un badge de confiance avec un shortcode pour le parcours complet dans l’éditeur de thème.

9. Prévisualiser et enregistrer

   Utilisez les commandes au-dessus de l’aperçu pour :

   • changer la langue de modification ;
   • prévisualiser la Product page ;
   • basculer entre les vues bureau et mobile ;
   • afficher ou masquer le produit d’exemple ;
   • définir le badge de confiance sur Active ou Draft.

   Vérifiez l’aperçu, puis cliquez sur Save en haut à droite. Cliquez sur Discard si vous voulez quitter sans conserver vos modifications non enregistrées.

   

   Prévisualisez le résultat, choisissez Active ou Draft, puis enregistrez le badge de confiance.

Étapes suivantes

• Présentation des badges de confiance : gérez les badges de confiance enregistrés, les modèles, le statut et le placement.
• Placer un badge de confiance avec un shortcode : ajoutez le badge de confiance à une position précise de votre thème.

Astuce

Besoin d’aide ?

Si vous rencontrez des difficultés en suivant ces étapes, contactez-nous à l’adresse [email protected].