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).

It’s been several days now since the new osCommerce store was launched and I’m beginning to get into some serious SEO work for the site. Whilst Pay Per Click campaigning brought serious amounts of traffic to the site initially, I’ve now knocked this on the head for the time being because of relatively low conversion rates, whilst I seek out keywords that are likely to be less well covered by the competition.

Spiders from Google, MSN and Yahoo, amongst others, are now visiting the site regularly, so it’s all about trying to get the best out of those visits at the moment. It was a bit of a surprise then, when I stumbled upon a major issue over the weekend.

When checking the cached pages in each of these engines, by simply searching for it by domain name, I found that each of them had experienced a fatal error whilst trying to spider site. Because the error occurred in the categories box – the second box in the left hand column – they had gotten little page content indexed other than “… Fatal Error: cannot instantiate non-existent class in ….blah, blah… /boxes/categories.php on line 146”. Doing a google search for this exact error, I find a number of CRE Loaded sites that have the same problem.

Of course, the site works fine in a browser, so it seems that it is only search engines that experience this error. The causes is going to be down to something concerning session cookies (search engines don’t send these) or the fact that I have caching enabled, but I didn’t have time to troubleshoot that – I just wanted to fix the problem quickly.

In CRE Loaded you have the choice of a number of different styles of categories box, so I just had to switch the existing one off and switch on another one that didn’t suffer the same problem. In order to assess this, I needed something that would show the site from a search engine spider’s perspective – in my case, I headed over to Poodle.com, which does just this.

Problem now solved as a result, so now I just have to wait for the spiders to come back again and index the site successfully (as it turned out Googlebot showed up this morning, so hopefully my cached pages will update in due course). Whether or not this is due to my subscribing to their sitemap beta project I don’t know. This is an interesting idea which they have launched recently which is touted as a way for webmasters to provide clearer instructions to Googlebot about how their site is organised. Great idea I thought, because sometimes it only finds its way to a handful of product pages – with this tool, you can tell it up front where all the interesting stuff is. Early days yet, but I will be very interested to see if this makes a difference to the depth of crawls that I see from Googlebot. If you are interested in trying it for your osCommerce store, head on over to the contributions area at the osCommerce site and search for Google – you will find a ready-made contribution there which creates the necessary XML feeds and is dead easy to install.

I have also been spending this weekend seeking out quality links to point to the new site – some paid for, some free. The aim of course being to bring up that all important pagerank. With that in mind, here are my top tips for incoming link hunting:

1. Get the Google toolbar installed on your browser. You can get a quick visual indication of the pagerank of potential sites linking in – if the pagerank on which your link would be placed is low or non-existent, you might want to think again, especially if money is involved.

2. Try and get yourself listed in dmoz.org if you can. Actually achieving this is something akin to torture and can take years, but is worth putting in place on the off-chance that your category is actually well staffed by editors. Sites listed in dmoz always seem to do well in search engine results because of the huge number of sites running their feeds.

3. Do a search for your keywords / keyphrases on a search engine. Make a note of the sites placed in the top few positions and then head over to alexa.com. Enter the urls for those well-placed sites and you can get information on sites linking in to it. If it is appropriate to do so, you can get your link put in these places too! If you come across paid inclusion directory pages appearing in the top 10 results here, you should seriously consider adding your site to them (see 5).

4. If a site requires a reciprocal link, try and collect these all together on dedicated page(s) on your site. Outgoing links count against the pagerank of page on which they appear and can lead to pagerank “leakage”, so putting them on all pages, or your frontpage can cause you pagerank problems.

5. Get yourself into at least one of the paid inclusion directories, preferably one that is specific to your country and that has decent pagerank. Not only should you get targeted visitors, but also your pagerank will be boosted. One of my favourites is allovertheuk.co.uk – they only charge £15 a year and I know of sites that had made hundreds of sales through directly referred visitors.

(Otherwise known as “Content is King”…..)

Now I’m giving my brain a rest from further development of supertracker for a few minutes, I thought it would be a good time to write a few notes regarding page content in the context of osCommerce Search Engine Optimisation (SEO).

