Non-default Magento Themes

Exclusive offer: get 50% off this eBook here
Magento 1.3 Theme Design

Magento 1.3 Theme Design — Save 50%

Customize the appearance of your Magento e-commerce store with Magento's powerful theming engine

£14.99    £7.50
by Richard Carter | July 2009 | PHP

In this article by Richard Carter, we've made use of default themes in Magento, and we can customize our Magento store further by using non-default themes. In particular, we'll look at:

  • Setting your non-default theme to be the one that your visitors will see
  • Creating a number of simple non-default themes
  • The theme hierarchy in Magento

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 Magento Themes

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.

Magento 1.3 Theme Design Customize the appearance of your Magento e-commerce store with Magento's powerful theming engine
Published: July 2009
eBook Price: £14.99
Book Price: £24.99
See more
Select your format and quantity:

Skins

Skins are not stored in Magento's app directory like templates and layout. They're stored in the skin/frontend/interface/theme directory.

Images are typically stored in the skin/frontend/interface/theme/images directory. Depending on the CSS used within your theme, your images could be contained within another directory.

CSS files are located in the skin/frontend/interface/theme/css directory, which typically includes your theme's print stylesheet, as well as stylesheets for your store's look and feel. Theme-specific JavaScript files are located in the skin/frontend/interface/theme/js directory.

While the locations of these files can be altered in your theme's layout files, maintaining this structure will make your theme easier to use for other Magento theme designers familiar with other themes structured like this one.

If you don't use this structure in your theme, then Magento may not be able to find the elements that it is looking for, so your theme may not work as you expect!

Remember that there's a difference between an interface and a theme in Magento. When we talk about themes, remember that a theme is a part of an interface (also known as a package).

Assigning your non-default theme

In order to be able to see the changes that the non-default theme will make to our store, we need to change the themes in Magento's administration panel. Log in to your Magento store's administration panel, and select the System tab in the navigation:

Non-default Magento Themes

From here, select the Design tab under the Configuration option in the drop-down menu. Change the current configuration scope to whichever scope you want the changes to apply to. We'll use the Default Config scope:

For our first non-default theme example, we're just changing the header image, which comes under Skin (Images/CSS). If the Christmas theme also changes the default theme's layout, then we would need to change the value of the Layout option to Christmas here too. Once you've saved the changes, the relevant elements of your non-default theme will be displayed.

Restrictions with assigning themes

This doesn't mean that you can't have more than one non-default theme stored on your Magento store—it simply means that you can only display one of these seasonal themes at a time. Future versions of Magento will have greater support for multiple themes.

Creating non-default themes

Unlike default themes, you don't need to create a copy of your default theme's files—you only have to change the files that you want to change.

Skin changes

If we wanted to change your Magento store's header image to tie in with Christmas, then you could create a non-default theme, which includes only one file, that is, the header image. Currently, the Cheesy Cheese Store's header looks like this:

Non-default Magento Themes

As we want to keep the proportions of the store's design the same in the default and non-default themes, our new header image's proportions need to be kept the same. We also need to consider the legibility of the content which appears above this image, such as the options for your store's visitors to log in and manage their account.

Our new header image is themed to fit with the remainder of the web site, while giving a fresh look for the Christmas period.

Non-default Magento Themes

After uploading the new header image in the relevant directory—skin/frontend/default/christmas/images/, we can see our new header image in our store's design:

Non-default Magento Themes

No changes: If you can't see any changes, check that you have turned the system cache off, and make sure you've set the non-default theme to be used in Magento's administration panel!

This technique can be used for a huge variety of events throughout the year, including religious holidays, conferences, and events relevant to your store's audience. By taking the effort to update your Magento store for seasonal events, you can show your customers that your store is up-to-date and well-maintained, helping to reinforce the image of reliability in their eyes.

Template changes

To coincide with Christmas, we could create a Christmas-themed callout banner, advertising a special offer on shipping before a particular date. In the default Magento theme, one of the callouts was located beneath the cart, and product comparison features were in the right-hand column of the store:

Non-default Magento Themes

Clearly, this callout banner isn't suitable for our store. BACK TO SCHOOL discounts on cheese are unnecessary!

We previously hid the callouts. Therefore, to display them again, we need to edit the catalog.xml file in the app/design/default/blank/layout directory. The callout is referenced in the following XML:

<reference name="right">
<block type="core/template" before="cart_sidebar"
name="catalog.compare.sidebar"
template="catalog/product/compare/sidebar.phtml"/>
<!--
<block type="core/template" name="right.permanent.callout"
template="callouts/right_col.phtml"/>
-->
</reference>

By un-commenting this, we tell Magento that we want to display the callout graphic in our store's right-hand column again:

<reference name="right">
<block type="core/template" before="cart_sidebar"
name="catalog.compare.sidebar"
template="catalog/product/compare/sidebar.phtml"/>
<block type="core/template" name="right.permanent.callout"
template="callouts/right_col.phtml"/>
</reference>

Once we've saved this change and uploaded the catalog.xml layout file to our store, the callout graphic is displayed once again on the page. There are two ways in which we can change the callout graphic to suit our needs now:

  1. By editing the callout image itself. This is stored at skin/default/default/images/media/col_right_callout.jpg.
  2. By using the non-default theme we've created, "Christmas", to overwrite the callout image.

