nopCommerce Tips: Creating a Custom Layout, Part 4 – Adapting Skins

Read Part 3 here!
It’s safe to say that for every target demographic, there’s a unique approach that will best achieve your goal of reaching them. Whether it’s using a color scheme or graphics, or a layout that shows your product line off to its best advantage, there is no one storefront that will appeal to all demographics. It’s a given that you’ll want to customize your nopCommerce store’s appearance to appeal to your customers – let’s touch on ways to modify an existing skin for that purpose.

nopCommerce ships with two web themes: DarkOrange, and nopClassic, under Nop.Web/Themes.

nopCommerce Themes Location

You may choose to start from one of these themes, one of the free themes available from the nopCommerce community, or a commercial theme, such as one of the themes from third-party commercial providers such as Nop-Templates.  For the project I’ve been working on, I chose to work with the ShopAll theme from Nop-Templates (disclosure: Nop-Templates provided me with this template to evaluate for my client projects). The layout for the ShopAll theme is very similar to the design I created for my client, so it seemed a logical starting point.
Let’s review the “before” (ShopAll theme) and “after” (custom design):

One of the best things to get acquainted with is this list of all nopCommerce widget zones; this will give you a better idea of what widget zones (places where widgets can be deployed) are available, and which files they’re located in.
It’s really helpful to have your custom design already available for comparison; there are a number of great tools available for creating designs and HTML templates. I use a combination of PhotoShop for layout, and Artisteer to create the HTML template. The latest version of Artisteer (currently in beta) includes an SDK to allow users to create templates for specific CMS & e-commerce applications; I’m sure that someone will come up with an export plugin for nopCommerce, but for now, it’s easier to just leverage the HTML export.
There’s no one best way for adapting an existing skin for a custom design; I start out with the nopCommerce theme, my chosen color palette, and Firebug, and select the parts I want to modify, starting with the background and main text colors. Depending on how much modification is required, you may find it helpful to open up the various views to modify your layout – this is one of the times our widget zone list comes in handy.
I cannot stress enough how helpful Firebug is in this process; you can see in the image below how Firebug will allow you to select an element in your page, then show you the corresponding CSS. You can make adjustments in the CSS in real-time, decide what works best, and then copy your new CSS to place in the appropriate stylesheet (conveniently linked in the Firebug CSS panel).
It can be a tedious process; there’s only so much select/replace you can do, without changing elements you didn’t intend to. Go carefully, selecting each feature as you’re ready to change your existing template to your new design.  Most of your changes will be in the styles.css, but you may also need to make changes in your views. Don’t change the default views; instead, create corresponding folders and file in your skin in order to create your custom views.
Each widget/plugin has its own CSS; it’s best to get your initial skin set up the way you want it, then modify your plugins as you choose to use them. We’ll cover editing widget themes next time.


Looking for quality nopCommerce Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Carole Bennett

Carole Bennett is the founder and principal of IndigoTea. As a professional IT consultant, Carole has provided solutions for companies as diverse as Verizon, Frito-Lay, Capital One Auto Finance, and Zales Jewelers, parlaying a unique talent for acting as a translator between the worlds of business challenges and technology solutions. She considers multi-tasking skills gained from simultaneously 1) managing a fire performance troupe, 2) raising a family, and 3) working as a full-time IT consultant excellent preparation for her current career incarnation as the driving force behind IndigoTea. "Fire-breathing redhead on a mission" is not just a metaphorical description!

2 Comments on nopCommerce Tips: Creating a Custom Layout, Part 4 – Adapting Skins

  1. Chris says:

    If you modify a existing theme and create a new theme can you sell it as your own?

Leave a Reply to Chris Cancel reply

Your email address will not be published. Required fields are marked *