> ## 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 Hoppy Currency Converter > ℹ️ **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. La fonction CSS personnalisée vous permet de personnaliser davantage l'apparence du convertisseur de devises au-delà des paramètres de conception standard. Que vous souhaitiez ajuster les couleurs, l'espacement, les bordures, les ombres ou faire correspondre le widget à une vitrine fortement personnalisée, Custom CSS vous offre une flexibilité de style supplémentaire sans éditer votre Shopify fichiers thématiques. Ce guide passe en revue comment ajouter et gérer en toute sécurité CSS personnalisé pour le convertisseur de devises. --- # **⚠️ Avant de commencer** Avant d'utiliser Custom CSS, assurez-vous: * Hoppy Currency Converter est installé et actif * L'application Embed est activée * Le processus d'embarquement est terminé * Vous avez une idée claire des changements de style que vous souhaitez faire ⚠️ Un CSS incorrect peut affecter l'apparence du widget. Toujours tester soigneusement les changements avant de les laisser vivre sur votre devanture. --- # **✅ Étape 1: Ouvrez les paramètres CSS personnalisés** Ouvrir la **Hoppy Currency Converter** application de votre Shopify Admin. Alors : → Cliquez sur **Avancé** → Faites défiler vers le **Paramètres experts** rubrique → Localiser la **CSS personnalisé** champ C'est là que toutes les règles de style personnalisées doivent être ajoutées. --- # **✅ Étape 2: Comprendre les classes CSS disponibles** Pour personnaliser le convertisseur de devises, vous devrez cibler les classes CSS appropriées. Ces classes identifient différentes parties du widget et vous permettent de les styler individuellement. --- ## **🖥️ Convertisseur de devises de bureau** .futureblink monnaie top de bureau ### **Utilisation pour** * Couleurs de fond * Frontières * Ombres * Pading * Marges Cette classe cible le convertisseur de devises affiché sur les appareils de bureau. --- ## **📱 Convertisseur de devises mobiles** .futureblink monnaie mobile ### **Utilisation pour** * Espacement par mobile * Style spécifique au mobile * Réglages de la configuration mobile Cette classe cible le convertisseur de devises affiché sur les appareils mobiles. --- ## **📋 Baisse des devises** .futureblink-monnaie-décrochage ### **Utilisation pour** * Style déroulant * Frontières * Rayon frontalier * Ombres * Couleurs de fond Cette classe contrôle la liste des devises disponibles affichées après avoir cliqué sur le convertisseur. --- ## **🔘 Commutateur de devises** Switcheur de monnaie ### **Utilisation pour** * Coiffage du bouton * Apparence de devises sélectionnée * Frontières * Espacement Cette classe contrôle les clients du sélecteur de monnaie visible interagissent avec. --- ## **📄 Options déroulantes** .option ### **Utilisation pour** * Lignes de devises individuelles * Taille des polices * Pading * Effets de Hover Cette classe cible chaque option de monnaie dans le menu déroulant. --- # **✅ Étape 3: Créer vos règles CSS** CSS utilise une structure simple : sélecteur { biens: valeur; } ### **Exemple de structure** * Sélecteur → Ce que vous voulez styler * Propriété → Ce que vous voulez changer * Valeur → La nouvelle apparition --- # **🎨 Exemple : Modifier la couleur de fond** .futureblink currency desktop { couleur de fond: #f8f9fa; } Cela change la couleur de fond du convertisseur de devises de bureau. --- # **🔲 Exemple : Ajouter des bordures et des ombres** .futureblink currency desktop { bordure: 1px solide #ddd; radius limite: 8px; l'ombre de boîte: 0 2px 8px rgba(0,00,0.1); } Cela crée une apparence de carte plus propre. --- # **📋 Exemple : Stylez le déclin de devises** .futureblink-monnaie-dropdown { radiographie à la frontière: 6px; l'ombre de boîte: 0 4px 12px rgba(0,00,15); } Cela ajoute des coins arrondis et une ombre déroulante plus forte. --- # **📱 Exemple : Régler l'espacement mobile** .futureblink monnaie mobile { rembourrage: 12px 16px; haut de la marge: 8px; } Cela augmente l'espacement autour du widget mobile. --- # **⚠️ Si les styles ne s'appliquent pas** Parfois, le style widget par défaut peut surcharger votre CSS personnalisé. Dans ce cas, ajouter : !important à la déclaration CSS. ### **Exemple** .futureblink currency desktop { fond-couleur: blanc !important; limite-rayon: 10px !important; } 💡 Utilisation `!important` est recommandé chaque fois qu'un style personnalisé n'est pas appliqué avec succès. --- # **✅ Étape 4: Enregistrer vos changements** Après avoir ajouté votre CSS : → Cliquez sur **Enregistrer** Les modifications de style sont appliquées immédiatement au widget Currency Converter. --- # **✅ Étape 5: Tester le widget** Visitez votre vitrine et vérifiez les changements. Assurez-vous de tester: * Appareils de bureau * Appareils mobiles * Comportement à la baisse de la monnaie * Différentes pages en vitrine Cela permet d'assurer que le style fonctionne uniformément dans votre magasin. --- # **🔍 Besoin de plus de cours CSS?** Si vous souhaitez personnaliser des parties supplémentaires du convertisseur de devises: 1. Ouvrez votre vitrine 2. Faites un clic droit sur le convertisseur de devises 3. Cliquez sur **Inspecter** 4. Consultez la structure HTML 5. Localiser des noms de classe supplémentaires Ces classes peuvent ensuite être utilisées dans le champ CSS personnalisé. --- # **⚠️ Remarques importantes** ### **Les changements vont vivre immédiatement** Il n'y a pas de mode de brouillon pour le CSS personnalisé. Tout changement devient visible sur le magasin dès que vous le sauvez. --- ### **Paramètres de conception personnalisés CSS Overrides** Si une règle de style existe dans les deux cas : * Paramètres de conception * CSS personnalisé La version CSS personnalisée prendra la priorité. --- ### **Bureau & Mobile peut exiger un style séparé** Les modifications apportées aux classes de bureau n'affectent pas automatiquement les classes mobiles. Pour obtenir les meilleurs résultats, examiner les deux versions séparément. --- ### **Mises à jour thématiques peuvent affecter CSS personnalisé** Majeur Shopify les mises à jour thématiques peuvent changer la structure de la vitrine. Si cela se produit, certaines règles CSS pourraient devoir être ajustées. --- # **🎉 Résultat final** Une fois configuré avec succès : ✅ Le Currency Converter correspond à votre marque ✅ Les couleurs, l'espacement et les bordures peuvent être personnalisés ✅ Les mises en page de bureau et mobiles peuvent être conçues indépendamment ✅ Des personnalisations visuelles avancées deviennent possibles ✅ Le styling peut être ajusté sans édition Shopify Fichiers thématiques L'utilisation de CSS personnalisé vous donne un contrôle supplémentaire sur l'apparence du convertisseur de devises et vous aide à créer une expérience de magasin plus transparente. 🎨 ---