You are here: Home » Installation » osCommerce 3 Templates

osCommerce 3 template installation

The following will explain how to install one of the osCommerce 3 templates (a.k.a. layouts, themes) 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 layouts, start with the osCommerce template information page.

Step 0. Back up everything.

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 freeoscommerce template, you need to first install osCommerce (version 3). If you're running an older shop like 2.2, you need to either upgrade to version 3 (the official website has instructions for upgrading your osC installation) or consider using on osCommerce 2.2 template instead.

For osCommerce installation instructions, go here.

Step 2. Download and unzip your free osCommerce template.

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

Step 3. Upload the layout to your web server.

With your FTP program, upload everything in the 'upload' folder to the same directory as your store

Template files:

The upload folder contains files in the following folders (where ### is the template number):

includes/languages/en_US/images/buttons/
includes/modules/boxes/
admin/includes/templates/
templates/
templates/freeoscommerce_###/

In the upload process, your website's buttons will be overwritten in order to update the appearance of the site to match the freeoscommerce template. If you ever decide to switch back to the original template, upload everything in the restore folder to your root osC directory (this will put back the old buttons).

Step 4. Activate the template.

Once you've successfully 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 Templates from the drop-down menu under the Templates heading.

You should see freeoscommerce_### (where ### is the template number) in the list of available templates. Click the green install button next to freeoscommerce. Return to the main templates page, click the edit button next to the freeoscommerce, check the box to make it the default template, then click 'save'.

Step 5. Configure your store boxes to match your template.

At this point, your website makeover is complete -- your website should have a brand-new look when you open it now. The last thing to do is set up your osCommerce boxes to your liking. A box is a little widget that displays a little piece of content in your site's columns -- shopping cart, featured items, tell-a-friend, search, categories, etc are all boxes.

The default installation features both a left and right column -- in the admin you can choose which column and in what order the boxes appear in. Some layouts have only a left column, others have a right column, while some have two columns. If the layout you chose has only a left or right column, you'll want to set all of the boxes you want to appear on your site to this column (or they won't appear on the site).

To manage your boxes, from the drop down box under the main Templates heading, select Templates Modules Layout -> Boxes from the drop down menu. You'll see a list of all of the boxes, with 'left' or 'right' under the 'Group' heading -- click the edit button next to each box and choose what column/order you want it to appear in.

Step 6. Set up your footer and header links.

Your template is set up with page 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 page links or the footer, you'll need to open the freeoscommerce template file named freeoscommerce_###.php (located in the 'templates' directory of your osC installation, where ### is the template number).

To modify the page links in the header:

In the freeoscommerce.php 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, create links inside of <span></span> tags, like this:

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

Having the span tags will space the links nicely on the page -- you can modify this any way you like with the 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">Design and Integration by <a style="color: #0033CC" href="http://www.freeoscommerce.com/" target="_blank">freeoscommerce.com</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 7. Enjoy your new osCommerce 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.