What is a Magento theme?

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.

Magento's default themes

In Magento Community Edition 1.8, Magento provides the following four themes:

• Default
• Blank
• iPhone
• Modern

The default theme

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.

Tip

You might notice that there are many superfluous blocks in the sidebar, such as the BACK TO SCHOOL and COMMUNITY POLL blocks, which would not be required on a usual e-commerce website. These blocks help showcase how powerful Magento is to new developers and can be removed fairly easily.

The category page layout

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:

The list mode layout

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:

Checkout

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

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

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:

The modern theme

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.