We'll use the non-default theme to display the callout image that we want on our store, without disturbing the default theme's images and code. This way, it is truly a 'seasonal' theme that can easily be replaced once the Christmas period is over.

We will need to upload our new callout graphic to the skin/default/christmas/images/media directory, where christmas is the name of our non-default theme. We'll call the graphic itself col_right_christmas.jpg.

Non-default Magento Themes

Callout graphic dimensions: If your theme is based upon the blank Magento theme available through Magento Connect (as the Cheesy Cheese Store's theme is), the maximum width for the callout graphics is 195 pixels.

Now, we need to create the template file that uses the right-hand column callout graphic in our non-default theme. We can do this by copying the equivalent file in Magento's default theme, app/design/frontend/default/default/template/callouts/right_col.phtml, in to the same location within our non-default theme app/design/frontend/default/christmas/template/callouts/right_col.phtml.

You'll need to create a directory called "christmas" and its sub directories here.

The code currently looks like this (the code of interest to us is highlighted):

<?php
/**
* Magento
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL
3.0)
* that is bundled with this package in the file LICENSE_AFL.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@magentocommerce.com so we can send you a copy
immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade Magento to
newer
* versions in the future. If you wish to customize Magento for your
* needs please refer to http://www.magentocommerce.com for more
information.
*
* @category design_default
* @package Mage
* @copyright Copyright (c) 2008 Irubin Consulting Inc. DBA Varien
(http://www.varien.com)
* @license http://opensource.org/licenses/afl-3.0.php Academic
Free License (AFL 3.0)
*/
?>
<div class="box">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php echo $this->
getSkinUrl('images/media/col_right_callout.jpg') ?>"
width="195"
alt="<?php echo __('Keep your eyes open for our special Back to
School items and save A LOT!') ?>" style="display:block;" />
</div>

Note that the comments displayed at the top of this file are contained within <?php> tags, which mean that the comments are not inserted in to our store's XHTML.

We need to change two values in the code of our new callout banner. They are the location of the callout graphic that we want to use, and the alt attribute of the image.

<div class="box">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php echo
$this->getSkinUrl('images/media/col_right_callout.jpg') ?>"
width="195"
alt="<?php echo __('Keep your eyes open for our special Back to
School items and save A LOT!') ?>" style="display:block;" />
</div>

In our new col_right.phtml file in the app/design/frontend/default/christmas/template/callouts directory, we'll change the name of the image to be used to our new callout graphic's filename col_right_christmas.jpg. We will also change the value of the alt text to a more relevant message (For example, Christmas delivery discounts):

<div class="box">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php echo $this->getSkinUrl('images/media/col_right_christmas.jpg') ?>"
width="195" alt="<?php echo __(Christmas delivery discounts') ?>" style="display:block;" />
</div>

If you're advertising discounts on delivery, don't forget to make sure you honor the discount. All you have to do is simply configure Magento to apply the discount for you!

In your Magento store's administration panel, under Settings, Configuration, Design, you'll need to set the Skin (Images/CSS) and Templates value, under the relevant scope, (usually Default Config) to christmas:

The new callout graphic is now displayed on our store, on the righthand column:

When the callout is no longer needed, you can revert to the settings that use the non-default theme:

Summary

This article has focused on creating and using non-default themes with our Magento store. Along with looking at some uses for non-default themes, and the hierarchy of themes within Magento, we've looked at:

  • How default and non-default themes affect your store.
  • Changing your store's header image with a non-default theme.
  • Changing your store's template files with a non-default theme.
  • Setting a non-default theme to display to your visitors.
Magento 1.3 Theme Design Customize the appearance of your Magento e-commerce store with Magento's powerful theming engine
Published: July 2009
eBook Price: £14.99
Book Price: £24.99
See more
Select your format and quantity:

About the Author :


Richard Carter

Richard Carter is a web designer and frontend web developer based in Newcastle upon Tyne in the North-east of England.

His experience includes many open source e-commerce and content management systems, including Magento, MediaWiki, WordPress, and Drupal. He has worked with clients including the University of Edinburgh, University College Dublin, Directgov, NHS Choices, and BusinessLink.gov.uk.

He is a creative director at Peacock Carter Ltd (peacockcarter.co.uk), a web design and development agency based in the Northeast of England. He graduated from the University of Durham in Software Engineering. He blogs at earlgreyandbattenburg.co.uk and tweets as @RichardCarter.

Magento 1.8 Theme Development is Richard's seventh book. He has previously written MediaWiki Skins Design, Magento 1.3 Theme Design, Magento 1.4 Theme Design, Joomla! 1.5 Templates Cookbook, and The Beginner's Guide to Drupal Commerce, Magento Responsive Theme Design, and acted as a technical reviewer on MediaWiki 1.1 Beginners Guide, Inkscape 0.48 Illustrator's Cookbook, and Apress' The Definitive Guide To Drupal 7.

Books From Packt

WordPress 2.7 Complete
WordPress 2.7 Complete

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

Joomla! 1.5 Template Design
Joomla! 1.5 Template Design

Expert Cube Development with Microsoft SQL Server 2008 Analysis Services
>Expert Cube Development with Microsoft SQL Server 2008 Analysis Services

Magento: Beginner's Guide
Magento: Beginner's Guide

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Drools JBoss Rules 5.0 Developer's Guide
Drools JBoss Rules 5.0 Developer's Guide

Flex 3 with Java
Flex 3 with Java

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software