Show Discount Tag or Sticker on Product Image in NopCommerce Theme Customization

Customize nopCommerce theme with discount tag or sticker for every product. here is the solution for how to setup discount tag or any offer tag on all product list in nopCommerce store.

While on adding a Discount tag on Product I found that we have two options available:

1)  The first option is to use NopCommerce Product Sticker Plugin. It is a really nice plugin with good amount customization and support, worth $40 spent.

2)  The second option is to make it custom, simple and free.

NopCommerce forum post contains an example for adding discount percentage % but code is for an older version of nopCommerce.

I have updated code to make it work with nopCommerce 3.20 + version.

 Paste following in _ProductBox.cshtml


            if (!string.IsNullOrEmpty(Model.ProductPrice.OldPrice) && !string.IsNullOrEmpty(Model.ProductPrice.Price))
                var OldPrice = double.Parse(Model.ProductPrice.OldPrice.Replace("Rs.", ""));//Replace Rs. with configured Currency symbol i.e "$"
                var PriceRow = double.Parse(Model.ProductPrice.Price.Replace("Rs.", ""));//Replace Rs. with configured Currency symbol i.e "$"

                if (PriceRow > 0 && OldPrice > 0)
                    var discountValue = OldPrice - PriceRow; // calculate the amount
                    var discountPercentage = Math.Round(100 / (OldPrice / discountValue)); // calculate the percentage
                    if (discountPercentage > 0)
                        <div class="promotion"> <span class="discount">@discountPercentage% OFF</span> </div>

Add Following Style to your CSS file main.css

.promotion {
    line-height: 18px;
    position: absolute;
    z-index: 10;
    bottom: 20px;
    left: 0;
    height: 24px;
    width: auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    left: 0px; // Modify left value to adjust discount tag according to your e-commerce design
    top: 5px; //Modify Top value to adjust discount tag according to your e-commerce design
.discount {
    background: #eb4800;
    height: 100%;
    display: inline-block;
    padding: 3px 5px;
    color: #fff;
    float: left;
    font-size: 15px;
    font-weight: 300;
    border-radius: 0 4px 4px 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);


Use .promotion class to modify the placement of discount tag to show it on the right corner of Product Box. Use CSS property Left, Top, Right, Bottom to show the sticker on a Proper corner.
Applying above CSS and razor syntax you will achieve following UI.

See more programming tricks and tips for nopCommerce theme customization. if you are getting any problems related to applying discount tag option then just leave a comment here.

Thank you

By | 2017-01-03T16:28:06+00:00 July 15th, 2014|E-Commerce, How To, nopCommerce, Tips and Tricks|