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
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 😉
Francine Ho A Tchung
28 Août 2018Bonjour 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.
Dgeo Dev
12 Nov 2018Hello, en théorie oui c’est la bonne démarche ! Bonne soirée
Scytale
2 Sep 2018Bonjour, 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???
Dgeo Dev
6 Sep 2018Bonsoir, 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
julien
23 Sep 2018Bonsoir,
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!
Dgeo Dev
24 Sep 2018Hello, 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
Eliott Ardisson
2 Juin 2020Avez-vous la procédure dans ce cas la svp?
Mes prix different par option/pack et le pourcentage n’est donc pas correct.
Dgeo Dev
2 Juin 2020Non navré cela demande un developpement sur mesure car tous les thèmes sont codés différemment.
pascal
24 Sep 2018Bonjour 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
Dgeo Dev
24 Sep 2018Hello, 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 2018Hello,
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
Dgeo Dev
18 Oct 2018Hello, 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 2018Salut 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.
Dgeo Dev
28 Nov 2018Bonsoir, 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 2018Bonjour 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
Dgeo Dev
7 Déc 2018Ce 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 2018Bonsoir,
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.
Dgeo Dev
31 Déc 2018Hello, 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 2019Salut,
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 2019Salut, merci beaucoup pour ce tuto
je voulais savoir si tu savais comment modifier la police et la couleur
Merci d’avance
hervé
7 Mar 2019Salut, oui le tuto est super,
mais effectivement je cherche à modifier la couleur également.. 🙂
Leat
22 Mar 2019Ne 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 🙂
Dgeo Dev
7 Avr 2019Hello, 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 2019bonjour,
je souhaiterais mettre le prix barré en rouge. thème Supply
merci
Dgeo Dev
18 Avr 2019Hello, logiquement le thème doit le proposer. il faut regarder dans param de themes – couleurs
amelia
17 Avr 2019Bonjour, comment faire pour changer la couleur du pourcentage ? En rouge par exemple ?
Dgeo Dev
18 Avr 2019Hello, 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 2019Salut ! 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 !
Dgeo Dev
18 Juin 2019hello et merci pour le com. Entourer la zone par une balise qui centre :
Amin
21 Août 2019Bonjour,
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 ?
Dgeo Dev
21 Août 2019Hello, 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 2019bonjour, je voudrais enlever le -30% commment dois-je faire ?
Dgeo Dev
26 Août 2019Hello, il suffit de supprimer le code installé 😉
Andriano
2 Oct 2019Encore merci pour ce tuto !
Très simple à mettre en place.
Plancherel
3 Mai 2020Bonjour,
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.
Dgeo Dev
5 Mai 2020Hello, pas d’idée comme ça non 🙁 faudrait que je regarde plus en détail. MP au besoin.
rone
18 Juin 2020Bonjour;
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 2020Bonsoir, 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
Dgeo Dev
9 Nov 2020Hello, 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 2020Bonsoir 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 2021Bonjour ,
J’utilise la thème prestige. je n’arrive pas à trouver le product.price.
Pouvez vous m’aider s’il vous plaît?
Dgeo Dev
4 Avr 2021Hello, il faut dans ce cas regarder dans le dossier Snippets et trouver un fichier avec price dedans 😉
Anthony
24 Juil 2021Salut à 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
Dgeo Dev
27 Juil 2021Hello, oui merci c’est effectivement une bonne idée 😉
Mohamed
28 Août 2021Bonjour , 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
Dgeo Dev
30 Août 2021Bonjour, 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 2021Bonjour ! 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,
Dgeo Dev
1 Nov 2021Hello, 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 2021Salut, et merci . Est-il possible de mettre le background en noir stp
Dgeo Dev
10 Nov 2021Hello, oui il faut remplacer margin:0px 0 15px 0; par margin:0px 0 15px 0; padding:5px; color:#FFF; background:#000;
fred
10 Nov 2021Salut 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
Dgeo Dev
10 Nov 2021Hello 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 2021Salut , 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
Dgeo Dev
22 Nov 2021Hello, je ne comprends pas la question par rapport au tuto qui est sur l’économie gagnée? trompé de tuto ? 🙂