Lancer des soldes ou des promotions sur Shopify devrait être simple : on définit une remise et on s’attend à ce qu’elle soit visible partout sur le site. Pourtant, il est fréquent que les réductions ne s’affichent ni sur la fiche produit ni sur la page collection, alors même qu’elles sont bel et bien appliquées dans le panier. Cette situation peut créer de la confusion chez vos visiteurs, voire les dissuader d’acheter, puisqu’ils ne voient pas immédiatement la promotion.
Dans cet article, nous vous proposons une solution gratuite et facile à mettre en place pour que vos réductions s’affichent directement sur vos pages produits ou collections, sans avoir à payer d’application Shopify supplémentaire. Vous verrez qu’il suffit d’ajouter un petit morceau de code pour régler ce problème, rassurer vos clients et améliorer votre taux de conversion.
Sommaire
Pourquoi la réduction n’apparaît pas sur les produits (et uniquement dans le panier) ?
Par défaut, Shopify applique les remises (codes promos, rabais automatiques, etc.) au moment du checkout ou dans le panier, sans pour autant modifier le prix affiché sur la fiche produit ou la page collection. Cela signifie que, même si la réduction est bien calculée et déduite lorsque le client passe en caisse, le prix « soldé » n’est pas visible en amont.
Cette façon de procéder peut provoquer des frictions chez les visiteurs : ils ne voient pas de prix barré ou de mention de la promotion avant d’ajouter l’article au panier. Certains abandonnent alors l’achat, doutant de l’existence réelle de la réduction ou pensant qu’ils n’en bénéficieront pas. C’est pourquoi mettre en avant la remise dès la page produit est crucial pour votre taux de conversion et la confiance de vos clients.
Les solutions existantes
Les applications
Lorsque l’on se rend compte que la réduction ne s’affiche pas sur la page produit, la première réaction est souvent de chercher une application pour corriger ce problème. Il en existe effectivement plusieurs sur l’App Store Shopify, qui se chargent de mettre en avant vos promotions, afficher un prix barré, un compte à rebours, etc.
Toutefois, elles impliquent un abonnement mensuel ou des frais ponctuels. Voici trois exemples d’apps :
Bold Discounts
- Fonctionnalités : automatisation des soldes, affichage du prix barré, planification des promotions.
- Limite : coût mensuel et éventuelles restrictions selon le plan Shopify.
Ultimate Sales Booster
- Fonctionnalités : bannières promotionnelles, minuteurs de compte à rebours, badges « Best Seller ».
- Limite : abonnement mensuel et widgets potentiellement gourmands en ressources.
Product Discount & Upsell Apps
- Fonctionnalités : permet de configurer des remises visibles sur la page produit, ainsi que du cross-sell et upsell.
- Limite : selon l’application, les frais peuvent être élevés si votre volume de ventes est important.
Bien que ces applications soient souvent efficaces, elles ont un coût qui peut s’accumuler si vous utilisez déjà plusieurs apps dans votre boutique.
La solution native de shopify
Shopify propose nativement la fonctionnalité « Compare at price », qui affiche un prix barré si vous renseignez ce champ dans chaque fiche produit. Cette approche ne nécessite pas d’application tierce, mais présente un inconvénient majeur :
- Vous devez éditer le prix de chaque produit (ou faire un import CSV) pour changer à la fois le prix normal et le « Compare at price ».
- En période de soldes, cette tâche peut rapidement devenir très chronophage, surtout si vous avez de nombreux produits ou collections à gérer.
C’est pourquoi beaucoup de marchands finissent par opter pour une solution « front-end » qui ne touche pas forcément le back-office et leur permet de paramétrer facilement leurs promotions. Dans la section suivante, nous vous dévoilons une méthode gratuite pour afficher un prix remisé directement sur votre boutique, sans avoir recours à une application payante ni modifier chaque fiche produit manuellement.
Notre solution gratuite : Ajouter un code custom dans votre thème
Principe
Au lieu de modifier les prix de chaque produit via le back-office Shopify (ou de vous abonner à une application tierce), vous pouvez insérer un petit script JavaScript (ou du code Liquid) dans votre thème. Ce script calcule automatiquement la remise, par exemple -20 %, -30 % ou tout autre taux, et l’affiche visuellement sur vos pages produits et/ou collections.
- Cette méthode ne change pas le prix réel dans l’admin Shopify : la remise continue de s’appliquer au moment du paiement si vous avez un code promo ou une promotion automatique déjà configurée.
- Elle permet néanmoins d’afficher un prix barré et un nouveau prix réduit avant même l’ajout au panier, rassurant ainsi vos visiteurs.
Où insérer le code
- Via l’éditeur de thème Shopify : Certains thèmes proposent une section « Custom Code », « Custom JavaScript », ou « Additional Scripts ». Il suffit de coller le script dedans. Si vous n’avez pas de telle section, vous pouvez en récupérer une section html shopify sur notre site.
- Directement dans le code du thème : Souvent dans le fichier
theme.liquid,product.liquid,collection.liquidouproduct-card.liquid.- Vous pouvez également créer un snippet (ex.
discount-price.liquid) et l’inclure dans vos templates.
- Vous pouvez également créer un snippet (ex.
Le but est de cibler l’élément du DOM qui affiche le prix (généralement une balise <span> ou <div> portant une classe ou un attribut data- spécifique), puis d’y appliquer un calcul (prix x (1 – taux_de_remise)) et d’insérer l’affichage du prix barré d’origine.
La page collection
Le code ci dessous permet d’afficher une remise de 25% sur tous les produits de la collection.
Changer 25 et 0.75 si vous souhaitez effectuer une remise différente.
Le prix issu de la fiche produit sera barré, et le nouveau prix sera mis en rouge. Vous pouvez également le modifier en mettant à jour les deux classes CSS.
<style>
.old-price {
text-decoration: line-through;
color: #999;
margin-right: 10px;
}
.new-price {
color: #d9534f; /* Rouge ou ce que tu veux */
font-weight: bold;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
// 1) Fonction utilitaire : arrondir systématiquement vers le bas à n décimales
// ex: 9.675 -> 9.67
function floorToDecimals(value, decimals) {
const factor = Math.pow(10, decimals);
return Math.floor(value * factor) / factor;
}
// 2) Sélectionne TOUS les conteneurs de prix
const priceWrappers = document.querySelectorAll('.product-item__price[data-product-price]');
// 3) On boucle sur chaque bloc
priceWrappers.forEach(function(wrapper) {
// On cherche la balise qui contient la valeur (".new-price")
const newPriceElem = wrapper.querySelector('.new-price');
if (!newPriceElem) return; // Si pas trouvé, on saute
// Exemple de texte récupéré : "12,90€"
let originalPriceText = newPriceElem.innerText.trim();
// Convertit "12,90" → 12.90 (nombre)
let priceValue = parseFloat(
originalPriceText
.replace('€', '')
.replace(',', '.')
);
// Vérifie qu’on a bien un nombre
if (isNaN(priceValue)) return;
// 4) Calcule la remise : -25% → 0.75 * prix d’origine
let discountedValue = priceValue * 0.75;
// 5) Arrondit vers le bas (floor) à 2 décimales
discountedValue = floorToDecimals(discountedValue, 2);
// → ex: 12.90 * 0.75 = 9.675 => 9.67
// 6) Format final FR : "9.67" → "9,67" + "€"
let discountedText = discountedValue.toFixed(2).replace('.', ',');
// 7) Crée un span pour l’ancien prix
const oldPriceElem = document.createElement('span');
oldPriceElem.classList.add('old-price');
oldPriceElem.textContent = originalPriceText; // ex: "12,90€"
// 8) Insère ce span avant le .new-price existant
// (pour que l’ancien prix barré soit à gauche)
newPriceElem.parentNode.insertBefore(oldPriceElem, newPriceElem);
// 9) Change le contenu de .new-price pour le prix remisé
newPriceElem.textContent = discountedText + '€'; // ex: "9,67€"
});
});
</script>
La page produit
<style>
.old-price {
text-decoration: line-through;
color: #999;
margin-right: 10px;
}
.product__price [data-product-price] {
font-weight: bold;
color: #d9534f; /* Par exemple rouge */
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const priceElement = document.querySelector('[data-product-price]');
// Fonction d'arrondi "vers le bas" à n décimales
function floorToDecimals(value, decimals) {
const factor = Math.pow(10, decimals);
return Math.floor(value * factor) / factor;
}
if (priceElement) {
// Récupération du texte, ex: "12,90€"
let priceText = priceElement.innerText.trim();
// On enlève le symbole € et on remplace la virgule par un point pour parseFloat
let priceValue = parseFloat(
priceText
.replace('€', '') // supprime le symbole €
.replace(',', '.') // transforme 12,90 en 12.90
);
// Vérifie qu’on a bien un nombre
if (!isNaN(priceValue)) {
// Calcul du prix remisé : -25%
let discountedValue = priceValue * 0.75;
discountedValue = floorToDecimals(discountedValue, 2);
// Convertit le point en virgule pour l’affichage final
let discountedText = discountedValue.toFixed(2).replace('.', ',');
// 1) Crée un span pour l'ancien prix
const oldPrice = document.createElement('span');
oldPrice.classList.add('old-price');
oldPrice.textContent = priceText; // ex: "12,90€"
priceElement.parentNode.insertBefore(oldPrice, priceElement);
priceElement.textContent = discountedText + '€';
}
}
});
</script>
Ainsi, même sans abonnement à une application tierce et sans mettre les mains dans les prix de votre back-office, vous pouvez afficher un prix barré et un nouveau prix réduit de manière élégante et cohérente.
Besoin d'une agence spécialisée en développement ou SEO pour Shopify ? 🚀
Que ce soit pour optimiser le référencement de votre boutique, personnaliser vos pages, ou développer des fonctionnalités sur-mesure, notre équipe d’experts est là pour vous accompagner.
Contactez-nous dès maintenant et transformons ensemble votre boutique en un véritable levier de croissance !
Astuces et bonnes pratiques
Soignez l’affichage du prix barré
- Utilisez un style CSS clair pour différencier le prix original du prix remisé.
- Par exemple, un prix barré en gris clair (
color: #999) et un nouveau prix en rouge vif (color: #d9534f) attirent immédiatement l’attention. - Vérifiez également le rendu sur mobile : évitez que les prix n’apparaissent trop petits ou trop rapprochés.
Annoncez la promotion de manière visible
- Complétez l’affichage du prix remisé en ajoutant, par exemple, une bannière ou un compte à rebours (« promo valable jusqu’au… »).
- Ces éléments renforcent l’impression d’urgence et de rareté, deux leviers importants pour inciter à l’achat durant les soldes.
- Songez également à inclure un texte explicatif (« -25 % sur toute la collection », « Remises immédiates »), afin que les visiteurs sachent à quoi s’attendre.
Vérifiez la cohérence entre le panier et la page produit: Rappelez-vous que la méthode présentée n’impacte pas le prix réel géré par Shopify. Le client paiera le montant configuré dans votre admin (ou bénéficiera de la remise au checkout, si vous avez paramétré un code promo).
Foire Aux Questions (FAQ)
Oui, il suffit d’ajuster la sélection d’éléments dans le script.
- Plutôt que de cibler
.product-item__price[data-product-price]de manière générale, vous pouvez par exemple cibler.product-item__price[data-product-price][data-collection="bios"]ou.product-item__price[data-variant-id="123456"]. - Ainsi, vous ne modifierez l’affichage que pour les produits ou variantes qui respectent vos critères (collection, balises data, etc.).
Dans l’exemple de code, on utilise Math.floor(...) pour arrondir vers le bas, puis on formatte en 2 décimales.
Pour un arrondi vers le haut (ceiling), remplacez Math.floor par Math.ceil.
Le script présenté modifie uniquement l’affichage d’un prix hors taxe ou TTC déjà calculé par Shopify.
- Si vos produits gèrent plusieurs taux de TVA selon la localisation, le back-end Shopify effectuera toujours le calcul correct lors du checkout.
- Le script ne sait pas si un prix inclut ou non la TVA : il se contente d’afficher une remise sur la valeur affichée à l’écran.
- Assurez-vous donc que votre prix de base (affiché côté front) inclut déjà la TVA si vous en avez besoin.
Oui, car le script n’affecte pas le véritable prix stocké dans Shopify, mais uniquement l’affichage front-end.
- Un client peut encore saisir un code promo lors du checkout.
- Veillez simplement à expliquer que la remise supplémentaire s’appliquera à la fin, pour éviter toute confusion (p. ex. un prix remisé à 9,90 € sur la page, puis un code promo -10 % au checkout).
L’exemple de code est basé sur une monnaie unique (ex. « 12,90€ »).
- Pour le multidevise, Shopify convertit souvent le prix dans la devise du client via un script interne.
- Vous devrez soit adapter votre code pour détecter la devise (p. ex.
USDvs.EUR) et convertir, soit appliquer le script après la conversion Shopify (ce qui peut être complexe). - Si vous proposez plusieurs devises, il peut être préférable d’utiliser la fonctionnalité native Compare at price ou une application dédiée qui gère ces conversions dynamiquement.
Non, car ces flux récupèrent généralement les données brutes (le « prix » configuré dans Shopify).
- Votre catalogue externe ne verra donc pas le prix remisé.
- Si vous souhaitez que le prix remisé apparaisse sur Google Shopping, par exemple, il faut ajuster le « Compare at price » ou le « prix » réel dans Shopify, ou utiliser des intégrations spécifiques.