Let’s say you want to discount a certain product (“compare at price” in Shopify) and display to the customer the amount he is saveing by this discount, and the percentage the price is discounted for.

We found this solution a while back and it did the trick. Use this Javascript code in your product.template (under “Templates” or “Sections” in the “Theme – Edit Code”):

<script type="text/javascript">
var RRP = {{ product.compare_at_price_min | money_without_currency }};
var minPrice = {{ product.price_min | money_without_currency }};
var youSave = RRP - minPrice;
var youSavePerc = Math.round(((RRP - minPrice) / RRP) * 100);
var myText = "<span class='amount-saved'>You Save " + "&usd;" + youSave.toFixed(2) + " (" + youSavePerc + "%)</span>";

You can then style the class .amount-saved with CSS per your liking.

Write a comment