Uses of non-default themes

Magento’s flexibility in themes gives a lot of scope for possible uses of non-default themes. Along with the ability to have seasonal themes on our Magento store, non-default themes have a range of uses:

• A/B testing
• Easily rolled-back themes
• Changing the look and feel of specific pages, such as for a particular product within your store
• Creating brand-specific stores within your store, distinguishing your store’s products further, if you sell a variety of the same products from different brands

A/B testing

A/B testing allows you to compare two different aspects of your store. You can test different designs on different weeks, and can then compare which design attracted more sales. Magento’s support for non-default themes allows you to do this relatively easily.

Bear in mind that the results of such a test may not represent what actually drives your customers to buy your store’s products for a number of reasons. True A/B testing on websites is performed by presenting the different designs to your visitors at random. However, performing it this way may give you an insight in to what your customers prefer.

Easily rolled-back themes

If you want to make changes to your store’s existing theme, then you can make use of a non-default theme to overwrite certain aspects of your store’s look and feel, without editing your original theme.

This means that if your customers don’t like a change, or a change causes problems in a particular browser, then you can simply roll-back the changes, by changing your store’s settings to display the original theme.

Non-default themes

A default theme is the default look and feel to your Magento store. That is, if no other styling or presentational logic is specified, then the default theme is the one that your store’s visitors will see. Magento’s default theme looks similar to the following screenshot:

Non-default themes are very similar to the default themes in Magento. Like default themes, Magento’s non-default themes can consist of one or more of the following elements:

• Skins—images and CSS
• Templates—the logic that inserts each block’s content or feature (for example, the shopping cart) in to the page
• Layout—XML files that define where content is displayed
• Locale—translations of your store

The major difference between a default and a non-default theme in Magento is that a default theme must have all of the layout and template files required for Magento to run. On the other hand, a non-default theme does not need all of these to function, as it relies on your store’s default theme, to some extent.

Locales in Magento: Many themes are already partially or fully translated into a huge variety of languages. Locales can be downloaded from the Magento Commerce website at http://www.magentocommerce.com/langs.

Magento theme hierarchy

In its current releases, Magento supports two themes: a default theme, and a non-default theme. The non-default theme takes priority when Magento is deciding what it needs to display. Any elements not found in the non-default theme are then found in the default theme specified.

Future versions of Magento should allow more than one default theme to be used at a time, as well as allow more detailed control over the hierarchy of themes in your store.

Magento theme directory structure

Every theme in Magento must maintain the same directory structure for its files. The skin, templates, and layout are stored in their own directories.

Templates

Templates are located in the app/design/frontend/interface/theme/template directory of your Magento store’s installation, where interface is your store’s interface (or package) name (usually default), and theme is the name of your theme (for example, cheese).

Templates are further organized in subdirectories by module. So, templates related to the catalog module are stored in app/design/frontend/interface/theme/template/catalog directory, whereas templates for the checkout module are stored in app/design/frontend/interface/theme/template/checkout directory.

Layout

Layout files are stored in app/design/frontend/interface/theme/layout. The name of each layout file refers to a particular module. For example, catalog.xml contains layout information for the catalog module, whereas checkout.xml contains layout information for the checkout module.