Nous allons afficher sur une fiche produit Shopify le fameux « économisez x€ (-50%) » !

Mise en place du système sur Shopify

Pour ce faire rendez-vous dans vos fichiers de votre thème: Boutique en ligne – Actions – Modifier le code et la nous allons chercher le formulaire de votre fiche produit.

Dans la plus part des thèmes gratuits il vous suffira d’aller dans: Sections – product-template.liquid et de trouver la balise <h1>…</h1>

Juste en dessous vous allez coller le code suivant

{% if product.compare_at_price > product.price %}
<p style="margin:0px 0 15px 0;">Vous économisez 
 <strong>
 {{ product.compare_at_price_max | minus:product.price | difference:product.compare_at_price_max | money }}
 ({{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}%)
 </strong>
</p>
{% endif %}

Si votre thème n’a pas cette arborescence de fichiers, je vous invite à chercher un petit peu afin de trouver ce fameux <h1>{{ product.title }}</h1>

Astuce: Si cette zone remonte trop il vous suffira de modifier la partie du code -25px par la valeur de votre choix comme 0px par exemple 😉

Ce tutoriel existe aussi en vidéo

Bonne installation à toutes et tous 😉

Inclus dans Speedfly

Merci de me laisser une petite note 😉

[Note moyenne de: 4.8 sur 11 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

« L’affiliation en Dropshipping

Comment rendre un formulaire RGPD sur Shopify ? »

Cet article a 54 commentaires

Francine Ho A Tchung
28 Août 2018 Répondre

Bonjour DG,

Dans ma boutique On peut voir déjà le compare at price et le économisez qu’on peut aller rajouter lorsqu’on va dans l’onglet personnaliser, donc dans mon cas je dois rajouter juste le % pour que cela apparaisse, n’est-ce pas ?

@bientôt.
1. Dgeo Dev
  12 Nov 2018 Répondre
  
  Hello, en théorie oui c’est la bonne démarche ! Bonne soirée
Scytale
2 Sep 2018 Répondre

Bonjour, quand je mes des prix différents pour plusieurs options sur un produit, il me compare le prix minimum d’une option avec le prix maximum d’une autre option du coup ça m’affiche une réduction farfelue sur toutes les options … comment lui dire de comparer par option???
1. Dgeo Dev
  6 Sep 2018 Répondre
  
  Bonsoir, dans ce cas c’est bcp plus complexe il faudrait trouver le code javascript qui déclenche le changement pour recalculer le % d’économie à chaque changement de variante
  1. julien
    23 Sep 2018 Répondre
    
    Bonsoir,
    Et sur le thème Supply, où trouve -t-on ce fameux code javascript et comment l’intégrer au code que tu nous fournis?
    Merci pour tes excellents tutos!
    1. Dgeo Dev
      24 Sep 2018 Répondre
      
      Hello, de tête dans assets – theme.js.liquid ou timber.js.liquid tu dois trouver le moment ou le changement de variante déclenche le changement de prix. c’est vraiment pas simple à faire par contre
  2. Eliott Ardisson
    2 Juin 2020 Répondre
    
    Avez-vous la procédure dans ce cas la svp?
    Mes prix different par option/pack et le pourcentage n’est donc pas correct.
    1. Dgeo Dev
      2 Juin 2020 Répondre
      
      Non navré cela demande un developpement sur mesure car tous les thèmes sont codés différemment.
pascal
24 Sep 2018 Répondre

Bonjour Geoffrey,
je ne suis pas sûr d’avoir bien posté la dernière fois.

je te remercie pour tous tes tutos qui m’aident beaucoup.

Pourrais tu s’il te plait donner plus de détails pour ce code. Car j’ai le même problème : le code mis dans product template fonctionne très bien sauf pour les produits avec plusieurs prix car plusieurs vairantes.
J’ai le thème minimal. Peux tu me dire où trouver ce code javascript dont tu parles quel code rajouter et où le mettre pour ne plus avoir ce problème.
Et si je peux mettre le même code pour que le prix économisé apparaisse aussi sur les produits en page d’accueil.

Je compte bien acheter ton thème pour une prochaine boutique … Ce sera plus simple, c’est sûr )))
Merci de ton aide
1. Dgeo Dev
  24 Sep 2018 Répondre
  
  Hello, merci pour le message. alors j’ai dis ca mais ce n’est vraiment pas évident à faire pour cela que ce tuto reste limité et gratuit car c’est un gros développement à faire qui est en plus différent sur chaque thème… le bazard en gros 🙂 Techniquement tu dois trouver dans ton theme.js.liquid ou timber.js.liquid l’endroit du déclencheur de calcul du changement d’une variante afin de modifier le prix. couramment option-selector. bonne chance
