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

Voulez-vous un contrôle complet sur la façon dont vos badges de confiance semblent sur votre devant de magasin? 🎨

Alors que l'onglet Conception offre des options de personnalisation étendues, CSS personnalisé vous donne la flexibilité pour faire des ajustements de style avancés qui vont au-delà des paramètres standard.

Que vous raffiniez l'espacement, assortissez des lignes directrices strictes de marque, ajoutez des effets visuels personnalisés ou résolvez les conflits de style spécifiques à un thème, Custom CSS offre un contrôle créatif complet sur votre conception de Trust Badge.

⚠️ Avant de commencer

Avant d'utiliser Custom CSS:

• Assurez-vous d'avoir déjà créé un badge de confiance.
• Avoir une compréhension de base de CSS ou l'accès à un développeur.
• Comprendre que CSS personnalisé peut dépasser les paramètres de conception standard.

💡 Si vous n'avez pas encore créé d'insigne de confiance, créez-en un avant de continuer avec ce guide.

🛠️ Étape 1 — Ouvrez l'onglet Conception

Ouvrir la Hoppy Trust Badges app et naviguez vers l'insigne de confiance que vous souhaitez personnaliser.

Alors :

➡️ Cliquez sur le Conception onglet.

Faites défiler jusqu'à ce que vous trouviez le CSS personnalisé Chapitre.

Cette section contient tous les outils nécessaires pour ajouter et gérer un style personnalisé.

🎨 Étape 2 — Ouvrir la section CSS personnalisée

Dans la CSS personnalisé section que vous trouverez:

• Un éditeur CSS
• A Afficher le guide bouton
• Une Appliquer bouton
• Un modèle CSS de démarrage

Le modèle de démarrage contient les sélecteurs disponibles qui peuvent être personnalisés pour votre badge de confiance.

Cela rend plus facile de commencer le style sans avoir besoin d'inspecter manuellement les éléments de front de magasin.

✍️ Étape 3 — Ajouter votre CSS personnalisé

L'éditeur comprend plusieurs sélecteurs préconfigurés qui ciblent des éléments spécifiques de Trust Badge.

Sélecteurs disponibles

Conteneur

Sélecteur

Désignation des marchandises

.futureblink-trust-badge

Conteneur entier Trust Badge

Titre

Sélecteur

Désignation des marchandises

.futureblink-trust-badge .fb-title

Titre principal

.futureblink-trust-badge.mobile .fb-title

Style de titre mobile

💡 Pour les badges flottants, le sélecteur de titre utilise .title au lieu de .fb-title.

Sous-positions

Sélecteur

Désignation des marchandises

.futureblink-trust-badge .subheading

Texte descriptif

.futureblink-trust-badge.mobile .subheading

Style de description mobile

Icônes

Sélecteur

Désignation des marchandises

.futureblink-trust-badge .icon

Icônes d'insigne

.futureblink-trust-badge.mobile .icon

Style d'icônes mobiles

Bouton d'appel à l'action

Sélecteur

Désignation des marchandises

.futureblink-trust-badge .cta-button

bouton CTA

.futureblink-trust-badge.mobile .cta-button

Style de bouton CTA mobile

Exemple CSS

Pour ajouter le rembourrage au contenant du badge et personnaliser le titre :

.futureblink-trust-badge {
padding: 20px;
}

.futureblink-trust-badge .fb-title {
color: #2c3e50;
font-size: 18px;
}

💡 Vous pouvez ajouter des sélecteurs CSS supplémentaires, des requêtes médias, des animations et des règles de style au besoin.

📱 Étape 4 — Ajouter un style spécifique au mobile

Pour cibler spécifiquement les appareils mobiles, utilisez .mobile variation des sélecteurs.

Exemple :

.futureblink-trust-badge.mobile .fb-title {
font-size: 14px;
}

L'application enveloppe automatiquement .mobile sélecteurs à l'intérieur d'une requête de médias mobiles lors du rendu sur votre front de magasin.

Si vous préférez écrire vos propres requêtes médias, elles seront conservées exactement comme entrées.

✅ Étape 5 — Appliquer votre CSS

Une fois votre CSS ajouté:

➡️ Cliquez sur Appliquer.

Les mises à jour d'aperçu en direct automatiquement, vous permettant d'examiner vos changements de style immédiatement.

Si vous voulez supprimer votre style personnalisé plus tard:

➡️ Cliquez sur Réinitialiser.

Cela supprime votre CSS personnalisé et restaure les paramètres de conception standard.

👀 Étape 6 — Examiner l'aperçu

Après avoir appliqué votre CSS :

➡️ Consultez l'aperçu Bureau.

➡️ Passez en revue l'aperçu mobile.

Vérifier que:

• Le texte apparaît correctement.
• Les icônes restent bien alignées.
• L'espacement semble cohérent.
• Affichage des boutons comme prévu.

Si des ajustements sont nécessaires:

➡️ Mettez à jour le CSS.

➡️ Cliquez sur Appliquer Encore.

L'aperçu se rafraîchit automatiquement après chaque changement.

💾 Étape 7 — Enregistrer et publier

Une fois que vous êtes satisfait de la conception:

➡️ Cliquez sur Enregistrer.

➡️ Cliquez sur Publier.

⚠️ Enregistrer seul ne met pas à jour le magasin.

L'insigne de confiance doit également être publié avant que les clients puissent voir les changements.

⚠️ Remarques importantes

Configurations standard de CSS personnalisées

CSS personnalisé a priorité sur la plupart des paramètres de l'onglet Design.

Si un paramètre de couleur, d'espacement ou de typographie semble être ignoré, il est probable qu'il soit dépassé par votre CSS.

Manipulation automatique !important

L'application ajoute automatiquement !important priorité aux déclarations CSS lors du rendu des styles sur le devant de la boutique.

Vous n'avez pas besoin d'ajouter !important manuellement.

Étendue

Le CSS personnalisé est automatiquement appliqué au badge de confiance en cours d'édition.

Cela permet de prévenir les conflits de style avec:

• Autres insignes de confiance
• Éléments thématiques
• Autres composants de façade

Les sélecteurs vides sont autorisés

Vous n'avez pas besoin d'utiliser chaque sélecteur fourni dans le modèle.

Ajoutez seulement des styles aux éléments que vous voulez personnaliser.

Validation CSS

L'éditeur ne valide pas la syntaxe CSS.

Si un style ne s'applique pas correctement:

➡️ Vérifiez les noms des sélecteurs.

➡️ Vérifier les bretelles et les demi-colons.

➡️ Consultez le CSS pour les erreurs de syntaxe.

❓ Dépannage

Si vos styles ne apparaissent pas correctement :

➡️ Confirmer que Appliquer a été cliqué.

➡️ Vérification de l'insigne de confiance Enregistrer et Publié.

➡️ Vérifiez que les noms des sélecteurs correspondent exactement au modèle fourni.

➡️ Testez dans une fenêtre de navigateur Incognito ou privé.

➡️ Rafraîchir la vitrine pour effacer les styles mis en cache.

🎉 Résultat final

✅ Votre badge de confiance peut être personnalisé au-delà des paramètres de conception standard.

✅ La marque, l'espacement, la typographie et le style d'icône peuvent être contrôlés plus précisément.

✅ Les mises en page bureau et mobile peuvent être conçues indépendamment.

✅ Les styles personnalisés restent isolés de l'insigne de confiance sélectionné.

Custom CSS offre une façon flexible de créer une expérience Trust Badge plus polie et cohérente avec la marque tout en conservant la simplicité des outils de conception intégrés de l'application. ✨

Mis à jour le : 10/09/2026