Helpful Tips for Creating Themes in nopCommerce

So after creating a ton of themes with nopCommerce using all sorts of different nopCommerce version there are a couple of pitfalls that every designer should look out for before building a theme for nopCommerce. None of these are wildly complicated, but they can really save you a head ache.

Upgrading nopCommerce can break your Theme!

Unforunately I have seen the HTML markup structure change a ton from version 1.4 to the current version of 1.9. If you are working on a team, building a theme for a client, or maybe you aren’t sure of the future of your store keep this in mind. If you upgrade the nopCommerce framework, there is a very good chance that your CSS will no longer match the store’s current DIV structure. So before you update nopCommerce, build a test site, apply your theme, and make sure it looks ok. Otherwise you will have a very nasty and time sensative problem on your hands.

HTML Complexity

If you are a designer mocking up a site for a client, take a look at the HTML structure before you toss up your site mock up and show the client this amazing site they could have. If your design requires changes to the HTML structure, this can be very tricky. nopCommerce is a mature ASP.Net project built with 100’s of modules, that represent small sections of HTML. If you are not comfortable editing these .aspx and .ascx pages then you need to stick with the basic HTML layout.

One other thing to note, if you change the .aspx and .ascx file you do not need to recompile. You can just change them on the fly and refresh the page. However keep backups of the pages, because if you create an run time error on that page and you are not a programmer it can be hard to figure out exactly what you did… worst case just email me! ryan@d3-systems.com

JQuery and Other Neat Stuff

If you want to add some cool JQuery Libraries, or other nifty plug-ins then you are going to need to have some idea of the structure of the ASP.Net project. There is a lot of programming logic behind when javascript libraries are loaded with nopCommerce. Part of the reason for the great performance is nopCommerce only loads the stuff they need. So if you want to add something, be prepared to alter some of those header files that manage the includes of those libraries.

Another thing to keep in mind is not to be sloppy. The newer version of nopCommerce are starting to take advantage of ajax, for example with nopCommerce 1.9 the single page check out and some changes to the administrative section. So I just want to give a word of warning to all you script bunnies out there installing javascript libraries all over the place.

Simple Development Package

I’m working on creating a zip file to allow all you dreamweaver designer types to download a package that will allow you to create nopCommerce themes locally on your hard drive. Once completed it will also include simple instructions on how to install the theme in your nopCommerce store. I’ll also toss in a cheat theme so you can have a solid starting foundation to create you theme. I’m in works of creating this so please email me if you want to know more about it. Please also include the version of nopCommerce you wish the package to support. ryan@d3-systems.com