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

By: Chintan
Updated: July 15, 2014 | Technology: E-Commerce, How To, nopCommerce, Tips and Tricks
Show Discount Tag or Sticker on Product Image in NopCommerce Theme Customization

Customize the nopCommerce theme with discount tag or sticker for every product. here is the solution for how to set up a 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.

NopCommerce Product Sticker Plugin:

http://foxnetsoft.com/nopcommerce-productstickers It is a really nice plugin with good amount customization and support, worth $40 spent.

Make it custom, simple and free:

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

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

Paste following in _ProductBox.cshtml

Copy to Clipboard

How to add?

Add Following Style to your CSS file main.css

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.

Show Discount Tag or Sticker on Product Image in NopCommerce

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…!!