Moving Forward with Magento, Part 1 – Implementing your Stores “Look and Feel” – Themes
Introduction
Magento is the leading eCommerce shopping cart platform chosen by many of the world’s most respected brands. It is a suitable platform for businesses of all sizes, from a family run small business to global enterprises. It comes in two basic variants, an Enterprise Version and a Community Edition. This article focuses on the Community Edition which is the most widely deployed version, and used by the majority of small to medium sized enterprises.
Out of the box, Magento provides a template based store front and product/inventory management system that is reasonably easy to use and set up. The application contains a number of simple Templates known as “Themes” that render the store front. However, the Themes are basic and only used to show the functionality the store offers, it is often said that out of the box, Magento is a demo. This can be seen with the words “Demo Store” used through emails and Theme template pages, hence the need to replace the default Theme with a production one.
To customise your store to the branding you use, you need to replace the “default” Theme with one you have had custom written for you or alternatively purchased from a Theme Vendor (of which there are multitudes of!).
Components of a Theme
A "Theme" in Magento consists of template pages written in PHP, layout files written in XML, CSS files to effect styling, image files and then any other media files for your design. Typically a theme template page has no styling, just tags to enable the application of styling via CSS. The theme files are split between files that “Skin” the look of the store and "Application Templates" that provide the layout and functionality specific to your store, the Magento base code does the rest.
It should be mentioned that a new theme might only implement a single CSS file as the Magento base/default template pages and skin directory contains virtually no CSS components because those are specific to a design and not to the core system.
When you download a theme, you are usually given a ZIP file with two folders, “App” and “Skin”, these correspond to the directories mentioned above, you follow the folders down to the folder that has the name of the theme and you then upload that folder under “app/design/frontend/base/<theme-name>” and “skin/frontend/base/<theme-name>”.
How themes work in Magento
Magento provides a directory structure to host themes, there is no limit to how many themes you can have, but you only have one active on a single store at a time. Your theme can be changed on a scheduled basis, there is a tool in the Administration section to configure theme changes so a Christmas based theme can be enabled during the holiday season and other special events can be configured as needed. If your store sells sporting goods, you could theme the store for each major sporting event, and this can be done automatically if required.
Magento's Theme packaging uses a "fall back" method to locate theme components, so that seasonal variations of the basic store theme can be implemented in a minimal way with the remainder of the Theme content and configuration configured in a base package.
Using the "Christmas" theme idea from above, the main logo for the store might contain a Christmas decoration, while the background might have a Christmas look to it, rather than copy the entire Theme file directory, only the two image files would need to be inserted into a new Theme directory and referenced. This brings us to Theme Packaging.
Packages of Themes
Magento provides a facility to group related themes together, it's had a few name changes over the years, the latest documentation now refers to it as a "Design Package" or "Custom Package". The "package" is just a directory name, under it are the sub-directories for each theme, you might have a “Christmas” directory, an “Easter2014” directory even a “End-Of-Financial-Year” directory, each contains the images and CSS changes under the “Skin” directory structure while any template page changes are under the “App” directory structure.
The ability to change aspects of the theme while retaining all the basic aspects of the theme is due to a “fall-back hierarchy” built into the Magento software (available since CE v1.4+ and EE v1.8+).
The fall-back process looks for the requested file in:
- app/design/frontend/custom_package/custom_theme/
- skin/frontend/custom_ package/custom_theme
If not found, look for requested file in:
- app/design/frontend/custom_package/default
- skin/frontend/custom_package/default
If not found, look for requested file in:
- app/design/frontend/base/default
- skin/frontend/base/default
If not found, a rendering error will occur.
Within the package directory you have a “default” theme directory, this holds all the required components to build the look and feel of your store so the fall back mechanism will stop here for the majority of your theme components except the ones you specifically changed. For code pages and layout pages, if it's not part of your theme then it MUST be in the default directory structure.
When used effectively, this fall-back mechanism allows you to edit and maintain only the files you need to change as a custom theme and all of the other functionality is provided by either the custom package default theme or the base package.
So to sum up, Magento Themes are split into 2 basic sections, theme application code (which also covers, template, XML and layout files) and media components that “skin” the store like images, css and javascript.
If you were to view the directory structure for the default theme you would see this theme stored in:
- app/design/frontend/base/default/ – Default base theme location, contains the layout and template files necessary for core Magento functionality.
- skin/frontend/base/default/ – “Skin” files like CSS and Javascript files, which support core functionality.
You can then use the built in scheduler located in the Administration Web Interface to schedule the change to apply on a set date and turn off on an ending date. The scheduler is located under the "System" -> “Design” configuration option in the Administration Interface.
Installing a Theme
The installation process for Themes can be done in two ways, the first is to use "Magento Connect" which is an inbuilt tool for installing Extensions and Themes. The other method is to download a Theme to your computer and then upload the various components to their respective places within the Magento file system. This task is usually done by a software developer who has an understanding of Magento's structure. But for the IT literate, it's not that difficult to install.
Per Store Themes
Magento is not limited to a single store, it can support an unlimited number of stores and store views (this will be covered in another article). To define which Theme to use and its base package on a per store basis, you use the Administration Console to select the store and enter the applicable package name.
You log into the administration console by entering /admin to the end of your domain URL and then enter the user and password credentials entered during the installation process. From here you are presented with a Dashboard that enables access to everything you can configure. Specifically one of your first steps is to configure the Details of your store like contact emails, phone numbers and addresses, this is done under the “System” → “Configuration” tab. The "Theme" details are under the "Design" tab, here you can specify the "Package" in the "Package" drop down and details about the theme in the "Themes" drop down.
Getting Serious
If you are going to get serious about getting your hands dirty inside Magento then you need to read two guides, the first is the “Magento Users Guide” available from the Magento Commerce Web Site. The guide explains various aspects of setting up your store.
The second is the “Magento Designers Guide”.
The design guide explains the concepts of theme construction reasonably well, but you may need to look at a few tamplate files to see how it is all rendered in a working system!
Part 2 – Magento – Configuring Multiple Store Views coming next week!
-oOo-
