À retenir
- Une barre de progression pour la livraison gratuite n’est pas une fonctionnalité native de Shopify - vous avez besoin d’une application ou de Fudge.
- Free Shipping Bar par Hextom est une application gratuite très utilisée.
- Les barres de progression fonctionnent en indiquant combien un client doit encore dépenser pour bénéficier de la livraison gratuite.
- Une barre efficace utilise un message spécifique et se met à jour de façon dynamique lorsque des articles sont ajoutés au panier.
Les seuils de livraison gratuite augmentent le panier moyen. Une barre de progression rend ce seuil visible, transformant une politique abstraite en une incitation en temps réel. Un message comme “Plus que 12 $ pour profiter de la livraison gratuite” incite les acheteurs à chercher un article supplémentaire à 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 — un éditeur de vitrine IA avec une note de 4.9 sur le Shopify App Store.
Qu’est-ce qu’une barre de progression de livraison gratuite ?
Un élément dynamique - généralement affiché dans le tiroir du panier (cart drawer) ou sur la page panier - qui affiche :
- Le palier de livraison gratuite (ex : « Livraison gratuite pour les commandes de plus de 50 $ »)
- Le total actuel du panier de l’acheteur
- Une barre de progression montrant à quel point ils sont proches du palier
- Un message qui se met à jour à l’ajout d’articles (« Ajoutez 12 $ de plus pour la livraison gratuite » - « Vous avez débloqué la livraison gratuite ! »)
Bien intégrée, c’est l’un des ajouts au panier avec le meilleur ROI. Ça ne coûte rien à l’acheteur (il lui suffit de dépenser plus) et ça peut faire augmenter significativement le panier moyen.
Pour en mesurer les résultats, voir 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’app, définissez votre palier de livraison gratuite (il doit correspondre à votre tarif de livraison gratuite réel dans Paramètres > Expédition).
Étape 4. Personnalisez le texte du message - l’app supporte des variables dynamiques comme {amount_remaining} pour afficher le montant exact manquant.
Étape 5. Choisissez où l’afficher : barre d’annonce sur tout le site, page panier, tiroir du panier, ou partout.
Étape 6. Sauvegardez et prévisualisez.
L’app est gratuite pour une barre basique avec un seul emplacement d’affichage. Les forfaits payants ajoutent le ciblage, l’A/B testing et l’affichage multi-emplacements.
Article lié : 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 de panier incluent une barre de progression de livraison gratuite dans une suite globale pensée pour améliorer le panier :
Monster Upsells - inclut une barre de progression ainsi qu’une section d’upsell dans le tiroir du panier.
iCart Cart Drawer Cart Upsell - barre de progression, upsells dans le panier et options cadeaux réunis dans un seul module de panier.
Si vous ajoutez déjà des upsells ou des cross-sells dans votre panier, ça vaut le coup de prendre une app qui gère les deux.
Article lié : 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 - correspondant exactement au style de votre marque, placée précisément là où vous le souhaitez, sans abonnement à une application - Fudge peut la créer.
Une barre de progression sur mesure est un petit bout de JavaScript et de Liquid qui :
- Lit le total actuel du panier
- Le compare au seuil de livraison gratuite
- Met à jour un élément de barre de progression et le texte du message de manière dynamique
Exemple de prompt pour Fudge :
“Ajoute une barre de progression de livraison gratuite au tiroir de panier. Le seuil est de 75 $. Affiche une barre de progression qui se remplit à mesure que le total du panier augmente. Message : ‘Ajoutez [montant] pour la livraison gratuite’ lorsque le total est en dessous du seuil, ‘Vous avez débloqué la livraison gratuite !’ lorsqu’il est au-dessus. Stylise-la avec la couleur d’accentuation verte de la marque.”
Fudge génère cela sous forme de brouillon. Vous n’avez plus qu’à vérifier et publier.
Sur le même sujet : 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
Si vous la voulez en ligne dans 5 minutes et que le style exact vous importe peu, utilisez l'application gratuite de Hextom. Si la vitesse de chargement est importante ou si vous voulez que la barre corresponde exactement à votre thème, créez-la en code natif — décrivez ce que vous voulez à Fudge ("une barre de progression de livraison gratuite sticky dans le tiroir de panier avec un seuil de 75 $") et il génère la section de façon native pour votre thème. Pas de lourdeur liée aux applications, pas de scripts externes.
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 la géo-IP) et adapter le seuil en conséquence. Assurez-vous que le seuil de la barre correspond à vos paramètres de livraison réels (Paramètres → Expédition et livraison), sinon vous afficherez une promesse que vous ne tiendrez pas lors du checkout.
Cela dépend du thème et de l'intégration. Les applications qui s'injectent dans le tiroir de panier fonctionnent pour la plupart des thèmes modernes 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 lorsque des articles sont ajoutés (cart:updated, change:cart, ou des noms spécifiques au thème). Si la barre ne se met pas à jour lorsque des articles sont ajoutés, c'est que le mauvais événement est écouté.
Oui, et c'est sur mobile qu'elle a le plus d'impact - l'abandon de panier y est le plus élevé, et un message clair tel que "Ajoutez X $ pour la livraison gratuite" permet aux acheteurs de rester concentrés. Assurez-vous que la barre est responsive : barre de progression sur toute la largeur, retour à la ligne propre pour le message, et actionnable au toucher (tappable) plutôt que de s'appuyer sur des effets au survol (hover).
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 X $ de plus". C'est le bon comportement - vous ne voulez pas accorder la livraison gratuite sur une commande qui n'y a plus droit. Testez cela avec vos règles d'expédition réelles, car certains marchands configurent la livraison gratuite sur le sous-total avant réduction.
