How to change store logo in nopCommerce

Today, we will go over the steps required to change store logo in nopCommerce. Many of the nopCommerce users are familiar with the process of changing the logo from CSS stylesheet. This method was good in older versions of nopCommerce but when nopCommerce switched from web forms to MVC, the process of changing logo also changed.

Let's go over the steps of changing the store logo, if you are using any of the newer version of nopCommerce:

Step 1: Make sure you have your new logo image file. In this example, we will be using "1NewLogo,jpg".


Step 2: Now, save your logo in your theme folder (we are using "DefaultClean"  theme for this example): YOUR THEME Folder (DefaultClean ) / Content / images /




Step 3: Go to this location in the code: Views/Shared/Header.cshtml

Here you will see that logo has been hardcoded here (instead of allowing you to change in CSS stylesheet):

Step 4: In order to change the logo, simple update the file name (or path, in case you have your logo somewhere else).

For this example we will update this:

to this:

Step 5: Now, just save changes and run your website to see the new store logo.

Note: The default logo dimensions are 300px X 60px 

Here is our new logo on the nopCommerce site:



Note: If you would like to make any additional changes, you can find the logo area in the same location in the code: Views/Shared/Header.cshtml

Hope it helps!