ℹ️ 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 section Design & Styling vous donne un contrôle complet sur l'apparence du convertisseur de devises sur votre front de magasin.

Des styles de drapeau et de typographie aux couleurs, aux bordures et aux préférences d'affichage, ces paramètres vous aident à créer un convertisseur de devises qui se sent comme une partie naturelle de votre magasin tout en conservant une expérience fluide pour les acheteurs internationaux.

⚠️ Avant de commencer

Pour accéder aux paramètres Design & Styling :

→ Ouvrir Hoppy Currency Converter

→ Terminer le processus d'embarquement

→ Ouvrir la Conception onglet

💡 Tous les changements de conception deviennent visibles sur le devant du magasin après avoir économisé.

🏳️ Personnalisation du drapeau

Cette section contrôle comment les drapeaux apparaissent dans tout le convertisseur de devises.

Les modifications s'appliquent aux deux :

• L'affichage de la monnaie sélectionnée
• La liste déroulante des devises

🎨 Style de drapeau

Contrôle l'apparence visuelle des drapeaux.

Traditionnel

Affiche des images de drapeau standard sans style supplémentaire.

Meilleur pour : Des vitrines minimales et professionnelles où vous voulez que les drapeaux se mêlent naturellement au design.

Moderne

Affiche les drapeaux avec :

• Coins arrondis
• Ombres douces
• Frontières subtiles
• Traitement visuel amélioré

Meilleur pour : Les vitrines modernes qui veulent que le convertisseur de devises se démarque comme un élément de conception premium.

💡 Le style sélectionné s'applique à chaque drapeau affiché par le convertisseur de devises.

🔘 Thème du drapeau

Contrôle la forme des drapeaux.

Cycle

Les drapeaux apparaissent avec des coins légèrement arrondis.

Cercle

Les drapeaux apparaissent à l'intérieur d'une forme circulaire.

Plat

Les drapeaux apparaissent avec des coins pointus et un look traditionnel.

Le thème sélectionné aide à déterminer la personnalité visuelle globale du widget.

🔘 Personnalisation du sélecteur de devises

Ces paramètres contrôlent l'apparence du widget principal de Currency Converter.

🎨 Thème

Contrôle le style visuel général du container Currency Converter.

Par défaut

Une apparence propre et simple qui se mélange naturellement dans la plupart des Shopify thèmes.

Couche moderne

Crée un effet visuel superposé derrière le widget pour une profondeur et un accent supplémentaires.

💡 L'effet Modern Layer utilise automatiquement votre couleur d'arrière-plan sélectionnée.

👀 Mode d'affichage

Contrôle les informations qui apparaissent dans le convertisseur de devises.

Afficher le drapeau et la monnaie

Affiche à la fois le drapeau et l'information sur la monnaie.

Afficher uniquement le drapeau

Affiche seulement les drapeaux.

Afficher la monnaie seulement

Affiche uniquement les informations sur la monnaie.

Ce paramètre s'applique à la fois au sélecteur et à la liste déroulante.

🌓 Thème couleur

Contrôle si le convertisseur de devises utilise une apparence claire ou sombre.

Lumière

Utilise un fond léger avec un texte plus sombre.

Noir

Utilise un fond sombre avec un texte plus léger.

Automatique

Correspond automatiquement aux préférences du système d'achat.

💡 Le mode automatique aide le convertisseur de devises à s'adapter naturellement à différents appareils et environnements de navigation.

🔤 Afficher uniquement les codes de devise

Contrôle la façon dont les noms de devises apparaissent.

Activé

Affiche les codes de devise courts.

Exemples:

• USD
• EUR
• GBP

Handicapé

Affiche les noms et codes complets de la monnaie.

Exemples:

• Dollar américain (USD)
• Euro (EUR)
• Livre sterling

Cela peut aider à rendre la baisse plus compacte lorsque vous supportez de nombreuses devises.

🎨 Personnalisation du thème

