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

Pour ce faire rendez-vous dans vos fichiers de votre thème: Online store – Actions – Edit 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 😉

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 4 votes]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 32 commentaires

  1. 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. Hello, en théorie oui c’est la bonne démarche ! Bonne soirée

  2. 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. 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. 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. 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

  3. 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. 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

  4. 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. 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 🙂

  5. 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. Bonsoir, surement un conflit de code ou JS fait f12 sur chrome et regarde si tu as des erreurs rouge dans la console.

  6. 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. 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é ?

  7. 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. 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

  8. 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

  9. Salut, merci beaucoup pour ce tuto
    je voulais savoir si tu savais comment modifier la police et la couleur
    Merci d’avance

    1. Salut, oui le tuto est super,
      mais effectivement je cherche à modifier la couleur également.. 🙂

  10. 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. 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.

  11. bonjour,
    je souhaiterais mettre le prix barré en rouge. thème Supply
    merci

    1. Hello, logiquement le thème doit le proposer. il faut regarder dans param de themes – couleurs

  12. Bonjour, comment faire pour changer la couleur du pourcentage ? En rouge par exemple ?

    1. 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

  13. 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. hello et merci pour le com. Entourer la zone par une balise qui centre :

  14. 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. 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.

  15. bonjour, je voudrais enlever le -30% commment dois-je faire ?

    1. Hello, il suffit de supprimer le code installé 😉

  16. Encore merci pour ce tuto !
    Très simple à mettre en place.

Laisser un commentaire

Fermer le menu
×
×

Panier

Envie de Protéger le contenu de ton site ?

Speedecom te propose l'Application Shopify Speed Defender !
Elle va te permettre de protéger ton site des copieurs et protéger tes contenus, tes médias et même empêcher les raccourcis claviers et l'affichage du code source ;) !

N'hésite pas à la tester elle est Gratuite pendant 3 jours

Tester Speed Defender

Envie de Booster ton taux de conversion ?

Speedecom a créé une nouvelle Application Shopify qui devrait te plaire !
Elle va te permettre de créer des Bundles en direct checkout !
N'hésite pas à la tester elle est Gratuite pendant 7 jours

Tester Speed Bundle

Besoin d'un developpeur ?

Si tu as un besoin particulier sur ta boutique,
n'hésite pas à me contacter et à regarder mes prestations !

Consulter mes prestations