How to display product ID on the product page in nopCommerce

Every online store offers some unique features / options that distinguish them from an another store site. For example: some online stores provide detailed description of the products they are offering and some do not, some online stores provide a ton of product pictures so that customer can view the product from every possible angle and some online stores choose not to display all the pictures.

When it comes to displaying information regarding the product on the product page, every store site have it’s own requirement(s). In nopCommerce, we already have features that allow a store site to display product description, product SKU or product MPN (manufacturer part number) etc.

Today, we will go over the process of displaying (or adding) product ID on the product page in nopCommerce.

This is how the default (out of the box) product page looks like with SKU and MPN display enabled:


In order, to add “Product ID” to the product page, we will go to:



Open “ProductTemplate.Simple.cshtml” file and find this:

<!--SKU, MAN, GTIN, vendor-->
                        @Html.Partial("_SKU_Man_GTIN_Ven", Model)


In this example, we are going to display/add the product ID information right below the SKU/MPN/GTIN.

Now, add product ID information in the code like this:

<!-- Adding Product ID Here -->
                      <p><strong>Product ID:</strong> @Model.Id </p>


This is how the code looks like in the product template:

@Html.Widget("productdetails_overview_top", Model.Id)
                       <!--product reviews-->
                       @Html.Partial("_ProductReviewOverview", Model.ProductReviewOverview)
                       @Html.Partial("_ProductManufacturers", Model.ProductManufacturers)
                       @Html.Partial("_Availability", Model)
                       <!--SKU, MAN, GTIN, vendor-->
                       @Html.Partial("_SKU_Man_GTIN_Ven", Model)
                       <!-- Adding Product ID Here -->
                       <p><strong>Product ID:</strong> @Model.Id </p>
                       @Html.Partial("_DeliveryInfo", Model)
                       <!--sample download-->
                       @Html.Partial("_DownloadSample", Model)


Save changes and view the product page on the public store:


 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 *