> ## 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 une position personnalisée pour le convertisseur de devises > ℹ️ **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 de position personnalisée vous permet de placer le convertisseur de devises exactement où vous le souhaitez sur votre front de magasin. Au lieu d'utiliser les positions flottantes ou d'en-tête par défaut, vous pouvez attacher le convertisseur de devises à un élément spécifique de votre Shopify thème en utilisant un sélecteur CSS. Cela vous donne plus de flexibilité et aide le convertisseur de devises à se fondre naturellement dans la conception de votre magasin. 🎯 --- # **⚠️ Avant de commencer** Avant de définir une position personnalisée, assurez-vous: * Hoppy Currency Converter est installé et configuré * L'application Embed est activée * L'embarquement est terminé * Vous savez où vous aimeriez que le convertisseur de devises apparaisse 💡 Les emplacements communs comprennent des barres de navigation, des en-têtes, des sidebars, des menus utilitaires et des sections en vitrine personnalisées. --- # **✅ Étape 1: Ouvrez les paramètres d'affichage** Ouvrir la **Hoppy Currency Converter** application de votre Shopify Admin. Alors : → Aller à **Paramètres** → Cliquez sur **Affichage** Localiser : * Position du bureau * Position mobile Vous pouvez configurer le positionnement personnalisé séparément pour les appareils de bureau et mobiles. --- # **✅ Étape 2: Sélectionnez la position personnalisée** Sous **Style de position**, vous verrez les options de placement disponibles. ### **Styles de position disponibles** #### **flottant** Affiche le convertisseur de devises comme un widget flottant sur le front de magasin. --- #### **En-tête** Place le convertisseur de devises dans l'en-tête du magasin. --- #### **Position personnalisée** Place le convertisseur de devises dans un élément spécifique sélectionné par vous. Sélectionner & #160;: → **Position personnalisée** Une fois sélectionné, les paramètres supplémentaires deviennent disponibles automatiquement. --- # **✅ Étape 3 : Entrez l'élément cible** Dans la **Élément personnalisé** champ, entrez le sélecteur CSS de l'élément où le convertisseur de devises doit apparaître. ### **Types de sélecteur pris en charge** #### **Sélecteur de classe** Commence par une période (`.`) ### **Exemple** `.header-actions` --- #### **Sélecteur d'ID** Commence par un hachage (`#`) ### **Exemple** `#currency-wrapper` --- #### **Sélecteur d'éléments** Utilise directement le nom de l'élément HTML. ### **Exemple** `header` --- # **🔍 Comment trouver un sélecteur** Si vous ne savez pas quel sélecteur utiliser : 1. Ouvrez votre vitrine. 2. Faites un clic droit sur la zone où vous voulez le convertisseur de devises. 3. Cliquez sur **Inspecter**. 4. Localiser l'élément HTML. 5. Faites un clic droit sur l'élément. 6. Sélectionner **Copier → Copier le sélecteur**. 7. Coller le sélecteur copié dans le **Élément personnalisé** sur le terrain. ### **Exemple** `#block-template--166120#######__banner_bckcpm-video_CLEttT > div.media-with-text__content.rounded.text-custom > div > a` ⚠️ Évitez d'utiliser temporairement Shopify\-les ID générés, car ils peuvent changer après les mises à jour du thème. L'utilisation de noms de classe stables est recommandée dans la mesure du possible. --- # **✅ Étape 4: Choisir un emplacement** Après avoir entré le sélecteur, choisissez comment insérer le convertisseur de devises par rapport à cet élément. ### **Options de placement disponibles** --- ## **Avant** Place le convertisseur de devises immédiatement avant l'élément sélectionné. ### **Exemple** Si vous ciblez une icône de panier : → Le convertisseur de devises apparaît à gauche de l'icône du panier. --- ## **Après** Place le convertisseur de devises immédiatement après l'élément sélectionné. ### **Exemple** Si vous ciblez un logo : → Le convertisseur de devises apparaît à droite du logo. --- ## **Annexe** Place le convertisseur de devises dans l'élément sélectionné, à la fin. ### **Exemple** Si un conteneur de navigation est ciblé: → Le convertisseur de devises apparaît après tous les éléments de navigation existants. 💡 C'est souvent la meilleure option de départ pour la plupart des thèmes. --- ## **Préparation** Place le convertisseur de devises dans l'élément sélectionné, au début. ### **Exemple** Si un conteneur de navigation est ciblé: → Le convertisseur de devises apparaît avant tous les éléments de navigation existants. --- # **✅ Étape 5: Enregistrer vos changements** Une fois le sélecteur et l'option de placement configurés : → Cliquez sur **Enregistrer** Le convertisseur de devises va maintenant essayer de rendre dans l'emplacement sélectionné. --- # **✅ Étape 6 : Vérifier le placement** Visitez votre vitrine et confirmez que le convertisseur de devises apparaît à l'emplacement désiré. Si cela n'apparaît pas : * Vérifier que le sélecteur est correct * Confirmez que l'élément existe sur la page * Essayez une autre option de placement * Rafraîchir la page 💡 Un rafraîchissement dur est souvent utile après avoir effectué des changements de placement. --- # **🛠️ Autre méthode : placement manuel** Si utiliser un sélecteur CSS n'est pas adapté à votre thème, vous pouvez placer manuellement le convertisseur de devises en utilisant son extrait de code. Cette méthode est utile lorsque: * Vous voulez un contrôle complet sur l'endroit où le convertisseur de devises apparaît. * Votre thème ne contient pas d'élément approprié pour cibler avec **Position personnalisée**. * Vous êtes à l'aise de faire des personnalisations de thème mineur. ### **Étape 1: Copier l'extrait de code du convertisseur de devises** Ouvrir la **Hoppy Currency Converter** application de votre Shopify Admin. Alors : → Aller à **Avancé** Localiser & #160;: → **Boîte de conversion de devises Placement** Copiez l'extrait de code fourni de notre application ou ci-dessous: `
` C'est l'extrait que vous placerez où vous voulez que le convertisseur de devises apparaisse. --- ### **Étape 2: Ajouter l'extrait de code à votre thème** #### **Option A — Utilisation d'un bloc liquide personnalisé** Des Shopify Éditeur de thème : → Naviguez dans la section où vous souhaitez que le convertisseur de devises apparaisse. → Cliquez sur le **➕ Ajouter un bloc** bouton. → Rechercher et ajouter un **Liquide personnalisé** bloc. → Coller l'extrait de code de conversion de devises dans le bloc Custom Liquid. → Cliquez sur **Enregistrer**. --- #### **Option B — Édition de fichiers thématiques** Pour la personnalisation avancée du front de magasin, vous pouvez également ajouter le même extrait de code directement à votre Shopify fichiers thématiques. Allez à : **Boutique en ligne → Thèmes** → Cliquez sur le **(En milliers de dollars des États-Unis)** menu à côté **Modifier le thème** → Sélectionner **Modifier le code** Localiser les `.liquid` fichier pour la section où vous souhaitez que le convertisseur de devises apparaisse, puis collez l'extrait de code de convertisseur de devises dans l'emplacement désiré. ⚠️ **Important:** Cette méthode est destinée aux marchands d'édition confortable Shopify code thématique. Nous vous recommandons de dupliquer votre thème avant d'apporter des modifications, car des modifications incorrectes peuvent affecter votre mise en page ou votre fonctionnalité. --- ### **Le sélecteur doit exister sur la page** Si l'élément sélectionné n'existe que sur certaines pages, le convertisseur de devises n'apparaîtra que sur ces pages. L'utilisation d'en-têtes globaux ou de sélecteurs de navigation fournit généralement les meilleurs résultats. --- ### **Éléments cachés Cacher le convertisseur** Si l'élément sélectionné est caché par le thème sur certains appareils, le convertisseur de devises sera également caché. Toujours tester les mises en page de bureau et mobiles. --- ### **Vous pouvez revenir à tout moment** Si la position personnalisée n'est plus nécessaire: → Retourner à **Affichage des paramètres** → Changer **Style de position** retour à: * flottant * En-tête Aucune configuration supplémentaire n'est requise. --- # **🎉 Résultat final** Une fois configuré avec succès : ✅ Le convertisseur de devises apparaît exactement où vous le voulez ✅ Des mises en page de bureau et mobiles peuvent utiliser différents emplacements ✅ Le widget s'intègre naturellement dans votre conception de magasin ✅ Le placement peut être ajusté sans modifier les fichiers thématiques ✅ Les marchands avancés peuvent placer manuellement le convertisseur en utilisant des fichiers Custom Liquid ou Theme pour un contrôle complet L'utilisation de Custom Position aide à créer une expérience de magasin plus fluide et professionnelle tout en gardant le convertisseur de devises facilement accessible aux acheteurs. 🎯