Oscommerce 2.3 Design Tutorial

How to change the design of your osCommerce 2.3 shop?

The look of osCommerce 2.3 is DIV/CSS based and is fairly easy to change, it also uses jQuery UI and Grid 960 for design and structure.

- Grid960 is basically what controls the structure/layout of the webshop.
The files are located here: ext/960gs/

- jQuery UI controls the design of buttons, bars, boxes, listings ++
The files are located here: ext/jquery/ui/

Other files which you might need to change is:

1. includes/template_top.php
2. includes/template_bottom.php
3. stylesheet.css

In some cases you might find a need to edit these 2 files.

- includes/header.php
- includes/footer.php


Oscomerce Design Tips and Tricks.

Changing logo image

In the store admin under Configuration >> Store Logo you can upload your own logo.

Changing boxes, right and left columns

In the store admin under Modules >> Boxes you can control which boxes to show and if they should be shown in the right or the left column.

If you place all the wanted boxes in just 1 column, only that column will show and the site content will automatically fill the rest of the width.

Web resources:

• Forum Topic for Oscommerce 2.3 Design Basics
• jQuery UI
• 960 Grid System CSS Framework