Tu veux afficher sur une fiche produit combien ton client économise grâce à un prix réduit ? Il faut comparer le prix barré et le prix de vente de la même variante. Comparer le prix le plus haut d’un produit avec le prix le plus bas d’une autre variante donnerait un résultat faux.
J’avais montré le principe dans cette vidéo « Comment faire un calculateur d’économies sur Shopify », publiée en 2021. L’interface Shopify et les fichiers des thèmes ont pu changer depuis. Voici les données Liquid à utiliser aujourd’hui pour le calcul.
Le calcul
Sur une variante vendue 39,90 € avec un prix comparé de 49,90 €, l’économie affichée est de 10 € et d’environ 20 %. Si le prix comparé n’est pas supérieur au prix de vente, aucun message d’économie ne doit apparaître.
Dans le fichier de ton thème qui affiche le prix sur la fiche produit, ajoute ce bloc Liquid à l’endroit où tu veux montrer l’économie :
{% assign selected_variant = product.selected_or_first_available_variant %}
{% assign original_price = selected_variant.compare_at_price %}
{% assign sale_price = selected_variant.price %}
{% if original_price != blank and original_price > sale_price %}
{% assign amount_saved = original_price | minus: sale_price %}
{% assign percent_saved = amount_saved | times: 100.0 | divided_by: original_price | round %}
<p class="product-savings">
Tu économises {{ amount_saved | money }} ({{ percent_saved }} %)
</p>
{% endif %}
Shopify fournit le prix et le prix comparé au niveau de chaque variante, ainsi que la variante sélectionnée ou la première disponible. Ces prix sont déjà exprimés dans la devise présentée au client ; le filtre money s’occupe de leur affichage.
Vérifie le changement de variante dans ton thème. Ce bloc Liquid calcule le montant lors du chargement de la page. Si ton thème change de variante sans recharger la page, son script de mise à jour des prix doit aussi actualiser ce message. Teste une variante en promotion, une variante sans promotion et le changement de devise si tu vends à l’international.
Si tu utilises Speedfly, le thème propose déjà l’affichage d’un badge d’économie sur la fiche produit. Vérifie d’abord ses réglages avant de modifier son code.
