Step-by-Step Guide to Create and Install a New Plugin in nopCommerce

🧠 Introduction

nopCommerce is one of the most flexible open-source eCommerce platforms built on ASP.NET Core.

Its modular architecture allows developers to extend core functionality easily using plugins — without modifying the main codebase.

In this blog, we’ll go through a step-by-step process to create and install a custom nopCommerce plugin using the latest version (4.60+) — and as a practical example, we’ll build a plugin that adds a slider image gallery to the product detail page.

⚙️ Step-by-Step: How to Create a nopCommerce Plugin

🧩 Step 1: Setup the Development Environment

Before starting, make sure you have:

• nopCommerce 4.60+ source code

• Visual Studio 2022 or later

• .NET 7 SDK installed

• SQL Server (Express or Developer edition)

Download the source code from nopCommerce GitHub.

Open the NopCommerce.sln file in Visual Studio.

🧱 Step 2: Create a New Plugin Folder

Navigate to:

\Plugins\

Create a new folder for your plugin. Example:

\Plugins\Nop.Plugin.Misc.ProductImageSlider\

Inside it, create the following structure:

\Nop.Plugin.Misc.ProductImageSlider\
   ├── Controllers\
   ├── Models\
   ├── Views\
   ├── plugin.json
   └── ProductImageSliderPlugin.cs

🧾 Step 3: Configure the plugin.json File

This file tells nopCommerce about your plugin details.

Example content:

{
  "Group": "Misc",
  "FriendlyName": "Product Image Slider",
  "SystemName": "Nop.Plugin.Misc.ProductImageSlider",
  "Version": "1.00",
  "Author": "CloudVerve Technologies",
  "DisplayOrder": 1,
  "FileName": "Nop.Plugin.Misc.ProductImageSlider.dll",
  "Description": "Adds an image slider to the product detail page"
}

🧰 Step 4: Create the Main Plugin Class

Create a file named ProductImageSliderPlugin.cs inside the root of your plugin folder.

Here’s a simple structure:

using Nop.Core;
using Nop.Services.Plugins;

namespace Nop.Plugin.Misc.ProductImageSlider
{
    public class ProductImageSliderPlugin : BasePlugin
    {
        public override string GetConfigurationPageUrl()
        {
            return $"{Nop.Web.Framework.Constants.NopTab.AdminArea}/ProductImageSlider/Configure";
        }

        public override async Task InstallAsync()
        {
            // Add any database setup or default configuration here
            await base.InstallAsync();
        }

        public override async Task UninstallAsync()
        {
            // Cleanup during uninstall
            await base.UninstallAsync();
        }
    }
}

This defines your plugin’s base class — how it installs, uninstalls, and where its configuration page will appear in the admin panel.

🖼️ Step 5: Create the Controller

Create a new file under Controllers folder:

ProductImageSliderController.cs

using Microsoft.AspNetCore.Mvc;
using Nop.Web.Framework.Controllers;

namespace Nop.Plugin.Misc.ProductImageSlider.Controllers
{
    public class ProductImageSliderController : BasePluginController
    {
        public IActionResult Configure()
        {
            return View("~/Plugins/Misc.ProductImageSlider/Views/Configure.cshtml");
        }
    }
}

This controller will handle your plugin’s admin configuration page.

🧩 Step 6: Create the View for the Slider

Create a folder:

\Plugins\Nop.Plugin.Misc.ProductImageSlider\Views\

Inside it, create a file: Configure.cshtml

This page will appear when an admin configures the plugin.

@{
    Layout = "_AdminLayout";
}
<div class="content-header clearfix">
    <h1>Product Image Slider Settings</h1>
</div>
<div class="content">
    <p>This plugin adds an image slider to product detail pages.</p>
</div>

🖼️ Step 7: Inject Slider Code into Product Detail Page

To display your slider, use Widget Plugin Integration.

Add an implementation for the IWidgetPlugin interface in your main plugin class:

using Nop.Services.Cms;
using Nop.Web.Framework.Infrastructure;
using Nop.Web.Framework.Models;

public class ProductImageSliderPlugin : BasePlugin, IWidgetPlugin
{
    public bool HideInWidgetList => false;

    public Task<IList<string>> GetWidgetZonesAsync()
    {
        return Task.FromResult<IList<string>>(new List<string> { PublicWidgetZones.ProductDetailsBeforePictures });
    }

    public Task<string> GetWidgetViewComponentNameAsync(string widgetZone)
    {
        return Task.FromResult("ProductImageSlider");
    }
}

Now, create a ViewComponent under /Components/ProductImageSliderViewComponent.cs:

using Microsoft.AspNetCore.Mvc;
using Nop.Web.Framework.Components;

namespace Nop.Plugin.Misc.ProductImageSlider.Components
{
    [ViewComponent(Name = "ProductImageSlider")]
    public class ProductImageSliderViewComponent : NopViewComponent
    {
        public IViewComponentResult Invoke()
        {
            return View("~/Plugins/Misc.ProductImageSlider/Views/PublicInfo.cshtml");
        }
    }
}

Create the PublicInfo.cshtml view for the actual slider UI:

<div class="product-slider">
    <div class="slider-container">
        <img src="/images/sample1.jpg" alt="Product Slide 1" />
        <img src="/images/sample2.jpg" alt="Product Slide 2" />
        <img src="/images/sample3.jpg" alt="Product Slide 3" />
    </div>
</div>

<style>
.product-slider img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}
</style>

You can later replace static images with dynamic product images via the model.

⚙️ Step 8: Build & Install the Plugin

1. In Visual Studio, Build the Solution.

2. The compiled DLL will appear under:

   \Presentation\Nop.Web\Plugins\bin\
   

3. Copy your plugin folder to:

   \Presentation\Nop.Web\Plugins\
   

4. Run the nopCommerce site and go to:

   Admin → Configuration → Local Plugins

5. Click "Reload list of plugins".

6. Find Product Image Slider Plugin and click "Install".

Your plugin should now be active!

💡 Step 9: Verify the Plugin on Product Page

Open any product page — you’ll now see a slider gallery above the product images (as defined in your widget zone).

If needed, you can extend this with:

• Dynamic image fetching from product media files.

• Carousel library integration (like Slick.js or Swiper.js).

• Admin configuration for image speed, autoplay, etc.

🧠 Conclusion

Creating a plugin in nopCommerce (especially version 4.60+) has become simpler and cleaner thanks to its modular architecture and .NET 7 improvements.

With just a few files and configurations, you can extend nopCommerce to meet almost any business requirement — from custom sliders to payment integrations.

At CloudVerve Technologies, we help businesses develop, customize, and integrate nopCommerce plugins that enhance store functionality and user experience — tailored to your business goals.