Magento is a popular, enterprise-level open source e-commerce platform used by hundreds of thousands of e-commerce businesses around the world. With ever increasing numbers of online stores competing for customers and income, it can pay off to invest in customizing your Magento store to set it apart from hundreds and thousands of other stores, and developing a custom Magento theme is the way to achieve this.
In this chapter, you will learn the following topics:
- What a Magento theme is and what Magento themes can do
- An overview of the default Magento themes in Magento
- An introduction to the Magento theme terminology
- How the Magento theme hierarchy works
A Magento theme is simply a collection of files that tells Magento how to display your store to visitors. A Magento theme can consist of a collection of CSS, HTML, PHP, XML, and images, all of which contribute to the look and feel of your store.
Due to Magento's architecture and the design interface's hierarchy, Magento will fall back to base theme (discussed later in this chapter) that contain the files it requires if they are not present in the current theme. A Magento theme can consist of one or more of the previously mentioned files. It could be as simple as a logo file with the rest of your store's styling provided by a parent theme.
In Magento Community Edition 1.8, Magento provides the following four themes:
- Default
- Blank
- iPhone
- Modern
Magento's default theme is perhaps, unsurprisingly, the theme that is enabled by default when you first install Magento, encompassing a clear header area with a search field and drop-down navigation for categories to be listed, a content area with sidebar(s), and a footer, as shown in the following screenshot:
The default theme's product page layout retains the header and footer styling of the home page layout, but the central content area is adapted to present the product information to customers, as shown in the following screenshot:
As you can see in the preceding screenshot, the product page provides a product image with the name, a brief description, and the price of the specific product towards the top of the page. Then, a more detailed description is provided in the next block.
One of the next key views for your Magento store is the category page layout, which presents all the products grouped within a particular product category, as shown in the following screenshot:
Magento presents products in two ways: in a grid (as shown in the preceding screenshot) and as a list, which you can select by clicking on the List option in the product grid, as shown in the following screenshot:
In the list mode, products within the selected category are displayed one above the other, as shown in the following screenshot:
Finally, Magento's famous one-page checkout provides a well-structured checkout process for your customers, as shown in the following screenshot, maintaining the default theme's overall character:
Next, you will see the additional Magento themes that come with Magento Community Edition 1.8 to cater to different needs for both customers and developers.
The blank theme, as its name suggests, provides a very minimal approach to a Magento theme to allow a custom Magento theme to be built upon it, maintaining a layout that is similar to Magento's default theme but stripping the visual styles, as shown in the following screenshot:
The iPhone theme provides a more mobile-friendly theme for your Magento store, which can be switched on and off for specified devices. This view of the home page with the iPhone theme shows you how content is streamlined and slimmed down to help present the most relevant information to your customers on devices with limited screen space available, as shown in the following screenshot:
Finally, the modern theme provides a full-fledged Magento theme that can be used as an alternative to the default theme, with a more contemporary look, as shown in the following screenshot:
These themes show you just the surface of the potential customizations you can make to your Magento store, and this book will guide you through some of the common changes made to Magento stores as well as some less common alterations you can make to improve your Magento theme.