Steps for Adding a Store Logo in nopCommerce ASP.NET (MVC)

Introduction

In this tip, 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.

Background

nopCommerce is an open source ecommerce software that is based on ASP.NET (MVC) and it contains both a catalog frontend and an administration tool backend. nopCommerce is a fully customizable shopping cart. (Source: www.nopcommerce.com)

nopCommerce is open-source, the source code is available free for download: CLICK HERE

Steps

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 this location: Views / Shared / Header.cshtml

   Open the "Header.cshtml" file and you will find this code at the top:

   HTML

   @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 this:

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

   So, the code will be:

   HTML

   @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