> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Insignes de confiance et icônes — Design & Styling > ℹ️ **Note:** Cet article a été traduit automatiquement en utilisant l'IA et peut contenir des inexactitudes. Si quelque chose ne va pas, veuillez contacter notre équipe de soutien. Les **Insignes de confiance et icônes** section aide les commerçants à améliorer visuellement leur crédibilité de magasin en utilisant des indicateurs de confiance personnalisables comme des icônes de paiement sécurisés, des badges de garantie, des points forts de livraison, et plus encore. Cette section permet un contrôle complet sur: * Insigne * Comportement de disposition * Typographie * Animations * Style de fond * Réactivité mobile * Personnalisation avancée CSS --- # **🎨 Modèle** ## **Ce qu'il fait** Change le thème visuel global et la palette de couleurs de vos badges. ## **Comment utiliser** Cliquez sur le menu déroulant pour choisir parmi les préréglages comme : * **Vendredi Noir** * **Minimale** * **Menthe** * **Dusk** Ces modèles aident instantanément à correspondre à votre marque de magasin et style visuel. --- # **👀 Visibilité** ## **Ce qu'il fait** Contrôle quels appareils peuvent voir vos badges de confiance. ## **Options disponibles** * **Bureau et mobile** → Affiche les badges partout * **Uniquement bureau** → Caché sur les appareils mobiles * **Uniquement mobile** → Caché sur les périphériques de bureau Cela aide les marchands à créer des expériences spécifiques aux appareils. --- # **Orientation de la disposition (tope de bureau et mobile)** ## **Ce qu'il fait** Déterminer comment les badges individuels sont disposés. ## **Options disponibles** ### **Horizontale** Les insignes apparaissent côte à côte en une seule rangée. ### **Vertical** Les insignes s'empilent l'un sous l'autre dans une mise en page de colonne. Des contrôles séparés peuvent être disponibles pour les mises en page de bureau et mobile. --- # **📱 Comportement d'affichage de l'insigne (Mobile seulement)** ## **Ce qu'il fait** Contrôle le comportement des badges sur les petits écrans mobiles lorsque l'espace devient limité. ## **Options disponibles** ### **Scrollable** Les clients peuvent glisser horizontalement pour voir tous les badges dans une rangée. ### **Enveloppe** Les insignes se déplacent automatiquement vers la ligne suivante afin que tous soient visibles ensemble. --- # **✨ Animation** ## **Ce qu'il fait** Ajoute des animations d'entrée lorsque les badges sont chargés sur la page. ## **Comment utiliser** Sélectionnez un style d'animation dans le menu déroulant. Les options d'animation comprennent : * Faites glisser * Pop * C'est faux * Et plus encore Les animations aident à attirer l'attention des clients sans nécessiter de travaux de conception supplémentaires. --- # **🖼️ Style de fond** ## **Ce qu'il fait** Contrôle l'apparence du fond derrière la section badge. ## **Options disponibles** * Couleur unique * Gradient * Gradient tricolore * Modèles ## **Personnalisation supplémentaire** Les marchands peuvent également personnaliser: * Degré d'angle de graduation * Couleurs individuelles * Codes de couleur Hex * Aspect du motif Cela aide les badges à se fondre visuellement dans le design du magasin. --- # **📐 Frontières et coins** ## **Rayon d'angle (px)** Contrôle l'aspect arrondi des coins extérieurs. * Valeurs supérieures → Plus de coins arrondis * `0` → Coins carrés pointus ## **Taille de la bordure (px)** Ajuste l'épaisseur de la bordure extérieure. ## **Couleur de la bordure** Change la couleur de la ligne de bordure. ## **Style de bordure** Les styles disponibles peuvent comprendre : * Solide * Pointillé * Déchiqueté * Aucune --- # **📏 Espacement (desktop vs mobile)** L'espacement peut être personnalisé séparément pour les appareils de bureau et mobiles. Cela garantit que la mise en page de votre badge reste équilibrée et réactive sur toutes les tailles d'écran. ## **Espacement intérieur (Padding)** Contrôles espacement à l'intérieur du contenant du badge. Directions disponibles: * Haut * Bas * Gauche * Droite Cela crée un espace de respiration entre le contenu et les frontières. ## **Espacement extérieur (Margin)** Ajoute l'espacement à l'extérieur du bloc badge. Contrôles disponibles: * Marge supérieure * Marge inférieure Utile pour séparer les badges des sections adjacentes. ## **Espacement des icônes** Contrôle la distance entre les badges/icônes individuels. --- # **🔷 Icône Styling** ## **Forme insigne/icône** ### **Ce qu'il fait** Ajoute des fonds décoratifs derrière des icônes individuelles. ### **Options disponibles** * Aucune * Bouclier * Emblème * Cercle * Carré --- # **📏 Taille et personnalisation** ## **Bureau / Mobile Taille (px)** Contrôle indépendamment la taille de l'icône pour : * Bureau * Mobile ## **Couleur de fond** Change la couleur de fond derrière la forme de l'icône. ## **Rayon d'angle** Ajuste comment arrondi l'arrière-plan de l'icône devient. --- # **🚀 Pro Styling (Avancé)** ## **Animation d'icônes** Ajoute des effets de mouvement continus aux icônes. Voici quelques exemples : * Agiter * Pouls * Bounce ## **Animation Icon Hover** Déclenche les animations lorsque les clients survolent les icônes. Voici quelques exemples : * Flotte * Wobble * Holographique ## **Ombre d'icônes** Ajoute des effets de profondeur et de superposition à l'aide d'ombres. Voici quelques exemples : * Souffle molle * Ombre de chute subtile --- # **➖ Séparateur d'icônes** ## **Ce qu'il fait** Ajoute des lignes de partage entre les icônes individuelles des badges. ## **Comment utiliser** Activer la **Ajouter un séparateur d'icônes** à cocher. Cela aide à créer un espacement plus propre et une séparation visuelle. --- # **✍️ Typographie (Texte et polices)** ## **Sélection des polices** ### **Ce qu'il fait** Contrôle le style typographique utilisé pour les titres et sous-titres de badges. ### **Options disponibles** * Utilisez votre Shopify police thématique * Choisir les polices personnalisées * Prise en charge des polices Google L'utilisation de la police thématique aide à maintenir la cohérence de stockage. --- # **📝 Titre et sous-position Styling** ## **Taille (px)** Contrôle la taille du texte. ## **Couleur** Modifier la couleur du texte en utilisant : * Cueillette de couleurs * Code Hex --- # **📐 Espacement du texte** ## **Ce qu'il fait** Contrôle l'espacement entre les lignes de texte pour une meilleure lisibilité. L'espacement peut rendre le contenu plus propre et plus haut de gamme. --- # **💻 CSS personnalisé (Pour les développeurs)** ## **Fonctionnalité avancée** Si les paramètres intégrés ne suffisent pas, les marchands peuvent ajouter un style CSS entièrement personnalisé. ## **Catégories cibles disponibles** ### **Conteneur d'insigne entier** .futureblink-trust-badge ### **Titre Texte** Titre ### **Sous-titres** Sous-positions ### **Bouton CTA** Bouton .cta --- # **⚡ Application du CSS personnalisé** ## **Comment utiliser** 1. Collez votre CSS personnalisé dans l'éditeur 2. Cliquez sur **Appliquer** 3. L'aperçu change instantanément --- # **❗ Dépassement Shopify Styles de thème** Parfois Shopify thèmes peuvent surcharger votre style personnalisé. Si vos modifications CSS n'apparaissent pas correctement, utilisez : !important Cela oblige votre style à prendre la priorité sur les styles thématiques. Exemple : .fb-titre { couleur : rouge !important; } --- # **✅ Résultat final** Une fois configurés avec succès, Trust Badges & Icons vous aide à créer une expérience plus professionnelle, plus fiable et plus axée sur la conversion. Avec un style approprié en place: * ✅ La crédibilité du magasin s'améliore * ✅ Des garanties importantes deviennent plus visibles * ✅ Augmentation de la confiance des clients * ✅ Marque de magasin se sent plus poli * ✅ La réactivité mobile s'améliore * ✅ La disposition des insignes devient plus propre et plus organisée * ✅ La cohérence visuelle sur le devant du magasin devient plus forte Des badges de confiance bien conçus peuvent être significatifs