This tutorial does not require Visual Studio and does not need any type of recompile of the nopCommerce code. You can do everything in this tutorial with notepad and access to the file system nopCommerce is installed in (FTP, network, SCP, etc).
About ASPHostPortal.com
ASPHostPortal.com is Microsoft No #1 Recommended Windows and ASP.NET Spotlight Hosting Partner in United States. Microsoft presents this award to ASPHostPortal.com for ability to support the latest Microsoft and ASP.NET technology, such as: WebMatrix, WebDeploy, Visual Studio 2012, ASP.NET 4.5, ASP.NET MVC 4.0, Silverlight 5 and Visual Studio Lightswitch. Click here for more information
This tutorial applies to:
nopCommerce 2.0, nopCommerce 2.1, nopCommerce 2.2, nopCommerce 2.3
To get started you are going to copy one of the pre-existing themes and use it as the base of your new theme. So go to the root of your nopCommerce store and drill down to the theme section.
[root]/NopCommerceStore/Themes/
Step 1 – Copy the Directory
Here you should see a couple of themes, which themes exactly depend on the version of nopCommerce you are using. I recommend selecting “NopClassic” or “darkOrange”, and copy either one in the theme directory as a copy. Then rename that directory.
Step 2 – Edit “theme.config”
Update “theme.config” (\Themes\YourThemeName\theme.config) and update the title, the rest of the XML doesn’t impact the display of the theme. This just effects the title on the theme drop down in the admin section. If you leave it the same you will not able to tell which theme is which. So the file should now look something like this after you have edited it.
Step 3 – Edit “head.cshtml”
Now updated the “head.cshtml” file (\Themes\YourThemeName\Views\Shared\Head.cshtml). This is the real gotcha for me, missing this step will make your new theme directory appear as if it is stuck using the theme you copied it from. Change both of the “link href” values to reflect the directory of your new theme. In my case it looked like this.
Step 4 – Select Theme in nopCommerce Admin
Once you have completed this step update the nopCommerce Admin to reflect the fact that you wish to use your new theme. If you don’t see your theme listed, restart IIS. NopCommerce has its own internal caching algorithium and it can take some time to notice an updated to the backend like this one.
Any changes you want to make to your copied theme can now be done. The important directories and files for the designers in the audience are…
Main CSS File
[root]/NopCommerceStore/Themes/YourThemeName/Content/styles.css
Images and Media
[root]/NopCommerceStore/Themes/YourThemeName/Content/images