Documentation - Themes

Themes

About OpenCart Themes

• OpenCart uses MVC architecture. This means that the "V" or "view" is kept separate from the main code.
   
• The "view" is made up of the *.tpl files and are always found in: catalog/view/theme/YOUR_THEME/*.*
   
• tpl files are mostly basic html files with some php calls to display the data that you want to see.
   
• There is no template engine like "Smarty". Template engines are popular buzz words but only complicate and limit your usage. PHP by default is an embeddable language and lets you do everything you need with much less code than a template engine.
   
• references to php tags in the tpl files are based on the controllers available variables, or global class references. The syntax is simple
  In the controller put something like $this->data['variable'] = 'xyz';
  
  
  In the tpl file you would reference that with:  <?php echo $variable; ?>

OpenCart supports multiple catalog themes. There are many themes available from the contributions are as well as commercially. You can also choose to create your own theme.
 

How to Create a new Theme

There are some golden rules to follow when creating your own theme.
 

1. NEVER edit the files in the "default" theme directly. This is your base and fallback. When new upgrades are released, this folder gets overwritten with the latest code.
2. NEVER copy the entire "default" folder and just rename it. This will make upgrading much more difficult. OpenCart uses a "default theme fallback system". This means that if you are missing a file in your custom theme folder, it will search the main "default" theme folder for the file. The great benefit of this is that you only need to edit very few files to make a completely different looking theme, and when there are new versions released, your theme will fallback to the newly changed default versions which makes your theme virtually transparent during an upgrade.

1. Create a new theme folder in the catalog/view/theme path. For this example, I will use the name "silverfish"
    
2. Copy the following files from the "default" theme, into the "silverfish" folder. Be sure to keep the same directory structure:
   - catalog/view/theme/default/stylesheet/*.*
   - catalog/view/theme/default/image/*.*
   - catalog/view/theme/default/template/common/header.tpl
    
3. Edit the catalog/view/theme/silverfish/template/common/header.tpl
    
4. Find and replace all references to "default" with "silverfish" in that file. Save & Close.
    
5. From the OpenCart Admin area, Goto the main Settings section and change the theme from default to silverfish
    
6. Edit the catalog/view/theme/silverfish/stylesheet/stylesheet.css file
    
7. Make a change to the background color or whatever you like
8. Now reload the homepage. You should see the new changes.
    
9. Only copy files from the "default" folder as needed when making custom changes to the structure of those pages.

When upgrading, your theme should be untouched. Any new changes in the default template will be shown while using your template with the exception of any changes to the files that you've customized. For example, if the catalog/view/theme/default/template/common/header.tpl file was changed, then you will need to make the small adjustments to the one in your theme. But that is much easier than trying to recreate your theme.