Just this morning I was aimlessly surfing the internet and stumbled across an osCommerce shop that caught my attention. The reason was simple – the front page main content consisted simply of the standard text “Welcome Guest, would you like to log in or create an account…” and a relatively large graphic underneath. Not the first time I have seen such a thing, but a real waste of perhaps the most crucial part of a site. This site, as it turns out, must be paying top-dollar in order to be placed at the top of Google adwords results for their chosen keyword(s) – no doubt because of poor regular search engine performance. This poor front page layout does make me wonder how many of those expensive Adwords click-throughs they actually convert though.

So, I guess you get the idea behind the first point I want to make. Make good use of the main content area on your front page of your osCommerce store (index.php). It’s the first thing that most of your visitors see, so use it to introduce the store, it’s policies and why it’s a good idea to buy from you. Also, highlight any products you think will be of particular interest and any special offers you have running as a way to engage their attention quickly. More importantly, this area also gives you an opportunity to throw in more of the search keywords you want to optimise for. Don’t go completely mad with keywords though, as there is a fine balance between keyword spamming (putting in the keywords over and over, and out of context) and good keyword density.

What I try and do when working on such page content is to write something which both reads well for the customer and hits a desirable level of keyword density for the search engines. You might want to try using tools such as that at keyworddensity.com to help you with this.

Another area where people sometimes pay too little attention is that of product descriptions. Descriptions that are too short may give customers the impression that you know little about your products, or that you simply couldn’t be bothered to write something meaningful. Equally, the search engines will find little meaningful to index – rumour has it that they like keywords to be mixed in with lots of other words (i.e. like proper sentences), so in putting together well written descriptions you are putting yourself in a win-win situation.

Another good way to increase the visitors to your site is to create some meaningful content outside of the products you have for sale. Typical examples would be pages giving hints and tips, detailed reviews of products or general advice about a related subject. Also, forums or blogs can be a good way of doing this. Search engines like fresh content which is updated regularly and customers may well return often if there is always likely to be something new to read (hopefully buying something whilst they’re about it!).

Another great side effect is that if you have lots of content worth reading on your site, people will want to link their sites to your site, which helps to push up your sites page rank and bring more visitors in general.

This blog is a typical example of such a concept. Whilst I do enjoy sharing my knowledge of all thing osCommerce related with the general public when I have time, this is also a useful marketing tool. How else could I write the term “osCommerce” in so many different ways and contexts on a website? The fact is that in just writing about osCommerce, I get lots of hits from search engines from people who have typed in all sorts of specific search keyphrases relating to the use of osCommerce. No way I could ever optimise a site to target all of those, so I don’t worry about it – I just know that as I write more and more about different the different aspects of osCommerce I will get gradually more and more hits from people looking for a gradually wider range of information regarding osCommerce. What’s more, as I offer services related to osCommerce, so of them may even be tempted to offer me work :o)

The above hopefully has given you some thought about how you might improve upon your site in order to get more targeted hits from people who want to buy your products. At the end of the day, the level of success you get is largely determined by the amount of effort you put in. Good content doesn’t just write itself, you have to work hard to create it, but it really does pay off in the long run.

This has been quite a busy week thanks my new osCommerce store going properly live, as I mentioned in a previous post.

As I have access to a number of sites which are regularly spidered by search engines, I have placed text links on them in order that the search engines will see this new site and begin indexing as soon as possible. But even so, it sometimes takes a while before you see the new site appearing in search results when searching for it by domain name.

So, whilst waiting for all this to happen, I thought I’d experiment with a bit of Pay-Per-Click (PPC) advertising in order to get some traffic visiting the site. I signed up for new accounts with both Google Adwords and Miva (the new name for e-spotting). There now follows an account of my initial experiences with both:

Adwords
I have used adwords before and found it reasonably effective, but as with most such systems things have moved on and there are new subtleties to be learnt… My first problem was that, having set up my new campaign, my keywords were just generating no impressions at all, even after 48 hrs. It turned out that my account had been “flagged” for review because of some of the keywords I had chosen (nice of it to tell me!). Anyway, all kudos to google adwords support for explaining that and fixing it for me quickly when I enquired as to what was going on.

