Learning Magento Theme Development

By Richard Carter
    Advance your knowledge in tech with a Packt subscription

  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Introduction to Magento and Magento Themes

About this book

Magento is an open source e-commerce solution. It comes with a variety of tools necessary for building a successful online shop. Magento offers many built-in capabilities, such as promotion pricing and coupon codes, detailed statistics, and SEO options. By using Magento's powerful theming engine, you can control the look, content, and functionality, and easily launch a flexible e-commerce website.

This book will help you build your own store and help you broaden your customer reach. The book is a step-by-step guide to theming Magento 1.8, aimed at readers with little technical expertise. Starting with simple changes you can make to customize your store, from changing the logo and favicon to other simple configurable items, the book moves on to cover more in-depth theming techniques to help you build a fully custom Magento theme you can be proud of.

By the end of this book, you will be able to create a new, custom, responsive, and advanced Magento theme of your own.

Publication date:
August 2014
Publisher
Packt
Pages
182
ISBN
9781783280612

 

Chapter 1. Introduction to Magento and Magento Themes

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

 

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.

 

Magento terminology


As with many other open source technologies, Magento comes with its own terminology, which can be baffling to unfamiliar developers. This section identifies and defines some of the commonly used terms in the Magento theme development.

Scope in Magento

Magento has the following four levels of scope that help define the level in your Magento store(s) at which settings are applied:

  • Global: This refers to settings that affect the entire Magento installation.

  • Website: This acts as the parent entity for one or more stores in the Magento terminology. Websites can be configured to share the customer data or not share any data at all.

  • Store (or store view group): These are the hierarchical children of Magento websites. Products and categories are managed at Magento's store level. A root category is configured for each Magento store, allowing multiple stores under the same website to have totally different catalog structures.

  • Store view: A store needs one or more store views to appear in the frontend to customers so they are able to browse your store. The store view inherits the store's category and product information, and so the changes at the store view level are typically only cosmetic, changing the way the data is presented. The most common and likely implementation of multiple store views is to allow customers to navigate between two or more languages.

 

Magento websites, stores, and store views


It is possible to run many different e-commerce stores from one Magento installation, and it's also possible to run separate stores on the same website (for example, a consumer store and a trade store that offers discounts to trade customers). The simplest of Magento websites, however, consists of a single website with a single store and single store view as follows:

Using multiple stores in Magento

The most common use of multiple stores in Magento is to build separate stores with their own inventories. For example, you could have one store, veryverycoolt-shirts.com, to sell t-shirts, and another, veryverycoolcaps.com, to sell baseball caps through the same installation of Magento. The following diagram illustrates the structure of how this would be created using Magento websites, stores, and store views:

You can chose whether the stores share the customer data or whether each store has its own customer data, requiring customers to register separately if they want to order from both the t-shirt store and cap store.

Using multiple store views in Magento

You can make use of multiple store views in Magento to customize how a store is presented; this is typically used to present the same store in multiple languages. In the following diagram, both stores have a French and English version, created at the Magento store view level:

Magento allows the following two types of themes:

  • A parent theme that contains all the files that are required to be run by Magento

  • A child theme contains one or more files. Where a file isn't overwritten; Magento will look for the file in the parent theme

A parent theme is useful when you want to create a highly customized Magento theme from the standard themes that Magento has installed. Child themes are of use when you only want to make fairly minor amendments to your theme.

 

Magento theme files


As you have already seen, Magento themes use a number of different types of files to change how your e-commerce website is displayed to your customers. The following four groups of files are associated with Magento themes:

  • Skin files

  • Layout files

  • Template files

  • Locale files

Skin files

Skins encompass the files that you would associate with a website's design: the CSS, images, and JavaScript your theme requires in order to display your store.

In Magento, skin files are located in the /skin/frontend/ directory. Magento's base skin files are stored in the /skin/frontend/base/default directory of your Magento installation, while theme files, which you would typically edit for custom themes that you create, would be included in the /skin/frontend/name-of-your-package/name-of-your-theme/ directory.

In the examples used in this book, you will be building a theme in the default package, so your skin directory will look like this: /skin/frontend/default/name-of-your-theme/.

Layout files

