Comment ajouter une barre de livraison gratuite dynamique dans Shopify (2026)

Points clés

• Une barre de livraison gratuite dynamique (free shipping bar) lit le total du panier actuel via la Cart API de Shopify et met à jour la barre de progression en temps réel au fur et à mesure que des articles sont ajoutés ou retirés.
• Elle peut être ajoutée au cart drawer, à la page du panier, ou comme barre d’annonce permanente (announcement bar) sur toute la boutique.
• La barre nécessite du JavaScript pour être vraiment dynamique — les versions statiques ne s’affichent qu’au chargement de la page.
• Fudge construit cela comme une section Shopify native. Les applications de barre de livraison gratuite telles que Hextom offrent des options no-code.

Pour ajouter une barre de livraison gratuite dynamique dans Shopify, créez une section Liquid qui lit le total du panier à partir de /cart.js et met à jour une barre de progression avec JavaScript chaque fois que le panier change. Un message tel que “Ajoutez 12,50 $ de plus pour obtenir la livraison gratuite” est un élément peu coûteux et efficace à ajouter à une boutique Shopify : cela donne aux acheteurs un objectif concret qui s’auto-met à jour et transforme les visiteurs hésitants en personnes qui essaient d’atteindre le palier.

Comment ajouter une barre de livraison gratuite sur Shopify ?

Il y a trois approches : une app dédiée, la créer avec Fudge, ou l’implémenter manuellement avec la Cart API. Le bon choix dépend du niveau de contrôle dont vous avez besoin sur le design et l’emplacement.

Comment créer une section dynamique dans Shopify

Une “section dynamique” dans ce contexte signifie une section dont l’affichage se met à jour en fonction des données en direct (le total du panier) sans rechargement de la page. C’est différent d’une section statique qui ne se met à jour que lorsque la page est rafraîchie.

Les ingrédients clés :

1. HTML/Liquid — le markup de la section et l’état initial
2. Shopify Cart API — fournit le total actuel du panier au format JSON
3. JavaScript — lit le total du panier, calcule le montant restant et met à jour la barre
4. CSS — stylise la barre de progression

Pour savoir où se trouvent les scripts de votre thème, consultez Ajouter du JavaScript personnalisé dans Shopify.

L’implémentation complète

Structure HTML (dans un fichier de section Liquid)

{% assign free_shipping_threshold = section.settings.threshold | times: 100 %}

<div class="free-shipping-bar" data-threshold="{{ free_shipping_threshold }}">
  <div class="free-shipping-bar__track">
    <div class="free-shipping-bar__progress" id="shipping-bar-progress"></div>
  </div>
  <p class="free-shipping-bar__message" id="shipping-bar-message">
    Chargement...
  </p>
</div>

JavaScript — intégration de la Cart API

;(function () {
    var bar = document.querySelector('.free-shipping-bar')
    if (!bar) return

    var threshold = parseInt(bar.dataset.threshold, 10) // in cents
    var progressEl = document.getElementById('shipping-bar-progress')
    var messageEl = document.getElementById('shipping-bar-message')

    function updateBar(cartTotal) {
        var remaining = threshold - cartTotal

        if (remaining <= 0) {
            // Free shipping achieved
            progressEl.style.width = '100%'
            messageEl.textContent = 'You have free shipping!'
            messageEl.classList.add('free-shipping-bar__message--achieved')
        } else {
            var percent = Math.min((cartTotal / threshold) * 100, 100)
            progressEl.style.width = percent + '%'

            var remainingFormatted = (remaining / 100).toFixed(2)
            messageEl.textContent = 'Add $' + remainingFormatted + ' more for free shipping'
        }
    }

    function fetchCart() {
        fetch('/cart.js')
            .then(function (response) {
                return response.json()
            })
            .then(function (cart) {
                updateBar(cart.total_price)
            })
            .catch(function (err) {
                console.error('Shipping bar: could not fetch cart', err)
            })
    }

    // Initial load
    fetchCart()

    // Listen for cart updates (for stores using Shopify's cart drawer events)
    document.addEventListener('cart:updated', fetchCart)

    // Some themes dispatch change:cart instead
    document.addEventListener('change:cart', fetchCart)
})()

