Making a design work in osCommerce

By | April 25, 2008

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 🙂

8 thoughts on “Making a design work in osCommerce

  1. Luca

    how do we make the text to the side of the picture?

  2. Gary Post author

    Kev – thanks for the links 🙂

    Luca – here’s the “specials” infobox for you to compare against what you already have. I just used “old style” align=left for this project. Zip file – repeat the same change for all the places where an image shows…

  3. Claire

    Thanks for a great post, some really useful info. What is the coding to put a summary of the shopping cart in the header? I cannot seem to find it anywhere and have tried moving some code arond but just end up with an info box in the header (which does not look great!)

  4. Gary Post author

    Claire – right here. You might also enjoy one of the eBooks over at oscbooks.com (STS or Design), both of which show how to do this in more detail.

  5. Pingback: Club osCommerce » How do I freshen up my site?

Leave a Reply

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