kb
17 Oct 2018 Répondre

Hello,
merci pour ton travail: )
dis moi j’ai une question, le code marche bien sur la page produit. Mais sur ma page d’accueil j’ai également mon produit mais cette fois le texte ne s’affiche pas, une idée d’où je dois le rajouter pour le faire apparaitre aussi sur la home page ?
merci
1. Dgeo Dev
  18 Oct 2018 Répondre
  
  Hello, ca dépend du thème et du contexte dur de répondre à la question comme cela… si le texte n’apparait plus c’est qu’une boulette a été faite 🙂
Adam
25 Nov 2018 Répondre

Salut Dgeo Dev, J’ai mis en place les consignes de ce tuto, il marche parfaitement mais maintenant on ne voit plus les étoiles des avis en dessous du titre du produit juste le nombre d’avis. J’utilise Alireviews sur le thème supply pourrait tu me dire comment faire pour remettre les étoiles jaune ?
Nb: Le « economisez » est à bien situé et ne cache pas le nombre d’avis.
1. Dgeo Dev
  28 Nov 2018 Répondre
  
  Bonsoir, surement un conflit de code ou JS fait f12 sur chrome et regarde si tu as des erreurs rouge dans la console.
Eric Coppin
5 Déc 2018 Répondre

Bonjour Dgeo

J’ai trouvé facilement et « copié collé » mais rien, rien du tout.
J’ai essayé avec une ligne d’espacement et sans…
Sinon pas de change, c’est le premier que j’essaye.
cdl
Eric
1. Dgeo Dev
  7 Déc 2018 Répondre
  
  Ce tuto est assez spécifique, il n’a pas été testé sur tous les thèmes donc il se peut qu’il ne fonctionne pas… thème utilisé ?
thom
25 Déc 2018 Répondre

Bonsoir,

Merci pour le super travail, j’ai une question, étant sur le theme début j’ai sans soucis personnalisé pour que ça affiche juste le pourcentage de remise quand y’a des promotions ou prochainement les soldes.

Ma question peut-on mettre ce code dans la page collection ou tout les articles s’affiches et que ce code ( pourcentage ) apparaisse à droite ou en dessous les prix ?

Merci à vous.
1. Dgeo Dev
  31 Déc 2018 Répondre
  
  Hello, le code est spécifique à la fiche produit, je doute que ca fonctionne sur les vignettes des collections à tester au besoin c’est généralement dans snippets – product-grid-item.liquid. pour le desing et positionnement tout est une question de css et de mise en forme et la c’est du cas par cas 😉
  Bonne soirée
Enzo Moretti
25 Fév 2019 Répondre

Salut,

Merci pour ton travail, je recherchais sa depuis quelque jour et j’ai eu la chance de tomber sur ce tuto, un grand merci.

Cependant le rendu n’est pas super jolie et je voulais savoir comment modifier la taille du texte, la police et la couleur du texte

Merci beaucoup
Julien
26 Fév 2019 Répondre

Salut, merci beaucoup pour ce tuto
je voulais savoir si tu savais comment modifier la police et la couleur
Merci d’avance
1. hervé
  7 Mar 2019 Répondre
  
  Salut, oui le tuto est super,
  mais effectivement je cherche à modifier la couleur également.. 🙂
Leat
22 Mar 2019 Répondre

Ne marche pas avec un produit multi variantes sur le thème Brooklyn.
j’ai des % farfelus lol
A voir avec un mono produit sans variante avec un prix différent.

Merci pour tes tutos 🙂
1. Dgeo Dev
  7 Avr 2019 Répondre
  
  Hello, oui c’est exact 🙂 pour que ca soit pris en compte il faut contextualiser. vu que chaque thème est codé différemment on ne peut prévoir le code du thème qui change le prix à la volée.
belfa
16 Avr 2019 Répondre

