Make Multiple Magento Themes

E-mail Print PDF

Note: Capacity for unlimited themes will become available with the upcoming releases. Although at the time of writing only two themes can be loaded at once, the workings behind the scenes remain the same and you will benefit from this documentation.

Holiday seasons by far offer the most extensive sales opportunity for any eCommerce store — Customers line up to buy Christmas gifts for their family and friends, and moms line up to buy Halloween costumes for their child’s special night of trick ‘or treating. In order to tailor to the seasonal shoppers, your store must faithfully reflect the occasions in order to inspire your shoppers to explore your store. A shop like Diagram 3 just doesn’t cut it during Christmas – What this store needs is a few reds, snowflakes and Santa Claus – just like the store below in Diagram 4!

Diagram 3. This just doesn’t cut it

Diagram 4. This is what you need


With Magento, we’ve created the capacity for your store to handle multiple themes of your choice exactly for those times when an extra touch is needed most. By loading multiple themes to your store, you can preserve your normal non-seasonal store design, while enhancing it with the Christmas theme.

At close examination of the two designs above, you’ll notice similarities in the underlying design. The façade has gone Christmas in Diagram 4, but underneath it you can still see the structure of the off-season store design. The only real difference between the two store designs, are just a few CSS and image files and wording changes in the template files. Because the changes are in fact minor, you don’t need a whole new default magento theme to accommodate your Christmas theme. What you need is just a few file replacements, and you’re on your way to a much spicier and merrier store. Magento’s multiple themes functionality was created to accommodate exactly that need, putting the power on your fingertips to turn on and off the seasonal themes while preserving your default theme.

Magento handles loading multiple themes by assigning something called hierarchy to the themes which is simply a process of cancelling out redundant files to load only that which resides highest in hierarchy.The hierarchy is determined by you in the Admin Design configuration tab and your ability to do so will become fully functional with the upcoming stable version. At the time of writing, the hierarchy of themes is already decided for you, as Magento loads the 'default' theme in the system first (placing it in the lowest hierarchy), then loading the second theme you assign in the admin (placing it in highest hierarchy).

Hierarchy of Themes

When you assign multiple themes to your store, you’re essentially taking advantage of the fact that while your main goal when building a theme is to create the most usable and visually pleasing graphical interface, the goal of Magento’s is to ensure that the application is able to locate and load all the files of the theme required to keep the application running error-free.

For instance, if your category listing page calls for a template called ‘view.phtml’(in which case this template becomes a required file), but the application is unable to find the file in the theme highest in hierarchy (Note: At the time of writing, the theme highest in hierarchy is the theme that you assign through the admin, and the theme lowest in hierarchy is the theme called ‘default’ that Magento automatically loads into the store. In the upcoming releases, Magento will provide you with the ability to have full control over the hierarchy of your themes), it will look to the next theme highest in hierarchy to find the file. Should this fail, it will continue working down the hierarchy of themes until it’s able to locate the file called ‘view.phtml’, upon which the application will load it to the store and terminate the search. This method of building design is called fallbacks, because the application ‘falls back’ to the next possible source of required files in order to retrieve and load it.

Let’s say you have three themes assigned to your store and each of these themes contain the following files:

Table 1
default my_theme_1 my_theme_2
All required files templates/3-col-layout.phtml templates/3-col-ayout.phtml
  templates/header.phtml css/base.css
  images/logo.gif  
  css/base.css  
  css/boxes.css  

Let’s also assume that the three themes are assigned this hierarchy:

Table 2
HIGHEST my_theme_2
  my_theme_1
LOWEST default

At close observation, you’ll see that there’re few redundant files such as templates/3-col-layout.phtmlcss/base.css in Table 1. Now let’s arrange the table around so the redundant files are arranged parallel to one another. and

Table 3
default my_theme_1 my_theme_2
All required files    
  templates/3-col-layout.phtml templates/3-col-layout.phtml
  templates/header.phtml  
  images/logo.gif  
  css/base.css css/base.css
  css/boxes.css  

‘Ok, great. But what does this mean?’ you may ask.
Well, let us remind you that the files in Table 3 are how you see the files in each theme folders and not how Magento sees it.

Let’s then look at how Magento sees the same file structure in Table 4.

Table 4
default my_theme_1 my_theme_2
All required files    
    templates/3-col-layout.phtml
  templates/header.phtml  
  images/logo.gif  
    css/base.css
  css/boxes.css  

You’ll notice how Magento ignores the version of the redundant file lower in hierarchy and recognizes only the version higher in hierarchy. This is because it’s already found the required file and need not search for it any longer, ergo terminating the search for that specific file while continuing the search for other required files yet to be found.

Testimonials

Jeg ønsker at erstatte logoet billedet med min egen. Kan du gøre det for mig?

--- Camilla

Ich möchte eine andere virtuemart Vorlage zu kaufen. Kann ich einen Rabatt? Smile

--- Felix

Acabei de comprar um modelo Prestashop. Eu não sei como instalá-lo. Por favor instale para mim.

--- António

Fairy Style Responsive WooCommerce Template 58499, Clean, fast, responsive & easy! good choice for an online shop.

--- ANDREJA

Ναι. Έχω εγκαταστήσει ελληνική γλώσσα σε αυτό το Magento πρότυπο. Σας ευχαριστώ για τη βοήθειά σας.

--- CLYTEMNESTRA

Thank you for your answer. I will try and let you know if it's work on my prestashop theme.

--- Claudia Monsalve

 
You are here: Magento Tutorial Make Multiple Magento Themes