Remarque : Les thèmes annoncent les changements de panier différemment. Dawn publie PUB_SUB_EVENTS.cartUpdate via son pubsub.js, donc sur Dawn, appelez plutôt subscribe(PUB_SUB_EVENTS.cartUpdate, fetchCart) ; d’autres déclenchent des événements DOM tels que cart:updated. Vérifiez le JavaScript de votre thème pour voir celui qu’il utilise.

CSS

.free-shipping-bar {
    padding: 10px 16px;
    text-align: center;
    background: #f5f5f5;
}

.free-shipping-bar__track {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 8px;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    overflow: hidden;
}

.free-shipping-bar__progress {
    height: 100%;
    background: #000;
    border-radius: 3px;
    transition: width 0.4s ease;
    width: 0;
}

.free-shipping-bar__message {
    font-size: 13px;
    margin: 0;
}

.free-shipping-bar__message--achieved {
    color: #2a7a2a;
    font-weight: bold;
}

Schema (pour les paramètres du Theme Editor)

{% schema %}
{
  "name": "Barre Livraison Gratuite",
  "settings": [
    {
      "type": "range",
      "id": "threshold",
      "label": "Palier de livraison gratuite ($)",
      "min": 10,
      "max": 200,
      "step": 5,
      "default": 50
    }
  ],
  "presets": [
    {
      "name": "Barre Livraison Gratuite"
    }
  ]
}
{% endschema %}

Où placer la barre de livraison gratuite

Tiroir du panier (Cart drawer). L’emplacement le plus impactant — les clients voient la barre au moment exact où ils consultent leur panier. Ajoutez le snippet de la section dans le template de votre tiroir de panier.

Page du panier (/cart). Même logique que le tiroir, mais pour les clients qui naviguent directement vers la page du panier.

Barre d’annonce / header (sur tout le site). Affiche le seuil aux visiteurs avant qu’ils n’atteignent le panier — cela peut les motiver à ajouter des articles depuis la page produit. Moins d’impact en temps réel puisqu’elle s’affiche sur chaque page. Si vous associez le seuil à une offre à durée limitée, une bannière de compte à rebours créée sans application fonctionne de la même manière à cet endroit.

Pages produits. Afficher « Il vous manque X $ pour la livraison gratuite » directement sur les pages produits, près du bouton d’ajout au panier (ATC), peut être une forte motivation. Nécessite que le JavaScript récupère toujours les données du panier.

Utiliser Fudge pour créer la barre de livraison

Au lieu d’implémenter la Cart API et le JavaScript vous-même, décrivez la fonctionnalité entière à Fudge, l’opérateur IA pour les boutiques Shopify :

“Ajoute une barre de progression de livraison gratuite dynamique à mon cart drawer. Elle doit afficher une barre de progression qui se remplit à mesure que le total du panier augmente vers le palier de 75 $ pour la livraison gratuite. Lorsque le seuil est atteint, affiche un message ‘Vous avez débloqué la livraison gratuite !’. La barre doit se mettre à jour immédiatement lorsque des articles sont ajoutés sans recharger la page.”

Fudge génère la section complète — HTML, JavaScript, CSS et schema — comme brouillon pour que vous le vérifiiez. Le seuil est configurable dans l’Éditeur de thème sans toucher au code. Une fois la barre en ligne, Fudge compare la valeur moyenne des commandes (AOV) avant et après sa mise en ligne. Les objectifs de livraison gratuite se trouvent à côté des bundles, des upsells et des cadeaux dans son travail de merchandising, ainsi vos offres liées à la valeur de la commande sont gérées au même endroit plutôt que via une app pour chaque.

Les options d’apps pour les barres de livraison gratuite

Si vous préférez une option no-code sans implémenter la Cart API vous-même :

Hextom Free Shipping Bar — l’une des applications Shopify les plus installées pour cette fonctionnalité. Forfait gratuit disponible. Inclut un placement en announcement bar et une barre de progression basique.

Monster Upsells — inclut une barre de livraison dans une boîte à outils d’upsell plus large.

Les apps de Gift with Purchase incluent souvent une barre de livraison dans le cadre de leur logique d’incitation au panier. Si le cadeau lui-même est l’objectif, consultez comment ajouter un cadeau gratuit avec achat sur Shopify.

Compromis des applications : plus rapide à mettre en place, mais ajoute des scripts externes à votre boutique et offre moins de flexibilité de design que le code natif.

Pour d’autres offres de panier, consultez Ajouter des upsells dans le panier Shopify.

FAQ