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

Mis à jour le : 10/09/2026