> ## 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 placer la barre d'expédition gratuite dans une position personnalisée > ℹ️ **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. Hoppy Free Shipping offre deux types de placement principaux pour la barre d'expédition gratuite: * 📌 Placements par défaut * 🧩 Placements sur mesure Dans la plupart des cas, les zones de placement par défaut fonctionnent parfaitement bien. Cependant, parfois, les marchands peuvent vouloir plus de flexibilité et préfèrent placer la barre d'expédition gratuite dans un endroit complètement personnalisé selon leur disposition en vitrine. C'est exactement là que le **Position personnalisée** fonctionnalité devient utile ✨ En utilisant la position personnalisée, la barre de livraison gratuite peut être placée : * À l'intérieur Shopify Blocs d'application * À l'intérieur des sections de liquide personnalisées * Fichiers de thème à l'intérieur * À l'intérieur des emplacements de stockage contrôlés manuellement Cette documentation explique comment activer correctement la position personnalisée et comment placer la barre d'expédition gratuite en utilisant les deux méthodes disponibles. --- # **⚠️ Comprendre les différences de flux de travail** Le comportement de la position personnalisée dépend du type de workflow sélectionné lors de la création de la configuration de la livraison gratuite Upsell. --- # **🎯 Sur la base des objectifs (placement multiple)** Les **Sur la base des objectifs** Le flux de travail comprend plusieurs zones de placement : * Page produit * Tiroir * Page panier * Bannière Pour ce workflow : → Ouvrir l'onglet placement que vous souhaitez personnaliser → Changer sa position pour **Position personnalisée** Une fois activé : → A **Extrait de code barre d'expédition** devient disponible ⚠️ Important: L'onglet placement doit en fait être modifié pour **Position personnalisée**. Sinon, la barre d'expédition gratuite continuera à utiliser le comportement de placement par défaut. --- # **📍 D'après le placement (placement unique)** Les **Sur la base du placement** flux de travail ne contrôle qu'une seule zone de placement. Pour ce workflow, deux méthodes de position personnalisée sont disponibles : 1. 🆔 Identification de la barre d'expédition 2. 🧩 Extrait de code barre d'expédition --- ## **🆔 Identification de la barre d'expédition** Cette méthode est principalement utilisée avec Shopify Blocs d'application. L'identifiant de la barre d'expédition relie le bloc d'application en front de magasin à la configuration de livraison gratuite sélectionnée. --- ## **🧩 Extrait de code barre d'expédition** Cette méthode offre une flexibilité de placement plus avancée. L'extrait de code peut être : * Ajouté à l'intérieur d'un bloc Liquid personnalisé * Ajouté directement dans Shopify Fichiers thématiques --- # **🛠️ Étape 1 — Ouverture Hoppy Free Shipping** Ouvrir la **Hoppy Free Shipping** application de votre Shopify Admin. --- # **📂 Étape 2 — Ouvrir ou créer une livraison gratuite Upsell** Vous pouvez : → Ouvrir une configuration d'upsell d'expédition gratuite existante → Ou créez une nouvelle configuration --- # **⚙️ Étape 3 — Naviguez dans les paramètres de placement** La prochaine étape dépend du type de flux de travail actuellement utilisé. --- ## **🎯 Basé sur les objectifs Flux de travail** Si vous utilisez **Sur la base des objectifs** flux de travail : → Ouvrez l'onglet placement où vous voulez placer manuellement la barre d'expédition gratuite Exemples: * Page produit * Tiroir * Page panier * Bannière --- ## **📍 D'après le flux de travail de placement** Si vous utilisez **Sur la base du placement** flux de travail : → Naviguez directement sur le **Placement** onglet Comme ce workflow ne contrôle qu'un seul placement, tous les réglages liés au placement y apparaîtront. --- # **🎯 Étape 4 — Changer le placement en position personnalisée** À l'intérieur des paramètres de placement: → Changer la **Affichage (inclus)** ou **Placement** option pour: **Position personnalisée** Alors : → Cliquez sur **Enregistrer** ⚠️ Important: Activer la position personnalisée supprime la barre d'expédition gratuite des zones de placement par défaut. La barre de livraison gratuite n'apparaîtra maintenant que là où vous la placez manuellement. ℹ️ Si vous utilisez **Sur la base des objectifs** flux de travail, aller à **Méthode 2**. --- # **🆔 Méthode 1 — Utilisation de l'identificateur de barre d'expédition** Cette méthode est idéale lorsque vous voulez placer la barre de livraison gratuite directement en utilisant ShopifyÉditeur de thème. ℹ️ Cette méthode est principalement disponible pour **Sur la base du placement** les flux de travail. --- # **🎨 Étape 5 — Ouvrir Shopify Éditeur de thème** De Shopify Administrateur : → Aller à **Canaux de vente → Boutique en ligne** → Cliquez sur **Modifier le thème** Cela ouvre la Shopify Éditeur de thème. --- # **➕ Étape 6 — Ajouter le bloc d'application de livraison gratuite** Dans l'éditeur de thème: → Naviguez dans la section où vous voulez que la barre d'expédition gratuite apparaisse → Tourner autour des sections compatibles jusqu'au bleu-couleur ➕ l'icône apparaît → Cliquez sur **Ajouter un bloc** Alors : → Ouvrir la **Applications** Catégorie → Sélectionner **Livraison gratuite Upsell** Le bloc d'applications sera maintenant ajouté à la zone d'entrée sélectionnée. --- # **🔗 Étape 7 — Ajouter l'ID de la barre d'expédition** Une fois le bloc App ajouté : → Saisissez l'ID de la barre d'expédition dans les paramètres du bloc d'application Alors : → Enregistrer Shopify Thème → Enregistrer la configuration d'expédition gratuite à l'intérieur Hoppy Free Shipping ainsi que ⚠️ Important: Les deux économies sont nécessaires. Sinon, la barre d'expédition gratuite peut ne pas apparaître correctement sur le devant du magasin. --- # **🧩 Méthode 2 — Utilisation de l'extrait de code à barres d'expédition** Cette méthode est utile lorsque vous voulez une flexibilité de placement plus avancée. L'extrait de code de barre d'expédition peut être: * Ajouté en utilisant un bloc Liquid personnalisé * Ajouté directement dans Shopify Fichiers thématiques ℹ️ C'est la seule méthode de position personnalisée disponible pour le **Sur la base des objectifs** les flux de travail. --- # **➕ Étape 8 — Ajouter un bloc liquide personnalisé** À l'intérieur Shopify Éditeur de thème : → Naviguez dans la zone où vous voulez que la barre d'expédition gratuite apparaisse → Tourner autour des sections compatibles jusqu'au bleu-couleur ➕ l'icône apparaît → Rechercher **Liquide personnalisé** Alors : → Ajouter l'extrait de code de barre d'expédition dans le bloc Custom Liquid Cela permet à la barre d'expédition gratuite de rendre dans la position d'entrée sélectionnée. --- # **💻 Ajout direct de l'extrait de code dans les fichiers thématiques** Si nécessaire, l'extrait de code de barre d'expédition peut également être ajouté directement dans Shopify Fichiers de code thématique. Ceci est utile lorsque: * Les blocs d'application ne sont pas disponibles * Les sections Liquid personnalisées ne sont pas prises en charge * La personnalisation avancée du front de magasin est nécessaire --- # **⚙️ Ouverture Shopify Éditeur de code** Pour ouvrir la Shopify Éditeur de code : → Aller à **Canaux de vente → Boutique en ligne** → Cliquez sur le menu à trois points **Modifier le thème** bouton → Cliquez sur **Modifier le code** ⚠️ Important: Nous ne recommandons pas de modifier Shopify Fichiers de thèmes sauf : * Vous êtes à l'aise de travailler avec Shopify code * Ou vous comprenez les changements en cours Modifications incorrectes à l'intérieur Les fichiers thématiques peuvent affecter le comportement de stockage. --- # **🧩 Identifier la zone de front correcte** Avant d'insérer l'extrait de code de barre d'expédition, il est important d'identifier l'emplacement exact de la barre d'expédition gratuite. Une façon simple de le faire: → Ouvrez votre vitrine dans le navigateur → Faites un clic droit près de la zone où vous voulez la barre de livraison gratuite → Cliquez sur **Inspecter** Cela ouvre les outils de développement du navigateur. De là: → Inspecter la structure HTML environnante → Identifier les noms de classe ou les références de section utiles → Correspondez à ces sections avec le correspondant Shopify `.liquid` fichiers dans l'éditeur de code # Cela vous aide à localiser le bon fichier thème plus précisément ✨ # \--- # **🔍 Trouver le fichier de thème correct** Après ouverture Shopify Éditeur de code : → Naviguez dans les fichiers Thème sur le côté gauche → Localiser la `.liquid` fichier responsable de la zone où vous voulez que la barre de livraison gratuite apparaisse → Rechercher n'importe quelle référence id/class en utilisant la fonction de recherche Code Editor. → Cliquez sur le plus prometteur `.liquid` fichier Par exemple: * Des sections liées au produit peuvent exister à l'intérieur: * `main-product.liquid` * `product-template.liquid` * Les sections relatives au chariot peuvent exister à l'intérieur: * `cart.liquid` * `cart-drawer.liquid` * Des sections personnalisées peuvent exister à l'intérieur: * `sections/*.liquid` --- # **➕ Ajouter l'extrait de code de barre d'expédition** Une fois le correct `.liquid` fichier est identifié: → Coller l'extrait de code de barre d'expédition dans la position souhaitée dans le fichier ⚠️ Important: Assurez-vous que l'extrait est ajouté soigneusement à l'endroit approprié. Un placement incorrect peut entraîner: * Questions de mise en page * Mauvais rendu * Comportement inattendu de la vitrine --- # **💾 Enregistrer le fichier thématique** Après avoir inséré l'extrait de code: → Cliquez sur **Enregistrer** Alors : → Rafraîchir l'aperçu de la vitrine → Vérifier que la barre de livraison gratuite apparaît correctement dans l'emplacement personnalisé sélectionné ✨ --- # **🎉 Résultat final** Une fois configuré avec succès : ✅ La barre d'expédition gratuite peut apparaître dans des positions en vitrine entièrement personnalisées ✅ Shopify App Blocks peut se connecter correctement en utilisant Shipping Bar ID ✅ Un placement avant magasin avancé devient possible en utilisant Code Snippets ✅ Les commerçants gagnent beaucoup plus de flexibilité par rapport à la visibilité en magasin ✨