bonjour,
je souhaiterais mettre le prix barré en rouge. thème Supply
merci
1. Dgeo Dev
  18 Avr 2019 Répondre
  
  Hello, logiquement le thème doit le proposer. il faut regarder dans param de themes – couleurs
amelia
17 Avr 2019 Répondre

Bonjour, comment faire pour changer la couleur du pourcentage ? En rouge par exemple ?
1. Dgeo Dev
  18 Avr 2019 Répondre
  
  Hello, alors il faut trouver cette zone de mon code
  ({{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}%)
  La remplacer par
  https://dgeodev.com/codes/code1.txt
victor agapit
13 Juin 2019 Répondre

Salut ! Encore une fois merci pour tout ce contenu de qualité !
Petit chipotage pour moi mais pourrais-tu m’expliquer comment centrer cette petite fonctionnalité ?
J’ai essayé de toucher au pixels mais pas moyen.

Merci d’avance !
1. Dgeo Dev
  18 Juin 2019 Répondre
  
  hello et merci pour le com. Entourer la zone par une balise qui centre :
Amin
21 Août 2019 Répondre

Bonjour,
merci pour ce tuto
je voulais savoir si il était aussi possible d’afficher l’économie réaliser dans le panier au au moment du passage en caisse svp ?
1. Dgeo Dev
  21 Août 2019 Répondre
  
  Hello, merci pour le message. Au passage en caisse non mais au panier c’est techniquement possible mais cela reste assez spécifique que petit developpement.
humbre
26 Août 2019 Répondre

bonjour, je voudrais enlever le -30% commment dois-je faire ?
1. Dgeo Dev
  26 Août 2019 Répondre
  
  Hello, il suffit de supprimer le code installé 😉
Andriano
2 Oct 2019 Répondre

Encore merci pour ce tuto !
Très simple à mettre en place.
Plancherel
3 Mai 2020 Répondre

Bonjour,

Tout d’abord, je tiens à te remercier d’avoir pris le temps de faire la vidéo.

Voilà, lors de ma première manipulation, cela avait fonctionné et par la suite je l’ai annulée. Aujourd’hui j’essaie de refaire et ça ne fonctionne pas. J’ai essayé de remettre les paramètre à 0 et refaire. Malheureusement, sans résultat. Aurais-tu une idée STP 🙂

Merci pour ton aide.
1. Dgeo Dev
  5 Mai 2020 Répondre
  
  Hello, pas d’idée comme ça non 🙁 faudrait que je regarde plus en détail. MP au besoin.
rone
18 Juin 2020 Répondre

Bonjour;

J’ai ajouté le bout de code , pour certain produit cela calcule correctement et pour d’autres cela ne fonctionne pas bien.

Exemple : Produit affiché a 29,99 en promo a 24,90 cela écrit Réduction de 50% 20 Euros d’économie
Maldonado
7 Nov 2020 Répondre

Bonsoir, j’ai exécuté les mêmes gestes que vous hors mes prix ont changés sur tout mes produits, ils sont passés en dollars alors que de base ils étaient en Euro. Comment puis-je faire ? Car même en retournant en arrière cela ne change rien
1. Dgeo Dev
  9 Nov 2020 Répondre
  
  Hello, surement que le theme n’est pas compatible ou que vous avez un sélecteur de devises 🙁 dans ce cas il vaut mieux retirer le code 🙂
William
29 Nov 2020 Répondre

Bonsoir Geoffrey,

Merci beaucoup pour le temps que vous consacrez à nous fournir du code pour Shopify, c’est incroyable !

J’aimerais savoir pourquoi lorsque je rentre le code pour afficher le pourcentage remisé, le pourcentage affiché est pris à partir du « coût par article » et non à partir du prix d’origine fixé.

Merci d’avance, bonne soirée

William
Blanche
4 Avr 2021 Répondre

Bonjour ,

J’utilise la thème prestige. je n’arrive pas à trouver le product.price.
Pouvez vous m’aider s’il vous plaît?
1. Dgeo Dev
  4 Avr 2021 Répondre
  
  Hello, il faut dans ce cas regarder dans le dossier Snippets et trouver un fichier avec price dedans 😉
Anthony
24 Juil 2021 Répondre

Salut à tous,

Je pense que tu peux aussi qu’il y a une petite coquille :

{{ product.compare_at_price_max | minus:product.price | difference:product.compare_at_price_max | money }}
({{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}%)

product.compare_at_price_max doit devenir » product.compare_at_price » et divided_by:product.compare_at_price_max doit devenir divided_by:product.compare_at_price sinon si tu as plusieurs produits dans ta collection, cela indiquera pas la bonne remise sur les produits puisqu’il prendra la valeur max 🙂

N’est-ce pas ?

Bonne continuation à tous et à toi Dgeo
1. Dgeo Dev
  27 Juil 2021 Répondre
  
  Hello, oui merci c’est effectivement une bonne idée 😉
Mohamed
28 Août 2021 Répondre

Bonjour , j’ai acheter thème shoptimized et je trouve pas le prix comparaison et il y a pas aussi vous économiser

j’ai essaye d’installer le code que vous monter dans le tuto mais je trouve pas
1. Dgeo Dev
  30 Août 2021 Répondre
  
  Bonjour, navré je ne connais pas ce thème. Le mieux serait de demander à leur support. Normalement tous les thèmes doivent proposer cette fonctionnalité. Au besoin c’est intégré dans Speedfly 🙂
Dylouna
28 Oct 2021 Répondre

Bonjour ! merci pour ton tuto par contre je suis sur le thème prestige est je n’ai pas réussi à trouver le product_price pour coller le code.

Merci d’avance pour ton retour,
1. Dgeo Dev
  1 Nov 2021 Répondre
  
  Hello, il faut trouver un fichier avec le mot price dedans ou alors regarder dans le product-template ou main-product dans le dossier liquid si une occurrence price est dans les fichiers.
FRED
9 Nov 2021 Répondre

Salut, et merci . Est-il possible de mettre le background en noir stp
1. Dgeo Dev
  10 Nov 2021 Répondre
  
  Hello, oui il faut remplacer margin:0px 0 15px 0; par margin:0px 0 15px 0; padding:5px; color:#FFF; background:#000;
fred
10 Nov 2021 Répondre

Salut dgeo, tu est très fort et merci pour tout tes tutos
sait tu comment mettre un icone dans le bouton ATC,?
Se serait vraiment du contenu de qualité pour la chaine YouTube ECOM
1. Dgeo Dev
  10 Nov 2021 Répondre
  
  Hello et merci pour le com 🙂 Oui ca serait intéressant mais le soucis c’est que tous les thèmes sont codés différemment et l’identifiant des boutons sont tous différents… Mais j’essaierai de faire un tuto mais il risque d’être un peu compliqué à suivre 🙂
Kareen
20 Nov 2021 Répondre

Salut , la barre de recherche pour rechercher « product_title » ne s’affiche pas directement pour moi comme dans ton tuto? Saurais tu comment la mettre pour un MacBook ? Merci
1. Dgeo Dev
  22 Nov 2021 Répondre
  
  Hello, je ne comprends pas la question par rapport au tuto qui est sur l’économie gagnée? trompé de tuto ? 🙂

Mise en place du système sur Shopify

Ce tutoriel existe aussi en vidéo

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Vous devriez également aimer

Comment créer une Popup sur Shopify

Comment créer une animation CSS sur Shopify

Comment créer un système de Tracking suivi colis sur Shopify

Cet article a 54 commentaires

Francine Ho A Tchung

Dgeo Dev

Scytale

Dgeo Dev

julien

Dgeo Dev

Eliott Ardisson

Dgeo Dev

pascal

Dgeo Dev

kb

Dgeo Dev

Adam

Dgeo Dev

Eric Coppin

Dgeo Dev

thom

Dgeo Dev

Enzo Moretti

Julien

hervé

Leat

Dgeo Dev

belfa

Dgeo Dev

amelia

Dgeo Dev

victor agapit

Dgeo Dev

Amin

Dgeo Dev

humbre

Dgeo Dev

Andriano

Plancherel

Dgeo Dev

rone

Maldonado

Dgeo Dev

William

Blanche

Dgeo Dev

Anthony

Dgeo Dev

Mohamed

Dgeo Dev

Dylouna

Dgeo Dev

FRED

Dgeo Dev

fred

Dgeo Dev

Kareen

Dgeo Dev

Laisser un commentaire Annuler la réponse

Panier