Magento Theming Basics

From what I have experienced, I feel that Magento goes out of its way to de-couple the user-interface from the backend. This has one clear advantage, if you upgrade your Magento packages, chances of the look and feel of your shopping cart not getting effected are pretty high (that is if you followed the guidelines set by Magento and refrained from replacing any of the base/default packages while theming your shopping cart in which case all bets are off and when the shopping cart reverts to looking like a new Magento installation after the upgrade, you’d better have a backup around to apply all your customizations again).

Theming, The Magento Way

Finding The Theme Files

So how do I modify my Magento installation, you might ask. Well you have to create the theme files for your store obviously. And your next question would probably be how do you do that and the answer would obviously be by copy/pasting the theme files that come with a fresh Magento installation into a new folder. What was that? You want to know which folder contains the theme files? Well, aren’t you curious today, its not a single folder, its infact two folders, one is app/design/frontend and the other is skin/frontend. Each of these folders should contain base and default subfolders.

Lets say you want to call your theme My-Theme (sounds narcissist, I like it), create a directory in both app/design/frontend and skin/frontend called My-Theme. Copy and paste the contents of app/design/frontend/base/default into app/design/frontend/My-Theme/default and the contents of skin/frontend/default/default into skin/frontend/My-Theme/default.

Now, we can modify the contents of app/design/frontend/My-Theme/default and skin/frontend/My-Theme/default as much as we like.

Don’t forget to assign My-Theme to your shopping cart from the admin section. You can accomplish this by going to Admin > System > Configuration > General > Design > Package. Just replace default with My-Theme as the value for Current Package Name and we are all set to go.

You might be wondering why not just change the contents of the default folders themselves instead of going through all this hassle of creating folders and copying contents and what not. Well, if you do that, the next time you upgrade Magento, all your theming would be lost since the upgrade process would overwrite most changes you’d have made. Best case scenario as a result of this would be that your shopping cart would revert to looking like a fresh Magento installation and the worst case scenario would be that it could potentially stop working all together depending on what you have done.

Fallback Model

Magento’s theming architecture was changed between Community Edition (CE) 1.3 and Community Edition 1.4 and between Enterprise Edition (EE) 1.7 and Enterprise Edition 1.8.

Since CE 1.4 and EE 1.8, Magento has a fallback model for themes. What this means is that any files that you did not modify while changing the copied contents, you can delete and Magento would automatically look at default and then at base.

Posted in Magento and tagged , .