ℹ️ 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

Mis à jour le : 10/09/2026