Cette section contrôle le style de base du convertisseur de devises.

📦 Style de bordure

Contrôle comment la bordure du widget est affichée.

Boîte Ombre

Ajoute une ombre subtile autour du convertisseur de devises.

Ligne frontière

Ajoute une bordure visible autour du widget.

Pas de frontière

Enlève complètement les bordures et les ombres.

Chaque option crée un accent visuel différent selon votre style de magasin.

🔤 Famille de polices

Contrôle la police utilisée dans le convertisseur de devises.

Utiliser la police thématique

Correspond à votre Shopify typographie thématique automatiquement.

Polices Google

Choisissez parmi une variété de polices prises en charge.

Voici quelques exemples :

• Roboto
• Ouvrir Sans
• Montserrat
• Pommes de terre

💡 L'utilisation de votre police thématique crée généralement l'expérience de stockage la plus transparente.

🎨 Couleur de fond

Contrôle la couleur de fond du convertisseur de devises.

Vous pouvez :

• Utilisez le sélectionneur de couleurs
• Saisissez une valeur de couleur Hex

Choisissez une couleur qui complète votre vitrine tout en restant facile à identifier.

🖊️ Couleur du texte

Contrôle la couleur du texte tout au long du convertisseur de devises.

Cela comprend:

• Monnaie sélectionnée
• Options déroulantes
• Étiquettes

Pour une meilleure lisibilité, assurer un contraste suffisant entre le texte et les couleurs de fond.

🖱️ Couleur de la souris

Contrôle la couleur affichée lorsque les clients survolent les options de change.

Cela aide les clients à identifier clairement l'option qu'ils sont sur le point de sélectionner.

Un contraste subtil de la couleur de fond fonctionne généralement mieux.

🔽 Couleur de l'icône déroulante

Contrôle la couleur de l'icône de l'indicateur déroulant.

La correspondance de cette couleur avec votre couleur de texte crée souvent l'apparence la plus cohérente.

⚠️ Remarques importantes

Le thème sombre déborde certaines couleurs

Lors de l'utilisation:

• Thème sombre
• Automatique Thème (alors qu'un shopper utilise le mode sombre)

Le convertisseur de devises peut utiliser des couleurs de mode foncé optimisées au lieu de vos couleurs d'arrière-plan et de texte sélectionnés.

Pour la personnalisation avancée du mode sombre, utilisez un CSS personnalisé.

Le thème du calque utilise la couleur de fond

Le thème Modern Layer génère automatiquement son effet superposé en utilisant la couleur d'arrière-plan sélectionnée.

Changer la couleur de fond modifie également l'apparence du calque.

Le mode Affichage s'applique partout

Affichage Les paramètres du mode affectent & #160;:

• L'affichage de la monnaie sélectionnée
• Options d'abandon de devises

Les deux emplacements restent toujours synchronisés.

Les modifications de police s'appliquent globalement

La police sélectionnée affecte tout le texte de Currency Converter, y compris:

• Monnaie sélectionnée
• Options déroulantes
• Résultats de la recherche (le cas échéant)

Besoin de plus de personnalisation?

Pour un style avancé au-delà de l'onglet Design, utilisez :

Avancé → CSS personnalisé

Cela permet aux développeurs d'appliquer des styles entièrement personnalisés au convertisseur de devises.

🚀 Résultat final

Une fois configuré avec succès :

✅ Le Currency Converter correspond à votre marque

✅ Affichage des drapeaux dans votre style et forme préféré

✅ Couleurs et typographie se sentent compatibles avec votre thème

✅ La sélection des devises reste claire et facile à utiliser

✅ Les acheteurs internationaux profitent d'une expérience plus polie

✅ Le convertisseur de devises se sent comme une partie naturelle de votre vitrine

Un convertisseur de devises bien conçu n'a pas seulement l'air mieux – il aide également à créer une expérience d'achat plus lisse et plus fiable pour les clients dans le monde entier. 🌍

Mis à jour le : 10/09/2026