Magento uses XML layout files in its themes to inform Magento about which blocks are displayed where in the page and in what order, for example, the MY CART and COMPARE PRODUCTS widgets that use Magento's default theme, as shown in the following screenshot:

The Magento layout can also be used to add and remove CSS and JavaScript files as well as other elements from the <head> element of your Magento theme and alter the order and location of the links.

Magento's base layout files are stored in the /app/design/frontend/base/default/layout directory of your Magento installation, while your custom theme's layout files can be found in the /app/design/frontend/name-of-your-package/name-of-your-theme/layout directory.

In the examples used in this book, you will be building a theme in the default package, so your application directory will look like this: /app/design/frontend/default/name-of-your-theme/.

Template files

Magento's template files (which use the .phtml file extension to indicate a mixture of PHP and HTML) provide your Magento theme with a way to generate the HTML for your store's pages using the data and content stored within Magento.

Magento's base template files are stored in the /app/design/frontend/base/default/template directory of your Magento installation, while your custom theme's layout files would be found in the /app/design/frontend/default/name-of-your-theme/template directory.

Locale files

Finally, Magento's locale files help you customize the text in the interface elements of your Magento store, such as the text used as links in the userbar for your store, as shown in the following screenshot:

A Magento locale file can also be used to provide a translation of your store's elements to French, or even just American English to British English. In the preceding example, a locale file might change the My Cart link to My Basket, for instance.

The content of pages and products of your store can be translated by creating new products and pages in your new store's language within the store view for that particular language.

Magento locale files are stored in the /app/design/frontend/base/default/locale directory, with locale files specific to your theme being stored in the /app/design/frontend/name-of-your-package/name-of-your-theme/locale directory. Translations are stored in a translate.csv file; for example, /app/design/frontend/default/name-of-your-theme/locale/en_GB/translate.csv contains the translations for British English for that particular theme.

Packages

In Magento theming, a package typically encapsulates a default theme that contains all of the skin, template, layout, and locale files Magento needs to render the website. It might also contain another non-default theme that customizes the look and feel of the website on top of the base theme, as illustrated in the following diagram:

Assigning a package at the website level means that all the stores under that store level inherit that package. This would simply apply the theme to all of the stores assigned to that particular website in Magento. So, by assigning a theme at the website level in the following diagram, the Cap store and the T-shirt store would inherit the same theme, unless it was specifically overwritten at the individual store view level:

 

Magento theme hierarchy


Magento has a hierarchy in place for its themes, which tells the system where to look for files if multiple themes are active on different stores on your website. As an example, think about a simple Magento store setup like the one you saw earlier, as demonstrated in the following diagram:

Now, imagine that your store has a theme called newtheme installed at the store view level. The Magento theme here requests a file called styles.css in the most specific interface and package first, so if you have a custom theme enabled, Magento will look in /skin/frontend/default/newtheme first. If it's not found in these directories, Magento looks in the default interfaces next: /app/design/frontend/default/default or /skin/frontend/default/default. Next, Magento will look in the base directories: /app/design/frontend/base/default or /skin/frontend/base/default. If the specified file is not found after that, Magento will encounter a rendering error.

So, the deeper down the hierarchy tree of themes the file is, the more specific it is and the more precedence it takes over other more general files.

 

Summary


This chapter provided you with an introduction to both Magento and Magento's themes as well as giving you an overview of what already exists in terms of the themes that ship with Magento by default. You have seen what comprises a Magento theme, some of the existing themes available with Magento 1.8, common theme terminology used in Magento, and how the Magento theme hierarchy works.

About the Author

  • Richard Carter

    Richard Carter is a seasoned front-end web developer who has worked with Magento since 2008. He lives in Newcastle upon Tyne in the North East of England.

    He is the founder of the e-commerce agency Peacock Carter, an e-commerce and web design agency based in the North East of England, and has worked for clients including the Scottish Government, City & Guilds, NHS, and the University of Edinburgh.

    Richard is the author of four books on Magento, including Magento Responsive Theme Design, and has written three further books on e-commerce and content management systems.

    Browse publications by this author
Learning Magento Theme Development
Unlock this book and the full library for FREE
Start free trial