You are here: Home » Installation » osCommerce 2.2 Templates

osCommerce 2.2 Template Installation

The following will explain how to install one of the osCommerce 2.2 templates (also known as themes, layouts or skins) available on this website.

If you aren't familiar with osCommerce, you should start with the osCommerce information page. If you want to learn more about templates, start with the template information page.

Step 0. Back up everything

The osCommerce 2.2 STS templates themselves do not require you to over-write any files, however:

Before ever modifying your osCommerce installation (or anything else for that matter), back up everything on the server and in the database! Again, back everything up!

Step 1. Install osCommerce

Before you install a free template, you need to first install osCommerce (version 2.2). If you're running an osCommerce 3 shop (the newer version), you need to either downgrade or consider downloading one of the many version 3 osCommerce templates available here.

For osCommerce installation instructions, go here.

Step 2. Install the STS (Simple Template System) module

All of the osCommerce 2.2 templates on this site require the STS (Simple Template System) module.  Here's why.

osCommerce 2.2 doesn't come (by default) with a way to easily manage templates.  If you want to change the look of your osCommerce 2.2 website, you pretty much have to edit every individual page (of which there are many).  The best solution to the 2.2 template problem is the free STS (or Simple Template System) module.  STS was developed to allow you to control the look and function of your osCommerce 2.2 website by editing just one file.  It's an elegant solution that integrates well with most shops, even modified ones, and is compatible with a wide range of other modules. It takes only a few edits to install STS to a modified osCommerce shop.  If you're setting up a new osCommerce store you can install STS in less than five minutes.

If you don't already have STS installed on your system, visit the official STS page to download it.  Install it according to the official STS Installation documentation.

Step 3. Download and unzip your freeoscommerce template

If you haven't already, browse the many osCommerce 2.2 layouts available on this website and choose the one that you like best. Unzip the file to a folder on your hard drive.

Step 4. Upload the template files to your web server

Via FTP, upload everything in the 'upload' folder to the same directory as your store.

Template files:

The upload folder contains the following (### = template number):

includes/sts_templates/freeoscommerce_###/freeoscommerce_###.html (template)
includes/sts_templates/freeoscommerce_###/freeoscommerce_stylesheet.html (stylesheet)
includes/sts_templates/freeoscommerce_###/boxes/ (templates for the sidebar boxes)
includes/sts_templates/freeoscommerce_###/images/ (template images, buttons and other images)

Important note: If you have changed the name of your sts_templates folder, you must manually upload the contents of includes/sts_templates to the appropriate directory (or change the STS template back to sts_templates in the STS admin).  If you're using a default STS installation you should be fine.

No files will be over-written with this installation.

Step 5. Activate the template (Configure STS)

Once you've successfully installed STS and uploaded everything in the 'upload' folder to your web server, it's time to actually activate the template. To do this, log in to your osCommerce online store, select Modules --> STS in the admin menu.  Select the Default module, then click the edit button.

Update the following configuration values (where ### is replaced by the template number -- for example, for template number 004, freeoscommerce_###.html will be freeoscommerce_004.html).

5a. Set Use Templates? to true.
5b. Set Template folder to freeoscommerce_###
5c. Set Default template file to freeoscommerce_###.html
5d. Set Use template for infoboxes to true.
5e. Click the update button to finish

Your template should now be fully functional.  If it's still not working, check to make sure the files were uploaded to the correct folders (important if you've changed your sts_templates folder name) and double-check configuration values.

Step 6. Fix checkout_confirmation.php (if necessary)

Some stores using STS experience a page break on the checkout_confirmation.php page of the checkout process due to the placement of a small block of php code. This is a simple fix that requires only one change.

To fix this, open checkout_confirmation.php and find this code at around line 111:

and replace it with this (which moves the php code above the table code):

Save the file and upload it to your server, replacing the old checkout_confirmation.php file.

Alternatively, if you have a new installation of osCommerce (with an unmodified checkout_confirmation.php) file, you can use the replacement file that comes in the 'checkout fix' folder of your template package.

Step 7. Set up your footer and header menu links

Your freeoscommerce template is set up with menu links (or room for a brief description of the site or anything else you want to put there) at the top of the page, and a footer at the bottom of the page for links, copyright information and/or anything else.

To modify the menu links or the footer, you'll need to open the template file named freeoscommerce_###.html (located in the 'upload/includes/sts_templates/freeoscommerce_###/' directory of your template package), where ### is the number of your template.

To modify the links in the header:

In the freeoscommerce_###.html template file, you'll find a section that looks like the following (where the Links have actual html and/or php code):

<div id="top_menu_links">
<span>Link 1</span>
<span>Link 2</span>
<span>Link 3</span>
<span>Link 4</span>
</div>

If you want to just put some text in place of links, remove everything between the two div tags and place your text there. If you want to put page links, just add links inside <span></span> tags, like this:

<span><a href="mylink.php">My Link</a></span>

The span tags will allow the CSS to space the links correctly on the page -- you can modify this any way you like by editing the freeoscommerce CSS file.

To modify the footer:

Find the following (or something similar) in the freeoscommerce.php template file:

<div id="footer"> This is the footer.<br/><br/> <span style="color: #0033CC"><a style="color: #0033CC" href="http://www.freeoscommerce.com/" target="_blank">Free osCommerce Templates</a></span></div>

You can put anything between the footer div you want, from copyright information to links to images. If you really must remove the freeoscommerce link you can do that, though it would certainly be nice to give a little credit to this site. It's up to you, though.

Step 8. Enjoy your new osCommerce 2.2 layout

That's it -- if you've uploaded and activated your template and set your box preferences, your new store is ready to go! Don't forget to tell your friend to stop by for a osC 2.2 template or osC 3 template.