> ## 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). # 🎨 Comment définir CSS personnalisé pour les barres d'upsell d'expédition gratuite > ℹ️ **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. Vous voulez que votre barre de livraison gratuite corresponde parfaitement à la marque de votre magasin? 🎨 Alors que l'onglet Design comprend de vastes contrôles de style, **CSS personnalisé** offre une flexibilité supplémentaire pour une personnalisation visuelle avancée. Que vous ajustiez la typographie, peaufiniez l'espacement, ajoutiez des animations, créiez des mises en page spécifiques aux mobiles ou résolvez des conflits de style spécifiques aux thèmes, Custom CSS vous donne un meilleur contrôle sur la façon dont votre barre de livraison gratuite apparaît sur le devant de la boutique. --- # **⚠️ Avant de commencer** Avant d'utiliser Custom CSS: * Assurez-vous d'avoir déjà créé une configuration d'expédition gratuite Upsell. * Assurez-vous d'avoir accès aux **Conception** onglet. * Avoir une compréhension de base de CSS ou l'accès à un développeur. ⚠️ **Important:** CSS personnalisé est disponible sur tous les types de placement pris en charge sauf **Page de départ** les placements. Les placements soutenus comprennent : * Page produit * Page panier * Tiroir * Bannière (en haut et en bas) --- # **🛠️ Étape 1 — Ouvrez l'onglet Conception** Ouvrir la **Hoppy Free Shipping** app et naviguez vers la configuration d'Upsell d'expédition gratuite que vous souhaitez personnaliser. Alors : ➡️ Cliquez sur le **Conception** onglet. Faites défiler jusqu'à ce que vous trouviez le **CSS personnalisé** Chapitre. Cette section se trouve généralement sous les paramètres de configuration Typographie, Progress Bar, Button et Upsell. --- # **🎨 Étape 2 — Ouvrez l'éditeur CSS personnalisé** 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 contient des sélecteurs couramment utilisés qui peuvent être personnalisés sans avoir besoin d'inspecter manuellement les éléments de front de magasin. --- # **🎯 Étape 3 — Comprendre les sélecteurs disponibles** Le modèle de démarrage comprend plusieurs sélecteurs qui ciblent différents éléments de la barre de livraison gratuite. ### **Sélecteurs disponibles** Sélecteur Désignation des marchandises `.futureblink-free-shipping` Entire Free Shipping Bar conteneur `.futureblink-message` Texte du message de progression `.futureblink-icon` Icône affichée avec le message `.futureblink-cta-button` Bouton d'appel à l'action `.futureblink-price-text` Prix en évidence ou valeur de progression --- ### **Sélecteurs mobiles** Pour un style spécifique au mobile, utilisez la `.mobile` variation. Sélecteur Désignation des marchandises `.futureblink-free-shipping.mobile .futureblink-message` Message de progression mobile `.futureblink-free-shipping.mobile .futureblink-icon` Icône mobile `.futureblink-free-shipping.mobile .futureblink-cta-button` Bouton CTA mobile `.futureblink-free-shipping.mobile .futureblink-price-text` Prix mobile/texte de progression 💡 Il vous suffit de personnaliser les sélecteurs en fonction de vos exigences de conception. --- # **✍️ Étape 4 — Ajoutez votre CSS personnalisé** Entrez vos règles CSS dans l'éditeur. ### **Exemple 1 — Personnaliser le message de progression** `.futureblink-free-shipping .futureblink-message {` `font-size: 18px;` `color: #ff6600;` `}` ### **Exemple 2 — Personnaliser le bouton CTA** `.futureblink-free-shipping .futureblink-cta-button {` `background-color: #000000;` `color: #ffffff;` `border-radius: 20px;` `}` ### **Exemple 3 — Styling mobile spécifique** `.futureblink-free-shipping.mobile .futureblink-message {` `font-size: 14px;` `}` 💡 Commencez par de petits changements de style, puis élargissez votre CSS au besoin. --- # **✅ Étape 5 — Appliquer votre CSS** Après avoir entré votre CSS : ➡️ Cliquez sur **Appliquer**. Les mises à jour de prévisualisation automatiquement afin que vous puissiez examiner immédiatement les changements de style. Si vous voulez supprimer votre style personnalisé: ➡️ Cliquez sur **Réinitialiser**. Cela restaure le modèle par défaut et désactive le CSS personnalisé. --- # **👀 Étape 6 — Examiner l'aperçu** Après avoir appliqué votre CSS : ➡️ Consultez l'aperçu dans l'application. Vérifier que: * Le texte s'affiche correctement. * Les boutons apparaissent comme prévu. * Les icônes restent alignées. * Les couleurs et l'espacement correspondent à votre marque. 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. La configuration de Free Shipping Upsell doit également être publiée avant que les clients puissent voir les changements. --- # **⚠️ Remarques importantes** ### **Manipulation automatique !important** Lorsque les styles sont rendus sur le devant de la boutique, l'application ajoute automatiquement `!important` priorité aux déclarations CSS. Cela permet d'assurer que vos styles personnalisés ont priorité sur le style de thème. --- ### **Si les styles ne semblent pas** Dans de rares cas où les styles de thème restent dominants, vous pouvez ajouter manuellement `!important` dans l'éditeur. Exemple : .futureblink-free-shipping .futureblink-message { taille de police: 18px !important; couleur: #ff6600 !important; } --- ### **Manipulation mobile automatique** Tout sélecteur utilisant la `.mobile` La variation est automatiquement enveloppée à l'intérieur d'une requête de médias mobiles lorsqu'elle est rendue sur le devant du magasin. Vous n'avez pas besoin de créer manuellement des points d'arrêt réactifs pour ces sélecteurs. --- ### **Limitation de la page de vérification** CSS personnalisé n'est pas disponible pour les placements de page de départ parce que Shopify limite l'injection personnalisée de CSS dans les environnements Checkout. --- ### **Validation CSS** L'éditeur ne valide pas la syntaxe CSS. Si un style ne s'applique pas correctement: ➡️ Vérifier les noms des sélecteurs. ➡️ Vérifie 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'installation **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 barre de livraison gratuite peut être personnalisée au-delà des paramètres de conception standard. ✅ Des expériences bureautiques et mobiles peuvent être conçues indépendamment. ✅ La typographie personnalisée, l'espacement, les couleurs et les animations sont entièrement pris en charge. ✅ La barre de livraison gratuite peut être alignée plus étroitement avec la marque de votre magasin. Le CSS personnalisé offre une flexibilité supplémentaire lorsque les contrôles de conception intégrés ne sont pas suffisants, aidant à créer une expérience plus polie et cohérente en vitrine. ✨