Points clés

Une barre de livraison gratuite dynamique lit le total actuel du panier via la Cart API de Shopify et met à jour la barre de progression en temps réel lorsque des articles sont ajoutés ou retirés.

Elle peut être ajoutée au cart drawer (tiroir du panier), à la page panier, ou comme une barre d’annonce persistante sur toute la boutique.

La barre nécessite du JavaScript pour être véritablement dynamique — les versions statiques s’affichent uniquement au chargement de la page.

Fudge permet de créer cela sous forme de section Shopify native. Les apps de Gift with Purchase (cadeau avec achat) ou de Shipping Bar offrent quant à elles des options no-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 s’actualise tout seul — et convertit les visiteurs hésitants en acheteurs qui essaient activement d’atteindre le palier de gratuité.

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 désigne une section dont l’affichage se met à jour en fonction de données en direct (le total du panier) sans avoir à recharger la page. C’est différent d’une section statique qui se met à jour uniquement lorsque la page est actualisée.

Les éléments clés :

HTML/Liquid — le markup de la section et l’état initial
Shopify Cart API — fournit le total actuel du panier en JSON
JavaScript — lit le total du panier, calcule le montant restant et met à jour la barre
CSS — style la barre de progression

Connexe : 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 + ' $ 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 cart drawer de Shopify)
  document.addEventListener('cart:updated', fetchCart);

  // Écoute également l'événement de changement de panier standard 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 (dont 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

Cart drawer. L’emplacement avec le plus d’impact — les clients voient la barre au moment exact où ils consultent leur panier. Ajoutez le snippet de la section à l’intérieur du temple de votre cart drawer.

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

Barre d’annonce / header (sur tout le site). Montre le palier aux visiteurs avant qu’ils n’atteignent le panier — peut les motiver à ajouter des articles depuis la page produit. Elle a moins d’impact en temps réel car elle s’affiche sur chaque page.

Pages produit. Afficher “Il vous manque X $ pour la livraison gratuite” directement sur les pages produit, près du bouton ATC (ajout au panier), peut être une forte source de motivation. Cela nécessite que le JavaScript récupère tout de même les données du panier.

Créez une barre de livraison gratuite dynamique en la décrivant à Fudge.

Try Fudge for Free

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 à implémenter vous-même la Cart API :

Hextom Free Shipping Bar — l’une des apps Shopify les plus installées pour cette fonctionnalité. Version gratuite disponible. Inclut un placement en barre d’annonce et une barre de progression de base.

Monster Upsells — intègre une barre de livraison au sein d’une boîte à outils d’upsell plus large.

Les apps Gift with Purchase (cadeau avec achat) incluent souvent une barre de livraison dans le cadre de leur logique d’incitation au panier.

Les compromis des apps : elles sont plus rapides à configurer, mais ajoutent des scripts externes à votre boutique et offrent moins de flexibilité de design que le code natif.