Intro to Themes

A theme is a combination of files which are responsible for the visual output.

What files form the theme ?

Magento themes are split into two directories.  The files are separated into “browser accessible” (such as image and Javascripts) and those that can be hidden from it for security reasons.

  • Directory 1: app/design/frontend/default/default/ — This directory contains the layout, translation (locale) and template materials.
  • Directory 2: skin/frontend/default/default/ — This directory contains the images, CSS and block-specific Javascripts.

So a theme consists of the following files :

Layout (located in app/design/frontend/your_interface/your_theme/layout/)
These are basic XML files that define block structure for different pages.

Templates (located in app/design/frontend/your_interface/your_theme/template/)
These are PHTML files that contain (X)HTML markups and any necessary PHP tags to create logic for visual presentation.

Locale (located in app/design/frontend/your_interface/your_theme/locale/)
Theses are simple text documents organized on a per language basis that contain translations for store copy.

Skins (located in skin/frontend/your_interface/your_theme/)
These are block-specific Javascript and CSS and image files that compliment your (X)HTML.

Hierarchy of themes:

Magento has a very powerful theme concept. For instance, you can use a default theme which comes with Magento and a new one of your own side by side. That new individual theme only contains files which differ from the default theme. Thus it forms a hierarchy of themes.

For example If you simply want to move the mini cart from the left sidebar to the right sidebar you just copy the required file from “default” to your new theme directory and adjust some code. Magento first loads all files from your new theme and then falls back to the next theme lower in hierarchy (in this case “default”) and requires all missing files from that theme.

Doing so, Magento conserves the ability to be upgraded. With every upgrade,  files in your default theme are getting overwritten. The original files are protected this way.

What are Blocks ?

In Magento we work with structural blocks and content blocks. Structural blocks represent the basic structure of a page. Usually we have structural blocks like header, left sidebar, middle content, right sidebar and footer. We can assign content blocks like category list, navigation, search bar, callout etc. to a certain structural block.


Content blocks are assigned to structural blocks with the help of layout. Layout is build with XML files and can be found under app/design/frontend/default/default/layout. This way you can reuse earlier created templates, such as the mini cart module on the sidebar, on different pages by simply calling them within a layout xml file.


In this case we are adding the content block ‘cart_sidebar’ (shopping cart) to the structural block ‘left’.

Template Path Hints:

You can see info about the template that a block uses by turning on Template Path Hints. Here are the steps to turn on template path hints. Make sure you disable your cache by going to System->Cache Management.

Open admin page and go to System->Configuration. Then Select Developer on the left sidebar. Also select Main Website from the Current Config Scope Drop Down.  Next Open the debug drop down and set template hints to yes.


The result will be as follows. Each content block will be outlined and labeled with the location of template file which is used to design that block.