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:

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.

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:

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.

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 righthand column of the store:

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 righthand 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:

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.

Now, we need to create the template file that uses the righthand 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.

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 [email protected] 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="<?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>

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">
non-default theme, themeChristmas-themed callout banner, creating<img src="<?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="<?php echo $this->getSkinUrl('images/media/col_right_christmas.jpg') ?>" width="195" alt="<?php echo __(Christmas delivery discounts') ?>" style="display:block;" />
</div>

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: