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

Mis à jour le : 10/09/2026