Tuto Shopify Ajouter l’économie gagnée et le pourcentage sur une fiche produit

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:-25px 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 😉

Bonne installation à toutes et tous 😉

14 commentaires sur “Tuto Shopify Ajouter l’économie gagnée et le pourcentage sur une fiche produit

  1. Francine Ho A Tchung

    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.

  2. Scytale

    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

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

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

    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

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

    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

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

    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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*