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 /

nopcommerce logo

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):

@using Nop.Core
@using Nop.Core.Infrastructure
@using Nop.Services.Localization
@using Nop.Web.Framework.Themes
    //logo path
    var currentThemeName = EngineContext.Current.Resolve<IThemeContext>().WorkingThemeName;
    var logoPath = "~/Themes/" + currentThemeName + "/Content/images/logo.gif";
    //store name
    var storeName = EngineContext.Current.Resolve<IStoreContext>().CurrentStore.GetLocalized(x => x.Name);

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:

var logoPath = "~/Themes/" + currentThemeName + "/Content/images/logo.gif";

to this:

var logoPath = "~/Themes/" + currentThemeName + "/Content/images/1NewLogo.jpg";

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:
nopCommerce logo

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

  <div class="header-logo">
      <a href="@Url.RouteUrl("HomePage")">
          <img title="" alt="@storeName" src="@Url.Content(logoPath)">

Hope it helps!

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment