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 /,
   
   
   
   
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:
   

   @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.png";
   
       //store name
       var storeName = EngineContext.Current.Resolve<IStoreContext>().CurrentStore.GetLocalized(x => x.Name);
   }

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:
   

   @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/NewStoreLogoImage.jpg";
   
       //store name
       var storeName = EngineContext.Current.Resolve<IStoreContext>().CurrentStore.GetLocalized(x => x.Name);
   }

   That is all - Make sure to save changes and view the public store site. You should be able to see the new 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:

<div class="header-lower">
    <div class="header-logo">
        <a href="@Url.RouteUrl("HomePage")">
            <img title="" alt="@storeName" src="@Url.Content(logoPath)">
        </a>
    </div>
    <div class="search-box">
        @Html.Action("SearchBox", "Catalog")
    </div>
</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.