How to Add a New Product Template in nopCommerce

nopCommerce is a great open-source e-commerce shopping cart platform available in the ASP.NET Framework.  It is relatively easy to master and packs a ton of features.   It has everything you need to get started selling physical and digital goods over the Internet.  nopCommerce is also fully customizable.  In other words, if you want to change anything about it, nopCommerce allows you to do so in one way or another.

nopCommerce offers a responsive and mobile-friendly modern theme out of the box that has been designed to make any online store site look professional.  By default, nopCommerce offers two product templates:

• Simple product
• Group product (products with variant)

But you may want to customize the default theme and make changes to a product template. In this article,  I will cover all the steps involved in adding a new custom product template to your nopCommerce store site.

• You can work with the NoSource version in order to make this customization (complete source code is not necessary).
• You will need access to the view files.
• We are using the latest nopCommerce 4.1 in this example.

Currently, when you add a new product on your nopCommerce site, you get two options to define the product type (which means two types of product templates):

To add a new product template item, login to your nopCommerce store site as an administrator.

Go to: Administration -> Dashboard

Navigate to: System -> Templates

• Now, you will see the template page where you can manage all the templates on your nopCommerce site.
• In this case, we will look into product templates.
• Let’s navigate to “Product template” tab like this:

On the “Product templates” tab, you can see the two default product templates that comes with nopCommerce out of the box.

• Click on the “+ Add new record” button.
• Enter all the information such as:
  • Name of your new custom product template: Simple product (Custom)
  • View path: ProductTemplateCustom.Simple
  • Display order: 11
  • Ignored product type IDs (advanced): 11
• Click on the “Update” button.

Remember: We have only added a new record for a custom product template, but we have not yet added an actual product template (i.e., view) for which we have provided the name.

Now, we will add a new product template view using Visual Studio.

• Go to this location: /Nop.Web/Views/Product/
• Within the Product folder, look for the “ProductTemplate.Simple.cshtml” view file.
• Copy the view.

• Paste the copied view file in the same location.
• Name the new template “ProductTemplateCustom.Simple.cshtml” which is the same name we added as a new template record item in product templates tab in administration area (above).

In order to make our new custom product template different from the default Simple product template, we can add styling to it.

Find this in “ProductTemplateCustom.Simple.cshtml”.

<div class=”product-name”>
<h1 itemprop=”name”>
@Model.Name
</h1>
</div>

Change the “product-name” div to this (below) by adding some styling.

<div class=”product-name” style=”background-color:lightgoldenrodyellow;border: 1px solid red; border-radius: 12px; padding:10px;”>
<h1 itemprop=”name”>
@Model.Name
</h1>
</div>

Now, we are ready for testing!

Let us pick any product on nopCommerce site like this:

This product is currently using the default Simple product template.

Now, change it by selecting the new custom template and SAVE.

Let us refresh the product page on public store and we will see our new custom product template being used by the product:

I hope this helps you in customizing your online store.

Visit Everleap to learn more about our nopCommerce hosting solutions

About Guest Blogger: Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a resource of nopCommerce tutorials and a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills. He’s been a nopCommerce MVP for the past 8 years, winner of nopCommerce award and is passionate about nopCommerce, writing tech articles and building great web applications. Lavish is an active open-source contributor, author of the official nopCommerce designer’s guide and is often found on the nopCommerce forum assisting users to resolve problems. Lavish specializes in custom web applications, e-Commerce platforms, CMS implementation and CRM systems. Lavish’s technical experience also includes development of custom nopCommerce themes and plugins for a wide variety of users and his dedication to nopCommerce is evident in all of his projects.