ℹ️ 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:

<div class="futureblink-currency-box"></div>

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. 🎯

Mis à jour le : 10/09/2026