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

Points clés

• Une barre de livraison gratuite dynamique lit le total actuel du panier via l’API Cart de Shopify et met à jour la barre de progression en temps réel à mesure que des articles sont ajoutés ou supprimés.
• Elle peut être ajoutée au tiroir du panier, à la page du panier, ou comme barre d’annonce persistante sur toute la boutique.
• La barre nécessite JavaScript pour être vraiment dynamique — les versions statiques ne s’affichent qu’au chargement de la page.
• Fudge crée cela comme une section Shopify native. Des applications comme Gift with Purchase ou de barres de livraison offrent des options sans code.

« Ajoutez 12,50 $ de plus pour obtenir la livraison gratuite. » Ce simple message, affiché dynamiquement au fur et à mesure que la valeur du panier change, est l’un des éléments avec le meilleur ROI que vous puissiez ajouter à une boutique Shopify. Il donne aux acheteurs un objectif concret qui se met à jour tout seul — et convertit les visiteurs hésitants en personnes essayant activement d’atteindre le seuil.

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 de données en direct (le total du panier) sans recharger 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 son état initial
2. L’API Cart de Shopify — fournit le total actuel du panier en JSON
3. JavaScript — lit le total du panier, calcule le montant restant et met à jour la barre
4. CSS — stylise la barre de progression

Article lié : 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) // en centimes
    var progressEl = document.getElementById('shipping-bar-progress')
    var messageEl = document.getElementById('shipping-bar-message')

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

        if (remaining <= 0) {
            // Livraison gratuite atteinte
            progressEl.style.width = '100%'
            messageEl.textContent = 'Vous avez la livraison gratuite !'
            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 = 'Ajoutez $' + remainingFormatted + ' de plus pour la livraison gratuite'
        }
    }

    function fetchCart() {
        fetch('/cart.js')
            .then(function (response) {
                return response.json()
            })
            .then(function (cart) {
                updateBar(cart.total_price)
            })
            .catch(function (err) {
                console.error('Barre de livraison : impossible de récupérer le panier', err)
            })
    }

    // Chargement initial
    fetchCart()

    // Écoute les mises à jour du panier (pour les boutiques utilisant les événements du cart drawer de Shopify)
    document.addEventListener('cart:updated', fetchCart)

    // Écoute également l'événement standard de changement de panier de Shopify
    document.addEventListener('change:cart', fetchCart)
})()

Note : Les événements cart:updated et change:cart sont déclenchés par de nombreux thèmes Shopify (y compris Dawn) lorsque le panier change. Si votre thème utilise un nom d’événement différent, vérifiez le JavaScript de votre thème pour trouver l’événement de mise à jour du panier qu’il déclenche.

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

Plutôt que d’implémenter la Cart API et le JavaScript vous-même, décrivez l’ensemble de la fonctionnalité à Fudge:

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

Fudge vous génère la section complète — HTML, JavaScript, CSS et schema — sous forme de brouillon que vous pouvez vérifier. Le palier est configurable dans le Theme Editor sans toucher au code.

Les options d’apps pour les barres de livraison gratuite

Si vous préférez une option no-code sans avoir à utiliser l’API Cart vous-même :

Hextom Free Shipping Bar — l’une des applications Shopify les plus installées pour ça. Version gratuite disponible. Inclut le placement dans la barre d’annonce et une barre de progression basique.

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

Les applications de type Gift with Purchase incluent souvent une barre de livraison dans leur logique d’incitation à l’achat.

Inconvénients des applications : plus rapides à configurer, mais elles ajoutent des scripts externes à votre boutique et offrent moins de flexibilité de design que le code natif.

FAQ

Lié : Ajouter des ventes incitatives (upsells) dans le panier Shopify.

Lié : Ajouter une barre de progression de livraison gratuite sur Shopify.