Points à retenir
- Une barre de progression de livraison gratuite n’est pas une fonctionnalité native de Shopify. Certains thèmes en incluent une ; sinon, vous avez besoin d’une application ou d’un code sur mesure.
- La Free Shipping Bar par Hextom est une application gratuite très utilisée.
- Les barres de progression montrent au client combien il doit encore dépenser pour bénéficier de la livraison gratuite.
- Une barre efficace utilise des messages précis et se met à jour dynamiquement au fur et à mesure que des articles sont ajoutés au panier.
Pour ajouter une barre de progression de livraison gratuite sur Shopify, installez une application gratuite comme Free Shipping Bar by Hextom, utilisez une application de cart drawer qui en inclut une, ou intégrez-la dans votre thème avec un petit bout de code Liquid et JavaScript. La barre transforme votre seuil de livraison gratuite en un objectif visible : « Plus que 12 $ pour la livraison gratuite » incite les acheteurs à chercher un article de plus à ajouter.
Pourquoi vous pouvez nous faire confiance
Nous avons travaillé sur la stratégie de conversion du panier pour des centaines de boutiques Shopify. Nous avons également créé Fudge, l’opérateur IA pour les boutiques Shopify, noté 4.9 sur le Shopify App Store. Les messages de panier comme celui-ci font partie des petites fonctionnalités qu’il intègre directement dans un thème plutôt que de passer par une application.
Qu’est-ce qu’une barre de progression de livraison gratuite ?
Un élément dynamique - généralement affiché dans le cart drawer ou sur la page panier - qui indique :
- Le seuil de livraison gratuite (par ex., « Livraison gratuite pour toute commande de plus de 50 $ »)
- Le total actuel du panier de l’acheteur
- Une barre de progression montrant à quel point il est proche du seuil
- Un message qui se met à jour à mesure qu’il ajoute des articles (« Ajoutez encore 12 $ pour la livraison gratuite » - « Vous avez débloqué la livraison gratuite ! »)
Bien mis en place, cela ne coûte presque rien à la boutique et donne aux acheteurs une vraie raison d’ajouter un article de plus.
Pour mesurer l’impact de la barre, consultez Suivre les conversions sur Shopify.
Option 1 - Free Shipping Bar par Hextom (l’app la plus populaire)
C’est l’application de barre de livraison gratuite la plus installée sur le Shopify App Store.
Étape 1. Allez sur le Shopify App Store et cherchez « Free Shipping Bar by Hextom ».
Étape 2. Installez l’application.
Étape 3. Dans les paramètres de l’application, configurez votre seuil de livraison gratuite (il doit correspondre à votre vrai tarif de livraison gratuite dans Paramètres > Expédition).
Étape 4. Personnalisez le texte du message - l’application prend en charge des variables dynamiques comme {amount_remaining} pour afficher l’écart exact.
Étape 5. Choisissez où l’afficher : barre d’annonce sur tout le site, page panier, cart drawer, ou partout.
Étape 6. Enregistrez et prévisualisez.
L’application est gratuite pour une barre basique affichée à un seul endroit. Les forfaits payants ajoutent le ciblage, l’A/B testing et l’affichage multi-emplacements.
Pour une version en code qui se met à jour quand le panier change, consultez Ajouter une barre de livraison gratuite dynamique sur Shopify.
Option 2 - Les apps d’upsell pour tiroir du panier avec barre de progression
Plusieurs applications d’optimisation du panier incluent une barre de progression de livraison gratuite au sein d’une suite plus large d’amélioration du panier :
Monster Upsells - inclut une barre de progression ainsi qu’une section d’upsell dans le cart drawer.
iCart Cart Drawer Cart Upsell - barre de progression, cart upsells, options cadeaux dans un seul module de panier.
Si vous ajoutez déjà des upsells ou des cross-sells dans votre panier, cela vaut le coup de prendre une application qui gère les deux.
Pour d’autres offres liées au panier, consultez Ajouter des Upsells dans le panier Shopify.
Option 3 - Créer une barre de progression sur mesure avec Fudge
Pour une barre de progression native à votre thème - respectant parfaitement le style de votre marque, placée exactement où vous le souhaitez, sans abonnement à une application - Fudge, l’opérateur IA pour les boutiques Shopify, peut la créer.
Une barre de progression sur mesure est un petit morceau de JavaScript et de Liquid qui :
- Lit le total actuel du panier
- Le compare au seuil de livraison gratuite
- Met à jour dynamiquement l’élément de la barre de progression et le texte du message
Exemple de prompt pour Fudge :
“Ajoute une barre de progression de livraison gratuite au cart drawer. Le seuil est de 75 $. Affiche une barre de progression qui se remplit à mesure que le total du panier augmente. Message : ‘Ajoutez encore [montant] pour la livraison gratuite’ en dessous du seuil, ‘Vous avez débloqué la livraison gratuite !’ au-dessus. Applique la couleur d’accent verte de la marque.”
Fudge génère cela en tant que brouillon. Révisez et publiez. Une fois en ligne, Fudge compare la valeur des commandes des semaines précédentes et suivantes pour que vous puissiez voir si la barre a eu un impact. Cette même vue avant/après couvre les bundles, les upsells et les cadeaux gratuits dans son travail de merchandising.
Pour savoir où se trouvent les scripts du thème, consultez Ajouter du JavaScript personnalisé sur Shopify.
Ce qui rend une barre de progression de livraison gratuite efficace
Définissez le palier de façon stratégique. Le palier doit être fixé au-dessus de votre panier moyen (AOV). Si votre panier moyen est de 45 $, mettez la livraison gratuite à 60 $. S’il est trop proche du panier moyen, cela ne changera pas les comportements. S’il est trop loin, cela paraîtra inatteignable.
Utilisez un message précis et en temps réel. « Ajoutez 12,50 $ de plus pour la livraison gratuite » est bien plus convaincant que « Livraison gratuite à partir de 50 $ d’achats ». L’écart exact rend l’action très concrète.
Célébrez le déblocage. Quand le palier est franchi, affichez un message de félicitations (« Vous avez débloqué la livraison gratuite ! ») et un petit changement visuel (la barre se complète, passe au vert). Ce renforcement positif rassure les acheteurs dans leur décision.
Affichez-la très tôt. Montrez la barre même quand le panier est vide (« Dépensez 75 $ pour la livraison gratuite »). Ça fixe les attentes avant même que l’acheteur ne commence à ajouter des produits.
Testez l’emplacement. Pour beaucoup de boutiques, afficher la barre en haut du tiroir du panier (avant les articles) donne de meilleurs résultats que de la placer en bas.
Comment ajouter une barre de livraison gratuite sur tout le site
De nombreuses boutiques affichent également une barre de livraison gratuite sous forme de bannière d’annonce en haut de chaque page (pas seulement dans le panier). C’est très différent de la barre de progression du panier : il s’agit d’une bannière statique ou semi-dynamique informant tous les visiteurs de la politique de livraison gratuite.
Ceci est géré par la barre d’annonces dans l’Éditeur de thème (si votre thème en a une) ou par une app. La barre de progression du panier est un élément distinct, propre au panier.
FAQ
Dois-je utiliser une application de barre de livraison gratuite ou créer la mienne ?
Si vous voulez qu'elle soit en ligne en 5 minutes et que le design précis vous importe peu, utilisez l'application gratuite de Hextom. Si la vitesse de la page est importante ou si vous voulez que la barre s'intègre parfaitement à votre thème, développez-la en code natif — décrivez ce que vous voulez à Fudge ("une barre de progression de livraison gratuite sticky dans le cart drawer avec un seuil de 75 $") et il génère la section de façon native pour votre thème. Pas de surcharge liée à l'application, pas de scripts externes.
Le seuil de livraison gratuite peut-il différer selon le pays ou la région ?
Oui. La plupart des applications gèrent les seuils par marché, et une intégration sur mesure peut lire le pays du visiteur (via Shopify.country ou géo-IP) et adapter le seuil en conséquence. Assurez-vous que le seuil de la barre corresponde à vos vrais paramètres d'expédition (Paramètres → Expédition et livraison), sinon vous ferez une promesse que vous ne tiendrez pas au passage à la caisse.
Une barre de livraison gratuite fonctionnera-elle sur mon cart drawer ?
Cela dépend du thème et de l'implémentation. Les applications qui s'injectent dans le cart drawer fonctionnent sur la plupart des thèmes modernes de l'Online Store 2.0. Les implémentations sur mesure doivent écouter l'événement de mise à jour du panier que votre thème déclenche lors de l'ajout d'articles (Dawn publie son propre événement PUB_SUB_EVENTS.cartUpdate ; d'autres thèmes déclenchent des événements DOM comme cart:updated). Si la barre ne se met pas à jour quand des articles sont ajoutés, c'est que le mauvais événement est écouté.
Une barre de progression de livraison gratuite fonctionne-t-elle sur mobile ?
Oui, et c'est sur mobile qu'elle a le plus grand impact - l'abandon de panier y est le plus élevé, et un message clair "Ajoutez X $ pour la livraison gratuite" permet aux acheteurs de rester concentrés. Assurez-vous que la barre soit responsive : barre de progression sur toute la largeur, texte qui revient à la ligne proprement, et cliquable plutôt que de dépendre des états au survol (hover).
Comment la barre se met-elle à jour lorsqu'un code promo est appliqué ?
La plupart des applications et des barres sur mesure bien conçues comparent le total_price (après réduction) du panier au seuil. Donc si un code fait passer le total en dessous du seuil, la barre revient à "Ajoutez encore X $". C'est le bon comportement - vous ne voulez pas offrir la livraison gratuite sur une commande qui n'y a plus droit. Testez cela avec vos vraies règles d'expédition, car certains marchands basent la livraison gratuite sur le sous-total avant réduction.
