Making a design work in osCommerce

I thought it might be interesting for you guys to see how I make an osCommerce site. What I do is pretty simple and I do this for every site I built since 2000…

Step 1 is to sketch out my design on a piece of paper – here’s a REAL example:

Sorry about the quality – I don’t have a scanner so I had to take a snap with digital camera! Anyway, I’m sure you get the idea, but if not here’s the same thing in Photoshop:

Basically, what I want is 4 (yes, four) rows in the header:

• Row 1 will contain the breadcrumb and the checkout, basket links
• Row 2 will contain the shop logo
• Row 3 will contain category links (style to look like buttons)
• Row 4 will contain a search box and a summary of the shopping cart

Underneath these 4 rows, I want 2 columns:

• 1 “thin” column for the left hand side
• 1 “fat” column for the content of my site

I hope all this makes sense?

Step 2 is to decide upon the colour scheme. To do this I visit the Online Color Schemer – for this particular site I am using a dark blue and a pale yellow. Blue and yellow usually complement each other quite well.

Step 3 is to create the “thin” column using real osCommerce coding. In this example, I need to move a couple of infoboxes from the sidebars into the header. So I can remove the categories box, the search box and the shopping cart box. As I only use the english language, I can remove the languages box – and I can remove the currencies box as I only use UK Pounds. In addition, I don’t use the manufacturers functionality so I can remove the manufacturers dropdown box and the manufacturers information box.

Step 4 is to reduce the number of new products to 3 – easily done in the Admin section. And add in a way to feature 1 particular product – very simple to do using my own “Featured Product” contribution.

Step 5 is to code up the header area. A simple table of 4 rows is required, each with 2 columns. This is easy – if you don’t know how to code a table have a look at www.w3schools.com – a great online resource for all things HTML. I then insert the relevant infoboxes that I removed from the “thin” column into the right areas. At the same time, I make sure that my new table has stylesheet classes so that I can give it a pretty look…

Step 6 is to remove the right hand column from all my osCommerce pages – takes me 2 minutes to whizz through the 30 or so files to achieve this.

Step 7 is to amend my stylesheet to use “blue” and “yellow” colours, as this is the colour scheme that I decided I would like to use.

And here is what I ended up with, after about 1 hours work:

I understand that this post is not a full on tutorial about how to make code changes to exactly make things happen – I just wanted to bring you an overview of how I do things when I am making an osCommerce shop.

You can see in the screenshot that I have made further changes – I placed the language flags into the header area and swapped about the content of the page. I also swapped the images and text so that everything is “side by side” rather than underneath the image:

In a usual osCommerce set-up the text link is below the image – I think it looks better by the side 🙂