How to customize the Item Box in nopCommerce

Many developers / web designers like to customize the default theme that comes with nopCommerce out of the box. If you want to make the product picture bigger or smaller or if you like to add some hover over effects on itembox when a customer places the pointer on the the products. Today, we will go over different ways to customize them itembox in nopCommerce.

In order to accomplish this, you will have  to customize the design in a few areas.

Point# 1) You can change the product image size (and other media setting) by going to:

Administration > Configuration > Settings > Media Settings

Look into changing: “Product thumbnail image size (catalog)”



Point # 2) Now, if you have changed the product image size, you may want to change the width of blocks accordingly in order to display the product image properly

For changing the display of product box: Change css style of “.product-grid” & “.product-item” and related classes below.

For categories and manufacturers: “.sub-category-grid” & “.item-box”, “.manufacturer-grid” & “.item-box” and related classes below.



Point # 3) You can also consider adding “Product Detail” button, look into the code for product box and see how link is being used for “product name” and add a button “More” and use the same link as used in product name in the product box.


<input type="button" value="Product Detail" class="button-2 product-box-add-to-cart-button" onclick="setLocation('@Url.RouteUrl("Product", new { SeName = Model.SeName })')" />


The above code in “Views/Shared/_ProductBox” will give you result like this:



Point # 4) You can change the button style (in CSS) according to your requirement for “Add to card” like this:


 Looking for quality nopCommerce Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Lavish Kumar

Founder, developer and owner of - By profession, he is a software programmer / web developer, web designer & DBA. He is passionate about technology and electronic gadgets. He enjoys writing tech articles and developing web applications. He is a nopCommerce MVP and author of official nopCommerce Designer's Guide.

Leave a Reply

Your email address will not be published. Required fields are marked *