Get Your Discounts Noticed On The Product Page

It is not enough to have discounts in your store. You also have to draw your customer's attention to those discounts. One of the best ways to do that is to show the potential savings as a numeric value and as a percentage of the original price. This article will show you how to display both of these values on the product page with a simple modification.

Instructions

1. Login to your control panel and navigate to Design > Edit HTML/CSS and open the ProductDetails.html file.

2. Add the following script at the bottom of the page:

   
   <script type="text/javascript">
   var smProduct = {};
   smProduct.retailPrice = "%%GLOBAL_RetailPrice%%".replace('<strike>','').replace('</strike>','').slice(1);
   smProduct.regularPrice = "%%GLOBAL_ProductPrice%%".slice(1);
   
   $(document).ready(function() {
               var percentSaved = Math.round((1 - parseFloat(smProduct.regularPrice/smProduct.retailPrice)) * 100); 
               if(percentSaved > 0) {
                  $(".YouSaveAmount").after(" (" + percentSaved + "%)"); 
                  var newSaveText = $("span.YouSave").text().slice(0,-1).slice(2);
                  $("span.YouSave").html(newSaveText);
               }
   });
   </script>
   
   

3. Save your changes, and navigate to a product page. You should see the discount expressed as a numeric value followed by the percentage.

How It Works

The percentage will show up on the product page right after the discount amount. You must have a discount to begin with otherwise the modification will not work. Here's a screen shot of the modification in action:

Troubleshooting

If a discount is not displayed... then double-check that you have set a retail price that is higher than the regular/sale price for the product. You can set the retail price by clicking the 'More pricing' link when modifying a product in the control panel.

If you get errors calculating the percentage... then it is probably related to the currency symbol. The code assumes that the first character in the price is the currency symbol. If that is not the case for your currency then you will need to contact us to make some changes to the code.

If it still doesn't work... then contact us. We can install the modification for you.