Theming Magento eShop frontend : a beginner’s guide

In a previous article, We've briefly explained the four concepts behind Magento's rendering system. The last 3  entities are  perfectly understandable for web developers :

  • template (in app/design/frontend) stores HTML code for a series of twenty page types and page components, such as  catalog, navigation, shopping cart, checkout, cms.
  • Skin (in skin/frontend) stores the css stylesheets,
  • Locale stores language specific strings, in CSV format

Instanciating your own template out of Magento's default install is a child game. Our introduction article covered the automatic installation of packaged themes from Magento Connect : to perform the same task manually, you'll just have to perform a simple cut & paste operation of two basic folders :

  • template : copy / duplicate app/design/default/frontend  to app/design/frontend/YOURTHEME
  • skin : copy /duplicate skins/frontend/default to skins/frontend/YOURTHEME
    Notice at this stage that two skins are copied : you'll have to specify the skin you want in the backend System / configuration /design form, as shown below

The first entity, though, is a bit harder to understand. It is called Layou and  is coded out of raw XML format, and explained on Magento's Designer Guide.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *