Your logo is a visual representation of your business. So, when it comes to running an online business, you want to make your logo prominent on your e-Commerce site – so that customers can associate your brand with the product & services that you offer.
When it comes to changing or uploading your store logo on a nopCommerce site, there are several different ways you can accomplish this. In this tutorial, we will cover all the different methods that allows you to upload your store logo in nopCommerce. Whether you are a store owner or a developer, you will find all these different methods helpful.
Method #1 (for store owners)
The first method allows you to easily upload your store logo from the administration section in a very user-friendly way.
Go to: Dashboard
Navigate to:
Configuration -> Settings -> General settings
On the “General settings” page, you will see the option to upload your store logo (an image file):
Make sure to save your changes after you upload your store logo.
Method #2 (for store owners & developers)
Basically, this method is a workaround to update a store logo quickly without going into the administration area or via code. As long as you have access to the root directly where your nopCommerce site is hosted, you can follow this method to change the store logo.
Steps:
Method #3 (for developers)
This method requires some technical knowledge, and it is recommended for developers (that are looking to make changes to the actual theme and would like to know where the logo is referenced in the code). You will need access to the source code in order to make these changes.
Steps:
Save your store logo in this location (with any name): /Nop.Web/Themes/YOUR_THEME/Content/images/
Navigate to: /Nop.Web/Factories/CommonModelFactory.cs
Open the “CommonModelFactory.cs” file.
Look for this method:
public virtual LogoModel PrepareLogoModel()
{
var model = new LogoModel
{
StoreName = _localizationService.GetLocalized(_storeContext.CurrentStore, x => x.Name)
};
var cacheKey = string.Format(ModelCacheEventConsumer.STORE_LOGO_PATH, _storeContext.CurrentStore.Id, _themeContext.WorkingThemeName, _webHelper.IsCurrentConnectionSecured());
model.LogoPath = _cacheManager.Get(cacheKey, () =>
{
var logo = "";
var logoPictureId = _storeInformationSettings.LogoPictureId;
if (logoPictureId > 0)
{
logo = _pictureService.GetPictureUrl(logoPictureId, showDefaultPicture: false);
}
if (string.IsNullOrEmpty(logo))
{
//use default logo
logo = $"{_webHelper.GetStoreLocation()}Themes/{_themeContext.WorkingThemeName}/Content/images/logo.png";
}
return logo;
});
return model;
}
$”{_webHelper.GetStoreLocation()}Themes/{_themeContext.WorkingThemeName}/Content/images/logo.png”;
Visit Everleap to learn more about our nopCommerce hosting solutions
About Guest Blogger: Lavish Kumar
Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a resource of nopCommerce tutorials and a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills. He’s been a nopCommerce MVP for the past 8 years, winner of nopCommerce award and is passionate about nopCommerce, writing tech articles and building great web applications. Lavish is an active open-source contributor, author of the official nopCommerce designer’s guide and is often found on the nopCommerce forum assisting users to resolve problems. Lavish specializes in custom web applications, e-Commerce platforms, CMS implementation and CRM systems. Lavish’s technical experience also includes development of custom nopCommerce themes and plugins for a wide variety of users and his dedication to nopCommerce is evident in all of his projects.
No responses yet