Tu veux augmenter ton panier moyen sans dépenser un centime en publicité supplémentaire ? La free shipping bar — aussi appelée barre de livraison offerte — est l’une des techniques les plus simples et les plus efficaces pour y parvenir.
Le principe est redoutablement simple : tu affiches un message dynamique dans ta boutique Shopify qui indique au visiteur combien il lui manque pour obtenir la livraison gratuite. Résultat : il ajoute un produit de plus à son panier. Et toi, tu augmentes ton ticket moyen sans effort.
Dans ce tutoriel, je vais te montrer comment créer cette barre sans application payante, directement en Liquid, compatible avec tous les thèmes Shopify modernes (OS 2.0). C’est rapide, léger, et ça convertit vraiment.
Démarrer mon essai gratuit Shopify →
Pourquoi la free shipping bar est indispensable pour ta boutique
Avant de rentrer dans le code, parlons business. La livraison gratuite est aujourd’hui le premier critère de décision d’achat pour les consommateurs français en ligne. Selon plusieurs études récentes, plus de 75% des acheteurs abandonnent leur panier si les frais de port leur semblent trop élevés.
En proposant la livraison offerte à partir d’un certain montant (disons 50€ ou 60€), tu règles ce problème. Mais la vraie magie vient de la barre de progression : quand un client voit qu’il lui manque seulement 8€ pour obtenir la livraison gratuite, il va naturellement chercher un petit produit à ajouter. C’est de la psychologie pure, et ça marche.
Les résultats typiques :
- Augmentation du panier moyen de 15 à 30%
- Réduction du taux d’abandon de panier
- Meilleure expérience utilisateur (le client se sent récompensé)
Ce qu’on va créer
Une barre fixe en haut de la boutique qui :
- Affiche un message motivant avec le montant restant pour la livraison offerte
- Se met à jour automatiquement quand le client modifie son panier
- Affiche un message de félicitations quand le seuil est atteint
- Est entièrement personnalisable (couleurs, textes, seuil)
- Fonctionne sur mobile et desktop
Étape 1 — Définir ton seuil de livraison offerte
Avant de commencer, tu dois choisir ton seuil. La règle générale : ton seuil de livraison gratuite doit être environ 30 à 40% au-dessus de ton panier moyen actuel.
Par exemple, si ton panier moyen est de 40€, fixe le seuil à 55-60€. C’est atteignable, donc motivant — mais pas trop facile non plus.
Pour ce tutoriel, on va utiliser 50€ comme exemple. Tu pourras facilement changer cette valeur dans le code.
Étape 2 — Créer le snippet Liquid
Dans ton espace admin Shopify, va dans Boutique en ligne → Thèmes → Actions → Modifier le code.
Ensuite, dans le dossier Snippets, clique sur Ajouter un nouveau snippet et nomme-le free-shipping-bar.
Colle ce code :
{% comment %}
Free Shipping Bar — Speed Ecom
Compatible Shopify OS 2.0
{% endcomment %}
{% assign free_shipping_threshold = 5000 %} {% comment %} 50€ en centimes {% endcomment %}
{% assign cart_total = cart.total_price %}
{% assign remaining = free_shipping_threshold | minus: cart_total %}
<div id="free-shipping-bar" class="fsb-wrapper" aria-live="polite">
{% if cart_total >= free_shipping_threshold %}
<p class="fsb-message fsb-success">
🎉 Félicitations ! Vous bénéficiez de la <strong>livraison offerte</strong>.
</p>
{% else %}
{% assign remaining_formatted = remaining | money %}
<p class="fsb-message">
Plus que <strong>{{ remaining_formatted }}</strong> pour bénéficier de la <strong>livraison offerte</strong> !
</p>
<div class="fsb-progress-container">
{% assign progress = cart_total | times: 100 | divided_by: free_shipping_threshold %}
<div class="fsb-progress-bar" style="width: {{ progress }}%"></div>
</div>
{% endif %}
</div>
Note : Shopify stocke les prix en centimes. 50€ =
5000. Adapte la valeurfree_shipping_thresholdselon ton seuil.
Étape 3 — Ajouter le CSS
Dans le même fichier ou dans ton fichier base.css / theme.css, ajoute ce style :
/* ===== FREE SHIPPING BAR ===== */
.fsb-wrapper {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
color: #ffffff;
text-align: center;
padding: 10px 20px;
font-size: 14px;
position: relative;
z-index: 100;
}
.fsb-message {
margin: 0 0 6px 0;
font-weight: 400;
letter-spacing: 0.02em;
}
.fsb-message strong {
color: #f0c040;
font-weight: 700;
}
.fsb-success {
font-size: 15px;
margin: 0;
}
.fsb-progress-container {
width: 100%;
max-width: 400px;
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
margin: 0 auto;
overflow: hidden;
}
.fsb-progress-bar {
height: 100%;
background: linear-gradient(90deg, #f0c040, #f97316);
border-radius: 3px;
transition: width 0.4s ease;
min-width: 4px;
}
/* Mobile */
@media (max-width: 768px) {
.fsb-wrapper {
padding: 8px 16px;
font-size: 13px;
}
}
Tu peux personnaliser les couleurs selon ta charte graphique. La barre dégradée or/orange fonctionne très bien sur fond sombre et attire l’œil sans être agressive.
Étape 4 — Inclure le snippet dans ton layout
Dans le fichier layout/theme.liquid, repère la balise <body> et ajoute le snippet juste après :
<body>
{% render 'free-shipping-bar' %}
...
Si ton thème utilise des sections d’en-tête, tu peux aussi l’inclure directement dans sections/header.liquid, avant le contenu principal du header.
Étape 5 — Mise à jour dynamique au panier (JavaScript)
Pour que la barre se mette à jour en temps réel quand le client ajoute ou supprime un article — notamment sur les pages panier et produit — ajoute ce script avant la fermeture de </body> :
<script>
document.addEventListener('DOMContentLoaded', function() {
// Écoute les événements de modification du panier (compatibles avec la plupart des thèmes OS 2.0)
document.addEventListener('cart:updated', function(event) {
updateFreeShippingBar(event.detail);
});
// Compatibilité avec le cart drawer de certains thèmes
if (window.Shopify && window.Shopify.onCartUpdate) {
Shopify.onCartUpdate = function(cart) {
updateFreeShippingBar(cart);
};
}
function updateFreeShippingBar(cart) {
if (!cart || cart.total_price === undefined) return;
const threshold = 5000; // 50€ en centimes — adapter selon ton seuil
const total = cart.total_price;
const remaining = threshold - total;
const bar = document.getElementById('free-shipping-bar');
if (!bar) return;
if (total >= threshold) {
bar.innerHTML = '<p class="fsb-message fsb-success">🎉 Félicitations ! Vous bénéficiez de la <strong>livraison offerte</strong>.</p>';
} else {
const remainingFormatted = (remaining / 100).toFixed(2).replace('.', ',') + '€';
const progress = Math.min(Math.round((total / threshold) * 100), 100);
bar.innerHTML = `
<p class="fsb-message">
Plus que <strong>${remainingFormatted}</strong> pour bénéficier de la <strong>livraison offerte</strong> !
</p>
<div class="fsb-progress-container">
<div class="fsb-progress-bar" style="width: ${progress}%"></div>
</div>
`;
}
}
});
</script>
Étape 6 — Tester et ajuster
Une fois le code en place, passe en mode prévisualisation dans Shopify et teste :
- Panier vide → La barre affiche “Plus que 50,00€ pour la livraison offerte”
- Panier à 25€ → La barre affiche “Plus que 25,00€” avec une progression à 50%
- Panier à 50€ ou plus → La barre affiche le message de félicitations
Si tu utilises un cart drawer (tiroir panier latéral), vérifie que le script JavaScript se déclenche correctement. Certains thèmes utilisent leurs propres événements personnalisés — consulte la documentation de ton thème si la mise à jour dynamique ne fonctionne pas.
Variante : afficher la barre uniquement sur certaines pages
Si tu veux restreindre l’affichage de la barre à certaines pages (par exemple, uniquement sur les pages produit et panier), utilise les conditions Liquid :
{% if template == 'product' or template == 'cart' or template == 'collection' %}
{% render 'free-shipping-bar' %}
{% endif %}
Conseils pour maximiser l’impact
Choisis bien ton seuil. Un seuil trop bas ne crée pas d’incitation supplémentaire. Un seuil trop élevé frustre le client. Analyse ton panier moyen actuel et fixe le seuil à 30-40% au-dessus.
Intègre la livraison offerte dans ta stratégie tarifaire. Si tes marges sont serrées, assure-toi que le coût de la livraison offerte est absorbé par la hausse du panier moyen. En général, c’est largement rentable dès les premières semaines.
Teste différents messages. “Plus que X€ pour la livraison offerte” est classique, mais tu peux tester des formulations plus engageantes : “Vous n’êtes plus qu’à X€ d’une livraison GRATUITE !” ou “Ajoutez un produit à X€ et profitez de la livraison offerte”.
Positionne la barre au bon endroit. En haut de page, elle est visible dès le chargement. Certains e-commerçants la placent aussi en bas de leur tiroir panier pour rappeler l’offre au moment de finaliser.
Résultat final
En suivant ce tutoriel, tu obtiens une barre de livraison offerte professionnelle, légère (zéro dépendance externe), et entièrement dans les couleurs de ta boutique. Elle se met à jour en temps réel et fonctionne sur tous les appareils.
C’est exactement ce genre de petits détails qui transforment une boutique moyenne en une boutique qui convertit vraiment. Le panier moyen, c’est l’un des leviers les plus puissants et les plus sous-exploités par les e-commerçants débutants.
Créer ta boutique Shopify et tester cette technique →
Tu veux un thème Shopify qui inclut déjà tout ça ? Découvre Speedfly, le thème Shopify français pensé pour les e-commerçants francophones.