Next issue – finding keywords which will bring good, targeted hits to my site without costing the earth. Evidently the business I am running faces stiff competition because of high consumer demand and relatively high margins, but I can’t believe the way the cost per click has been driven up as result. As the amount I’m prepared to risk per day is constrained, I’m not getting many page impressions at the moment unless I push the Max Cost Per Click somewhere up around £2.00 - if conversion rates turn out to be low, this is a good way to blow loads of cash.

Still work to be done here then. I can’t afford to ignore adwords whilst the site isn’t showing up in regular google results, but I need to find those keywords which searched for quite regularly, but which aren’t being targeted by so many competitors – therefore these will work out cheaper but still bring lots of good targeted clicks.

Miva
I was quite impressed by Miva from the outset. OK, so you have to put a minimum of £50 in to start with, which was a bit of a wrench, and your account has to be reviewed before it goes live, but this all happens quite quickly. The editors even improved upon the poor copy I had written for my ads and added a graphic when I had been in too much of a hurry to do so – now this is more like it….!

Soon after my account was live, I started getting shed loads of hits to my site – cool…. Not so many conversions to sales though and my £50 was being eaten up quite quickly. Noted first disadvantage of Miva – whilst you set a bid cost per click, you can’t set a daily budget, so things can run away with you!

A quick inspection of basic referreral information in my webstats revealed that I was probably getting lots of hits from people who were looking for a different kind of site. So I removed a couple of the 10 different keywords I was using for my campaign and this started to cool things down a bit.

After leaving things to settle down a bit for a while, I checked back and found I was still getting a good level of traffic, but still very few conversions.

Now it was time to get some serious analysis going……

Supertracker Analysis of the Above
For each of my campaigns I had used a different referral URL, knowing that this would probably be useful information later on.

For adwords I used : http://www.mysite.com/index.php?ref=googlead
And for Miva I used http://www.mysite.com/index.php?ref=miva

The ref=xxx part of the URL is simply ignored by osCommerce, but it will me to determine what each PPC campaign is doing for me when I look at my supertracker stats. Note – Supertracker doesn’t do anything really clever with this yet, but I plan on making some reports that take the assessment-by-eye out of this real soon.

Supertracker is something I’ve had in development for quite a while, but it was only when faced with analysing what was going on on this new site that I completed it sufficiently to answer the questions I needed answers to.

The initial results caused me to make some immediate changes to the front page of the site and also to introduce some new deals to encourage people to buy, which has increased the number of people browsing onto products pages and adding to cart. However, I also found that I was getting a lot of referred hits through Miva from people outside the UK – not what I want :o(

If I recall correctly, you specify your targeted geographic area when you sign up for Miva, so it is surprising that I should be getting such a high percent of traffic from outside that area – looks like a another disadvantage of this system.

So, at the moment I’m stuck between a system that delivers lots of hits from people who aren’t likely to buy from me and a system that will probably deliver a higher proportion of paying customers at a price which potentially negates any profits made.

Definitely more work to do in the marketing strategy department over the coming days/weeks then, but without supertracker I would probably have wasted a lot more money trying to pin-point the problems.

Before setting off down the road of dishing out any advice on the subject of optimising an osCommerce site for the search engines, I thought it was about time I got back into the real world, i.e. running a store of my own, to check my latest theories out in practice.

Having said that, I have got a number of other people's stores to the top of page results in the major search engines already, but there's nothing like starting from square one as an experiment!

Anyways, so here's the new store: http://www.my-playtime.com (warning adult products....). Lot's more to do one here design-wise yet to make it look tidy, but it's at least passible for now (and better looking than some sites I have seen out there selling similar products).

I haven't done so much work on the copy as yet, but it is a least gratifying to find that the site is already well placed for some keywords in Yahoo. Google of course will take much more work and time to crack. I'm awaiting googlebot to pay a visit first before making any further SEO type changes, so as to get a baseline position from which to measure any improvements. When I start changing things, details will be posted here, along with the results, for your enjoyment and entertainment (no doubt there will be significant hair-pulling to report....)