Changing the theme in osCommerce

Default osCommerce 2.3.3 theme

Once you have the osCommerce Theme Switcher configured and you have the jQuery version updated, you can proceed with installing themes to your osCommerce site. The default theme is shown in the snapshot to the right. OsCommerce is different from other ecommerce software in that you use the jQuery Theme Roller theme builder from jQuery. Below is the instructions on how to install a theme in osCommerce.

The jQuery Theme Roller

To get a theme for your osCommerce, you will need to go to The jQuery Theme Roller site and either create your own theme or download one form the gallery. In this tutorial we will download the “Sunny” theme from the Theme Roller site.

  1. Go to the following url:

    https://jqueryui.com/themeroller/.

  2. Click the gallery link jquery theme rollor osCommerce 2.3.3

    In the Theme Roller control box, click the Gallery tab.

  3. Download link for theme roller osCommerce 2.3.3

    Find the “Sunny” theme and click the “Download” link.

  4. Download the theme from theme roller osCommerce 2.3.3

    On the “Download Builder” page, Select 1.10.2 and click the Download link at the bottom of the page.
    You should have a .zip file named jquery-ui-1.10.2.custom.zip saved on your computer.

  5. Find the css file osCommerce 2.3.3

    Extract the .zip file on your computer. Navigate to the development-bundle/themes/sunny/ directory in the extracted jquery-ui-1.10.2.custom folder.

    Rename the following file:

    jquery-ui.css.


    Rename to:

    rename the css file osCommerce 2.3.3

    jquery-ui-1.10.2.css.


Upload the theme to your server

The next step in getting the theme on your server is to upload the theme to your server. Find the “sunny” folder in the following location in the extracted file on your computer.

development-bundle/themes/sunny

Upload the theme to the following directory on your server in your osCommerce install directory:

/ext/jquery/ui

Changing the osCommerce theme

  1. Log into your osCommerce Admin dashboard.
  2. Go to header tags osCommerce 2.3.3

    Go to Modules > Header Tags.

  3. Slect the theme switcher osCommerce 2.3.3

    Select the Theme Switcher Module.

  4. Edit the theme osCommerce 2.3.3

    Click Edit.

  5. Select the theme from the theme box osCommerce 2.3.3

    In the Theme box, you will see the “Sunny” theme in the list. Select the Theme.

  6. Save the theme selection osCommerce 2.3.3

    Click Save.

    Final Sunny theme osCommerce 2.3.3

    Now when you visit your osCommerce site you will see the Sunny theme load.

Was this article helpful? Join the conversation!