Introduction

This is first of the series of articles/tutorials that I plan to write about re-skinning an Ablecommerce store. Once you have gone through this tutorial series you should be able to

• Convert a design to an Ablecommerce store template
• Know what are the good practices for re-skinning an Ablecommerce template
• Understand step by step procedures for doing the re-skinning

The first thing you need to have, before skinning any web-site, is a visual design of the site created for you by a graphics designer. If you know a bit of photoshop, you can probably do it yourself. The design (also called mockup or template) is the starting point and the it is what you will eventaully want your Ablecommerce store to look like. So lets start here with a new mockup for a furniture store.

The end result will be an Ablecommerce store looking like the above. 

Re-Skinning – What is required

• A design template to start with. As mentioned earlier the first thing you requie is a design template. You can create a design template yourself or you can mobile casino get professional help of a graphics designer.
• Ablecommerce7.0 installed
• Adobe Photoshop or your favorite photo editing software
• FireFox3 with FireBug add-on installed
• If you have VisualStudio 2005/08 or Macromedia Dreamweaver its a plus. If you don”t have these tools you can use any good file editor that supports syntax highlighting for css files 

Getting Started

To get started, we need to first create a new theme in Ablecommerce. Here are the steps you can follow to create a new theme for Furniture Store.

• Go to App_Themes folder of your Ablecommerce installation. You will see a number of themes listed there. Each theme has its own folder.
• Create a copy of an existing theme folder and rename it to “Furniture Store”. If there is an existing theme you already know that looks like your new design template you make a copy of that theme. In our case, none of the existing themes is similar to our new design so we are just creating a copy of “Glass_Olive” theme.
• Go to your Ablecommerce merchant admin console and in Website -> Themes And Display Pages section, chose “Furniture Store” as default theme for your store.

If you visit your store now you will see that the store looks like the “Glass_Olive” theme. In the next article(s) I will explain how we can change the theme in a step by step manner to make it look exactly like our new design template for furniture store. Stay tuned.