The integration of web templates with osCommerce is a much debated subject, no doubt because of the relative difficulty in reworking the aesthetics of a standard osCommerce build.

The purpose of this article is provide an initial overview of what is involved in grafting a template onto an osCommerce store. It will not go into great detail – this will be left for a detailed guide, which I write in due course and make available for download (subject to available time and levels of peer pressure to complete it).

OK then, so you have seen a shiny new template at somewhere like templatemonster.com that you want on your osCommerce store tomorrow. How do you begin to make this happen? Well first, I suggest you go back to that template, which hopefully you haven’t purchased yet, and have a really good look at it. It is really important that you critically review your template before purchase, as this can save time and stress later on trying to implement a template that has difficultly bonding with the general layout of osCommerce.

Before going any further, let’s just go back and review what the out-of-the-box osCommerce layout looks like:

IMAGE TO BE INSERTED HERE LATER!!!!

So, we have a 3 column layout, with a header and a footer that bridge across them. Also, we can disable one of the columns if we so wish.

The further you drift away from the basic layout, generally, the more difficult the template integration becomes. Also, the more you should consider using one of the templating contributions, such as Basic Template Structure (BTS), or using something like CRE Loaded, which has the BTS built in. The reason I say this is because some of the overall layout definition in osCommerce is built into each and everyone of the files in the catalog folder. Therefore, if you need to significantly deviate from the standard layout, you need to edit all of those files. By using the BTS contribution (or similar), someone has already done this hard work for you.

Coming back to our new template, the things we might want to consider before purchase are as follows:

1. Do I want a fixed width, or a full-width site? If the answer is “full-width”, then you need to be careful about what template you choose. Most of the designs available today tend to be designed for a fixed-width. In order to turn this into a full-width design, the header (and sometimes the footer) is usually the main area you need to be concerned with, particularly if there is a photographic type image included in this area of the design.

In order to make the design full-width, you need to be able to insert an expandable section in the header and/or footer, which means there needs to be a section within the image that doesn’t change from left to right across the page. This could be a solid block of colour, or a vertical gradient. The header/footer can then be cut in half, and we can float these pieces to their respective sides of the page, filling in the gap using a repeating 1-pixel graphic, or a block of background colour.

2. If I’m going to go with a fixed-width site, does the area left for the main content within the design fit well with osCommerce? Sometimes this area can be quite small, which is strange really, as it will show what people actually come to your site to see! Some pages within osCommerce, can require a lot of horizontal space – exceeding that provided within a fixed-width design can lead to “breaking” the template and graphics not lining up properly. For example, if you use a 3 column layout for the “New Products” or “Featured Products” modules on the index page, and you use larger than average thumbnails, this can such problems. Another example is the shopping_cart.php page, if you have designed wider than average buttons. In summary – small content areas within the template design can lead to a lot of tweaking of various pages to make things fit properly.

3. Does the template include innovative features which are a fundamental part of the design? If so, do I know how to produce the code to make them work? A good example of this is where custom search boxes are included (search by model, filter by category, search by size/colour, etc). To make these work requires the development of some non-trivial php code. Of course, you can remove these features from the design, but sometimes you can end up asking yourself whether the template was such good value for money.

Once you have settled on your new template, it’s time to start the interesting task of integrating it with your osCommerce store.

Firstly, open the .PSD files that you will have been supplied in Photoshop and have a good look at the way they have been sliced. Also, take a look at the finished HTML files. It is tempting at this stage to simply take the HTML code and try to “blend” it with php code. There are a few problems with this approach:

1. The slicing of the graphics has usually been optimised for static page display (i.e. a page which always looks the same, not like a dynamic page which can have more/less/different content depending on what exact page has been requested by the user.

2. Infoboxes will have been individually coded in the HTML, but you need to separate this out in order to update the infobox class so that any infobox can be made to match the site.

3. It can be difficult to find the start and end points for pieces of HTML that you want to cut and paste into your php. If you get it wrong, you can end up with a bit of a mess on the screen which is difficult to fix!

4. By the same token, if you haven’t designed the HTML yourself, it is relatively unfamiliar to you, so you want to change or add something into the design, it can be very problematic to do.

Having had lots of problems with the above approach when I first started doing osCommerce Template integration, I now re-slice and build the template code from scratch every time. This can seem like it would take longer overall, but in my experience actually saves time debugging downstream.

A typical approach to a new template integration would be as follows:

1. Visualise the way in which the various elements are going to fall into the table I am going to use to reconstruct them. I almost always need a table to control at least the overall structure – I try to minimise on tables as much as possible, but have lost way too much hair trying to do things purely with CSS (it usually work properly in only one browser type and I’m not trying to win any points for technical geekiness here).

2. Build the skeleton framework for these elements in the HTML/php file – if I’m working with CRE Loaded, this would be done in the file main.tpl.php. Usually this is just a very simple table with border=1 set, so that I can check that I’ve got things laid out right. Often, you will be needing to use colspan and rowspan attributes here, so it’s worth double-checking that cells span other cells as you’d expect before moving on. I also tend to write text such as “Header”, “Left Column”, “Main Content”, “Footer”, etc in my cells at this stage, so that it’s easier to find where to cut/paste the standard BTS/osCommerce code in later.

3. Starting with the header, I cut the graphic as required and use Photoshop’s Save for Web feature to save out the pieces.

4. Assemble the pieces of the header into the basic table I created earlier. I sometimes may need another table inside that table here to keep things in their proper place, but I generally try to avoid that if I can, by using CSS to float things into position.

5. Drop the standard code for the left column into the correct cell of the skeleton table. Now I update the code and/or stylesheet in order to style the infoboxes to match the required design.

6. Once I’m happy with the infobox design, I simply drop in the code for the main content, right column and footer into the correct table cells and check that everything stills stays where it is supposed to. Also at this point, I navigate pages such as contact_us.php, shopping_cart.php, etc, to check for any mis-alignment that may creep in on different pages.

7. Now it’s simply a case of editing the stylesheet to ensure that all colours and fonts broadly match those of the template design.

This guide should have given you a very top-level overview of what’s involved with integrating a template design with osCommerce. Of course, if you are completely new to this sort of thing, you probably need a little more detail on some of those steps! I will post some more detail as time allows in coming days/weeks (faster if I get lots of requests….) and also write a complete how-to, with a worked example in the form of a downloadable guide (that’s going to take a bit longer).