Tu veux booster ta valeur panier moyenne tout en récompensant tes clients les plus généreux ? Afficher un code promo conditionnel — qui s’active uniquement quand le client dépasse un certain montant — est une des techniques les plus efficaces pour augmenter le panier moyen sans sacrifier ta marge sur toutes tes commandes.
Dans ce tutoriel, on va mettre en place un système entièrement personnalisable directement dans ton thème Shopify, sans passer par une app payante. Le résultat : un encart sur ta fiche produit qui affiche en temps réel la somme restante à dépenser pour déclencher un code de réduction exclusif. Une fois le seuil atteint, le code s’affiche automatiquement avec un message de félicitations.
Pas encore de boutique Shopify ? Démarre ton essai gratuit Shopify →
Pourquoi ce système est redoutablement efficace
L’idée est simple : au lieu d’offrir une réduction à tout le monde, tu la réserves aux clients qui font l’effort de remplir suffisamment leur panier. Ce mécanisme psychologique s’appelle l’effet de progression — plus le client voit qu’il est proche de l’objectif, plus il est motivé à ajouter des produits.
Résultat concret : augmentation du panier moyen, fidélisation, et sentiment d’exclusivité pour le client. Le tout sans app tierce, sans abonnement mensuel supplémentaire.
Compatibilité Shopify en 2026
Ce tutoriel est compatible avec :
- Les thèmes Shopify OS 2.0 (Dawn, Craft, Refresh, Speedfly, etc.) — intégration via le code editor dans
sections/main-product.liquidousnippets/product-form.liquid - Les thèmes legacy (avant OS 2.0) — intégration dans
sections/product-template.liquidousnippets/product-form.liquid
L’API /cart.js utilisée par le JavaScript est native Shopify et reste supportée en 2026 sur tous les plans.
Étape 1 — Le code HTML à placer sur ta fiche produit
Ouvre l’éditeur de code de ton thème depuis Boutique en ligne → Thèmes → Actions → Modifier le code.
Recherche le fichier qui contient le formulaire d’ajout au panier. Selon ton thème, il peut s’appeler :
sections/main-product.liquid(thèmes OS 2.0 comme Dawn)snippets/product-form.liquidsections/product-template.liquid(thèmes legacy)
Une fois le bon fichier trouvé, place le code suivant juste avant ou après le bouton “Ajouter au panier” :
<div class="ptgdContainer">
<p>
<svg enable-background="new 0 0 512 512" height="20" width="20" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="m203.556 345.012 70.71-212.133c2.619-7.859-1.628-16.354-9.487-18.974-7.858-2.619-16.354 1.628-18.974 9.487l-70.71 212.133c-2.619 7.859 1.628 16.354 9.487 18.974 1.573.524 3.173.773 4.745.773 6.28.001 12.133-3.974 14.229-10.26z"/>
<path d="m309.533 279.203c24.813 0 45-20.187 45-45s-20.187-45-45-45-45 20.187-45 45 20.187 45 45 45zm0-60c8.271 0 15 6.729 15 15s-6.729 15-15 15-15-6.729-15-15 6.729-15 15-15z"/>
<path d="m139.827 189.203c-24.813 0-45 20.187-45 45s20.187 45 45 45 45-20.187 45-45-20.186-45-45-45zm0 60c-8.271 0-15-6.729-15-15s6.729-15 15-15 15 6.729 15 15-6.728 15-15 15z"/>
<path d="m509 186-52.307-69.743 2.041-14.283c.667-4.674-.904-9.39-4.243-12.728l-31.82-31.82 31.819-31.82c5.858-5.857 5.858-15.355 0-21.213-5.857-5.857-15.355-5.857-21.213 0l-31.819 31.82-31.82-31.82c-3.338-3.339-8.054-4.905-12.728-4.243l-148.493 21.213c-3.213.459-6.19 1.948-8.485 4.243l-183.848 183.848c-21.445 21.444-21.445 56.338 0 77.782l155.563 155.564c3.182 3.182 6.666 5.881 10.353 8.118v6.082c0 30.327 24.673 55 55 55h220c30.327 0 55-24.673 55-55v-262c0-3.245-1.053-6.404-3-9zm-471.703 80.023c-9.748-9.748-9.748-25.608 0-35.356l180.312-180.312 136.118-19.445 26.517 26.517-21.213 21.213-10.607-10.607c-5.857-5.857-15.355-5.857-21.213 0s-5.858 15.355 0 21.213l42.427 42.427c2.929 2.929 6.768 4.394 10.606 4.394s7.678-1.465 10.606-4.394c5.858-5.857 5.858-15.355 0-21.213l-10.607-10.607 21.213-21.213 26.517 26.517-19.446 136.118-180.311 180.312c-4.722 4.722-11 7.322-17.678 7.322s-12.956-2.601-17.678-7.322zm444.703 190.977c0 13.785-11.215 25-25 25h-220c-13.164 0-23.976-10.228-24.925-23.154 13.567-.376 27.022-5.714 37.353-16.046l183.848-183.848c2.295-2.295 3.784-5.272 4.243-8.485l13.173-92.21 31.308 41.743z"/>
</g>
</svg>
<span class="ptgdTextBefore">Il reste</span>
<strong id="price_to_get_discount" class="price_to_get_discount ptgdLoader"></strong>
<span class="ptgdTextAfter">à dépenser pour obtenir votre bon de réduction !</span>
</p>
</div>
Étape 2 — Le CSS pour mettre en forme l’encart
Dans l’éditeur de code, ouvre le fichier CSS de ton thème. Sur les thèmes OS 2.0, il se trouve généralement dans assets/base.css ou assets/theme.css. Sur les thèmes legacy, cherche assets/theme.scss.liquid.
Colle le code suivant à la fin du fichier :
.ptgdContainer p {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
padding: 10px 14px;
background: #f8f9fa;
border-left: 3px solid #28a745;
border-radius: 4px;
margin: 12px 0;
font-size: 14px;
}
.ptgdContainer svg {
fill: #28a745;
margin-right: 7px;
flex-shrink: 0;
}
.ptgdContainer strong {
margin: 0 5px;
font-weight: 700;
color: #e44d26;
}
.ptgdLoader {
border: 3px solid #f0f0f0;
border-top: 3px solid #999;
border-radius: 50%;
width: 17px;
height: 17px;
animation: ptgdSpin 1.5s linear infinite;
display: inline-block;
}
@keyframes ptgdSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Astuce personnalisation : Change
#28a745par la couleur principale de ta charte graphique pour un rendu cohérent avec ton branding.
Étape 3 — Le JavaScript : le cœur du système
C’est ici que la magie opère. Le script appelle l’API native /cart.js de Shopify pour récupérer le montant du panier en temps réel, calcule la différence avec le seuil défini, et met à jour l’affichage dynamiquement à chaque ajout au panier.
Dans l’éditeur de code, ouvre le fichier JavaScript principal de ton thème (assets/theme.js ou assets/global.js). Colle ce code à la fin :
/* Code promo à partir d'un certain montant d'achat - Speed Ecom */
(function () {
if (!document.querySelector('.ptgdContainer')) return;
// ==========================================
// PARAMÈTRES À PERSONNALISER
// ==========================================
const priceToGetDiscount = 20000; // Seuil en centimes (20000 = 200€)
const ptgdDiscountCode = 'CODE30'; // Ton code promo
const ptgdTextBeforeSuccess = 'Félicitations ! Utilisez le code promo';
const ptgdTextAfterSuccess = 'à l\'étape du paiement pour obtenir votre réduction.';
// ==========================================
const ptgdTextBefore = document.querySelector('.ptgdTextBefore');
const ptgdTextAfter = document.querySelector('.ptgdTextAfter');
const ptgdContainer = document.getElementById('price_to_get_discount');
const ptgdPrice = document.querySelector('.ptgdContainer strong');
const ptgdBtnsSubmit = document.querySelectorAll('button[type="submit"]');
function decimaConverter(num) {
return ((num * 100 + 0.01 * 100) / 10000).toFixed(2);
}
function cartTotalPrice() {
setTimeout(function () {
fetch('/cart.js')
.then(cart => cart.json())
.then(cart => {
const priceRemaining = priceToGetDiscount - cart.total_price;
if (cart.total_price >= priceToGetDiscount) {
// Seuil atteint : affiche le code promo
ptgdTextBefore.textContent = ptgdTextBeforeSuccess;
ptgdContainer.textContent = '"' + ptgdDiscountCode + '"';
ptgdTextAfter.textContent = ptgdTextAfterSuccess;
} else if (priceRemaining > 0) {
// Seuil non atteint : affiche le montant restant
ptgdTextBefore.textContent = 'Il reste';
ptgdContainer.textContent = decimaConverter(priceRemaining) + '€';
ptgdTextAfter.textContent = 'à dépenser pour obtenir votre bon de réduction !';
}
ptgdPrice.classList.remove('ptgdLoader');
})
.catch(error => console.error('Erreur cart.js :', error));
}, 800);
}
// Appel initial au chargement de la page
cartTotalPrice();
// Mise à jour à chaque clic sur "Ajouter au panier"
ptgdBtnsSubmit.forEach(btn => {
if (btn.getAttribute('name') === 'add') {
btn.addEventListener('click', function () {
ptgdPrice.classList.add('ptgdLoader');
cartTotalPrice();
});
}
});
})();
Comment personnaliser le système
Les 4 paramètres clés à modifier sont en haut du script, dans la section PARAMÈTRES À PERSONNALISER :
| Paramètre | Valeur par défaut | Description |
|---|---|---|
priceToGetDiscount | 20000 | Seuil en centimes (20000 = 200€, 5000 = 50€) |
ptgdDiscountCode | 'CODE30' | Le code à afficher une fois le seuil atteint |
ptgdTextBeforeSuccess | Message succès | Texte affiché quand le seuil est atteint |
ptgdTextAfterSuccess | Message succès | Suite du texte de félicitations |
Exemple pratique : pour offrir un code BIENVENUE10 dès 75€ d’achat, tu mets priceToGetDiscount = 7500 et ptgdDiscountCode = 'BIENVENUE10'.
Créer le code promo dans Shopify
N’oublie pas de créer le code promo correspondant dans ton administration Shopify :
- Va dans Remises → Créer une remise
- Choisis le type (pourcentage, montant fixe, livraison gratuite)
- Saisis le code exact (doit correspondre à
ptgdDiscountCodedans le script) - Définis les conditions d’utilisation si nécessaire
- Enregistre et active la remise
Le client devra saisir ce code manuellement à l’étape du paiement. Si tu veux qu’il s’applique automatiquement, les Discount Functions de Shopify (disponibles dès le plan Shopify) permettent d’aller plus loin, mais nécessitent du développement personnalisé.
Tester ton installation
Une fois les 3 codes en place, teste le système :
- Va sur une fiche produit de ta boutique
- Vérifie que l’encart “Il reste X€ à dépenser…” apparaît bien
- Ajoute le produit au panier
- Observe la mise à jour du montant en temps réel
- Ajoute suffisamment de produits pour dépasser le seuil
- Vérifie que le message de félicitations avec le code s’affiche
Si l’encart n’apparaît pas, vérifie que le code HTML est bien dans la bonne section et que le fichier JavaScript a bien été sauvegardé.
Tu veux tester tout ça sur une boutique Shopify ? Démarre gratuitement pendant 3 jours →
Aller plus loin : étendre le système à plusieurs paliers
Tu peux facilement adapter le JavaScript pour gérer plusieurs seuils de remise. Par exemple :
// Exemple multi-paliers : à adapter dans cartTotalPrice()
if (cart.total_price >= 15000) { // 150€+
// Affiche CODE20
} else if (cart.total_price >= 8000) { // 80€+
// Affiche CODE10
} else {
// Affiche le montant restant pour atteindre 80€
}
Cette approche crée un véritable système de fidélisation progressif, très efficace pour inciter les clients à maximiser leur commande.
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.
