Email and SMS Marketing

Creating A Magento Holiday Theme

Aug 20, 2012   •   4 Min Read

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

Demo Site

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.

Skin Folder

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.

Enterprise Package

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.

Dashboard

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

Design Change

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.

Halloween Style

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:

New Logo

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.

Copy of File

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.

Layout Folder

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.

Halloween Banner

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.

New Static Block

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.

Edit Design Change

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.

Design Change

Explore more tags: Email and SMS Marketing Blog
Related Content

You Also May Like

HubSpot

Use The HubSpot Shopify Integration To Sync Customer Data

Introduction Running an online store is full of day-to-day excitement, but the data...
Learn More
Blog

How Cordova Outdoors Manufactures Insulated Coolers In the USA with Gentry Jensen - EP 003

Podcast: Download | Subscribe: Apple Podcasts | Google Podcasts | Spotify Meeting...
Learn More
Klaviyo

Klaviyo Abandoned Cart: 5 Strategies to Increase Conversion

It takes a lot of work to get customers to your eCommerce store. Whether you use SEO...
Learn More
Blog

Omnisend vs Klaviyo: A Marketer's Perspective on the Best Choice

One of the main factors to consider when growing your brand is choosing an email...
Learn More
Blog

Klaviyo Email Marketing: 5 Reasons They Stand Out in 2024

In 2024, email marketing is far from dead. Contrary to popular belief, it continues...
Learn More
Blog

Klaviyo vs HubSpot: A Side-by-Side Comparison

While many tools are required to successfully manage a digital-age brand, the tools...
Learn More
20 Best Shopify Apps LP Background Small
eBook
E-BOOK

20 Best Shopify Apps For Your eCommerce Store

Download e-Book

Let's Grow Your eCommerce Business, Together.