How to add CSS and JS resource files in nopCommerce

Today, we will go over the process of adding CSS and JS resource files in nopCommerce. Some developers or web designers follow different ways to add resources / references into the web files, each way carry its own advantage and disadvantage.  So, we are not going to go over what is the “correct” way of adding references because this can lead to a never ending debate.

So, we are going to discuss what is the best “recommended” way to add CSS and JS resource files in nopCommerce project.

In order to load your resource files correctly in the view pages, you can use the following helper methods:

  • Html.AddScriptParts(): For loading JS files
  • Html.AddCssFileParts(): For loading CSS files

If you go to: Nop.Web/Views/Shared/ _Root.Head.cshtml


You can add the resource files like this:


    //Load JS file

    //Load CSS file



In order to load resource files in your plugin, you can use the same helper methods:

  • Html.AddScriptParts()
  • Html.AddCssFileParts()


Simply place these with the file path in the into your plugin’s view files like this:



        //Loading js file
        //Third parameter value indicating whether to exclude this script from bundling
        Html.AddScriptParts(ResourceLocation.Foot, "~/Plugins/{PluginName}/Scripts/{JSFileName.js}", true);

        //Loading CSS file
        Html.AddCssFileParts(ResourceLocation.Head, "~/Plugins/{PluginName}/Content/{CSSFileName.Css}");


Hope it helps!


 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 *