Developer’s Toolbox: How to Create Auto-Display Holiday Themes for your eCommerce store

With the fall fast approaching, the time to think about your holiday eCommerce strategy is now. With some pre-planning, your eCommerce store can display holiday themed CSS and layout that you can prepare now and automatically display for each holiday at the end of the year. Once your create and test your holiday theme, you can set dates for each of them to take effect. This method of theme override will be using Magento’s Design Fallback Hierarchy and the “Design Change” section of the admin. I think of the Design Change section of the admin as an override of the System->Configuration->Design section (where you normally set your theme and package), and because of this, I only need to put changed files in this theme. I don’t need to copy any template or layout files that appear in my standard theme. If there is a Design Change specified, Magento will look in those files first, before reverting to the standard Design Fallback Hierarchy. So, it will look for requested files in your holiday theme, then your custom package/custom theme. If it’s not located, it will move on to the custom package/default files, then the base/default files. This hierarchy is important because it allows us to modify only the files that are necessary to create our holiday theme, and allows everything else to fall back to our standard theme.

As a reference, this is what my demo site looks like before any changes:

Developers Toolbox: How to Create Auto Display Holiday Themes for your eCommerce store

To begin, we need to create a theme for the first holiday. Let’s use Halloween. I will create my Halloween folders in both the skin and app directories. In the skin directory, I create the Halloween folder and then I will create folders for CSS and images inside of it.

Developers Toolbox: How to Create Auto Display Holiday Themes for your eCommerce store

In the app directory, I create my Halloween folder inside of the Enterprise package (you can put this file inside of whatever package you are using for your default theme). I then create folders for layout and template inside of it.

Developers Toolbox: How to Create Auto Display Holiday Themes for your eCommerce store

In the CSS folder, I will create a file called “styles.css.” In order to make sure that the other styles of my theme are included in my Halloween design, I will call an import at the top of the CSS file that will include all of my original styles from my standard theme. By putting my holiday styles under the import, I am overriding any existing styles with holiday styles.
Make sure that your import is a relative path to your theme’s styles.css file. In my case, the my holiday css sheet is as follows:

[code]
@import url("../../groove/css/styles.css");
.wrapper{background:orange;}
.main{background-color: transparent;}
#nav{background: none;}
#nav a.level-top{background:none;border:none;}
.header-panel{background:black;color:white;}
[/code]

I am importing all of the styles from my default theme, and then adding some simple Halloween styles after it. We will test this CSS by adding a Design Update in the Magento admin. From your Magento Admin Dashboard, navigate to System->Design and click the “Add Design Change” button at the top right.

Developers Toolbox: How to Create Auto Display Holiday Themes for your eCommerce store

From the “Custom Design” dropdown, choose the theme that you want to test and select today’s date to enable the Design change.

Developers Toolbox: How to Create Auto Display Holiday Themes for your eCommerce store

Upon refresh, I will now see my Halloween styles. Notice that all of the existing styles from my default theme are still in effect, and I am simply overriding the styles that I want to update for this holiday.

Developers Toolbox: How to Create Auto Display Holiday Themes for your eCommerce store

At this point, I want to add a Halloween logo for my demo store. Since I am calling my logo from the admin, I need to make sure that the Halloween logo has the same name as the logo for my standard theme. Because of the design change, Magento will look in the Halloween images folder first, so by adding a new logo there, we can override our usual logo. With a page refresh, you should see your updated logo:

Developers Toolbox: How to Create Auto Display Holiday Themes for your eCommerce store

If we need to make layout updates to our theme, for example, calling different banners or page templates, we would normally make changes to our local.xml file. But because we are trying to create a holiday theme that will stay up to date with our standard theme without copying files, we need a way to include our local.xml updates from our standard theme while including layout updates for the holiday theme. We can do this by calling an additional XML file after local.xml. Doing this requires a core update, so we need to go to app/code/core/Mage/Core/Model/Layout, open Update.php, and copy the file. We will add it into the local code pool. I’ve created the copy of the file at app/code/local/Mage/Core/Model/Layout.

Developers Toolbox: How to Create Auto Display Holiday Themes for your eCommerce store

On line 418, look for the following code:

[code]
// custom local layout updates file - load always last
$updateFiles[] = 'local.xml';
[/code]

After this, I add the following code:

[code]
// super override template for special updates
$updateFiles[] = 'override.xml';
[/code]

Now, I create an override.xml file in my Halloween/layout folder.

Developers Toolbox: How to Create Auto Display Holiday Themes for your eCommerce store

To test my file, I am going to add some simple layout updates that will target the home page. I am going to remove the cms wrapper, create a new template file for the home page, and call a new static block within the template.

[code]





halloween-banner





[/code]

I created a new static block in the admin that contains a Halloween banner and has the ID “halloween-banner.” I then made a new template file for my home page in Halloween/template/page and called my static block within that template.

Developers Toolbox: How to Create Auto Display Holiday Themes for your eCommerce store

In home.phtml, I am using the following line of code to call the static block:

[code]
getChildHtml('halloween-banner') ?>
[/code]

On page refresh, I will see that my standard cms page has been removed, and that my updated home.phtml file is being displayed along with my new static block.

Developers Toolbox: How to Create Auto Display Holiday Themes for your eCommerce store

You can add as many CSS changes and layout updates as necessary to complete your Halloween theme. Once the theme is complete, return to the Design Change panel and set the dates that you want your theme to display on. The benefit of this method is that any changes you make to your standard theme between now and the time that the holiday theme is displayed will be reflected in the holiday theme without recopying any files.

Developers Toolbox: How to Create Auto Display Holiday Themes for your eCommerce store

To add more holidays, create additional theme folders for each holiday that you would like to include, and set the design change for the appropriate dates. As each holiday comes and goes, your designs, banners, and content can automatically update for each occasion.

Developers Toolbox: How to Create Auto Display Holiday Themes for your eCommerce store

For more information on getting your Magento eCommerce store ready for the holiday season, check out the Groove Commerce Webinar “Christmas in August: A Step by Step Guide to Maximizing Your Holiday Profits!

If you enjoyed this article, get email updates (it’s free).

We value your privacy

Jaime Dalbke

Jaime Dalbke

Jaime began her career at Groove in 2011 as a Front-End Web Developer and Designer. Her core competencies include web design, user interface/usability, Wordpress, and Magento frontend development. Jaime earned her B.S. in Corporate Communications from the University of Baltimore, and is currently working on obtaining her Master's Degree in Publications Design from the University of Baltimore (expected completion 2013).

Got Comments?