Steps For Adding A Logo In nopCommerce ASP.NET (MVC)

Today, we will go over the steps for adding a store logo in nopCommerce. The default solution comes with a free theme that also includes a default logo but when any user is launching a website based on nopCommerce, the store logo needs to be changed in order to personalize the store site with a brand logo.

  1. Make sure you have the image file of your new logo. For this example we will use "NewStoreLogoImage.jpg" file.

  2. Save the new logo in this location: Custom Theme Folder (or DefaultClean ) / Content / images /,

    Image

  3. In your web files, go to the following location: Views / Shared / Header.cshtml,

    Open the "Header.cshtml" file and you will find the following code at the top:
    1. @using Nop.Core    
    2. @using Nop.Core.Infrastructure    
    3. @using Nop.Services.Localization    
    4. @using Nop.Web.Framework.Themes    
    5. @{    
    6.     //logo path    
    7.     var currentThemeName = EngineContext.Current.Resolve<IThemeContext>().WorkingThemeName;    
    8.     var logoPath = "~/Themes/" + currentThemeName + "/Content/images/logo.png";    
    9.     
    10.     //store name    
    11.     var storeName = EngineContext.Current.Resolve<IStoreContext>().CurrentStore.GetLocalized(x => x.Name);    
    12. }   
  4. For adding your logo, you need to change file name like the following:

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

    So, the code will be:
    1. @using Nop.Core    
    2. @using Nop.Core.Infrastructure    
    3. @using Nop.Services.Localization    
    4. @using Nop.Web.Framework.Themes    
    5. @{    
    6.     //logo path    
    7.     var currentThemeName = EngineContext.Current.Resolve<IThemeContext>().WorkingThemeName;    
    8.     var logoPath = "~/Themes/" + currentThemeName + "/Content/images/NewStoreLogoImage.jpg";     
    9.     
    10.     //store name    
    11.     var storeName = EngineContext.Current.Resolve<IStoreContext>().CurrentStore.GetLocalized(x => x.Name);    
    12. }  
    That is all - Make sure to save changes and view the public store site. You should be able to see the new logo:

    New Custom Store logo

Tip: If you are interested in knowing how the logo is being used in the web file, look into the "Header.cshtml" code and you will see this:

  1. <div class="header-lower">    
  2.     <div class="header-logo">    
  3.         <a href="@Url.RouteUrl("HomePage")">    
  4.             <img title="" alt="@storeName" src="@Url.Content(logoPath)">    
  5.         </a>    
  6.     </div>    
  7.     <div class="search-box">    
  8.         @Html.Action("SearchBox""Catalog")    
  9.     </div>    
  10. </div>    
A few things to keep in mind:

 

  • The default dimensions of the logo is: 310px (width) X 60px (height).

  • If you do not want to change anything in the code, you can replace the default logo with your new logo image file (just make the dimensions match).

  • Version used for this article: nopCommerce 3.60.

  • You can download nopCommerce here.