Creating your own nopCommerce Theme – Quick & Easy

For information on creating themes for nopCommerce 2.0, 2.1, 2.3, etc please follow this tutorial

Check out our simple nopCommerce Graphic’s Package, it will allow you to create a nopCommerce theme locally on your computer, then once you are finished upload the theme to your nopCommerce store quickly and easily.

So if you downloaded nopCommerce with the actual intention of using it as your web store front, you are going to need to skin it to match you business. So the next question that might cross your mind… should I buy a theme or create my own.

At this point I’ll take a moment to make a company plug, if you want a custom profession design for your nopCommerce store D3 Systems has graphic designers on staff with years of experience. Both in graphic design in general, but also specifically skinning nopCommerce Stores. Our designers have been working with nopCommerce since version 1.30 (as of this article they are up to 1.8), so we have been around a while and upon request and provide some great portfolio examples. Please send all inquieries to sales@d3-systems.com.

This article is for people that have a background in HTML, CSS, and graphic design (since those are the technologies you are going to need to use to do this).

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/App_Themes/

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. Then simply rename that directory to whatever you want to name your new theme. NopCommerce will read this directory and display the names based on whatever the folder names are in the admin section of your store. Its that simple, the reason that you don’t see “administration” and “Print” are because they are programmicatically pulled out of the list in the code.

So now that you have copied a theme directory and renamed it to the new name of your theme. Then log into your store and in the Administrative section under “Global Settings”. There select the SEO/Display tab, and change the theme to the one that you just created.

Now you can take a look at your store, and guess what… nothing changed because the theme was just copied from one you probably already had selected. The good news, now you can edit the CSS files to change the look of your store.

What about images and swf files??? You can toss them into a sub-directory like “images” into that same newly created theme directory. Then just reference them with a relative path like the existing base CSS code does.

What about the HTML, I want to change the markup to get the exact theme I want!!! Well this can get very tricky if you do not have a background in .Net. To get you started keep this in mind… if you pick a random page you want to change, lets say “contactus.aspx”. If you open up that file you will only see a small amount of code, obviously not the code that displays the page. You will need to take a look at the module being referenced in that file. In this case nopCommerce:ContactUs is the module being referenced in the file. To find that file go to the directory

[root]/NopCommerceStore/Modules

there you can find ContactUs.ascx, take special note of the extension .ASCX. This is called a control and 9 times out of 10 you can find what you are looking for here. You can change these files to alter the markup, but heed my warning… back up any file you change. It is very easy to break stuff in here and with out a working knowledge of .Net there are plenty of places to make mistakes.

So in review, you can alter the markup. However, back the file up before you change it and only edit .ASPX and .ASCX files. Changing these files will not case a need to recompile the code so you should be good to go. Anything else will require you recompile the code to see any changes you made.

I hope this helps you designers and serve in some what as a getting started tutorial for new graphic artists wanting to work with nopCommerce. By all means feel free to ask any questions and if you get overwhelmed D3 Systems is always here to help you out with your experienced staff.

Take a look at a couple of Themes we have created.

Example of a Theme We Created

Example of a Theme We Created