Magento terminology

Before you look at Magento themes, it’s beneficial to know the difference between what Magento calls interfaces and what Magento calls themes, and the distinguishing factors of websites and stores.

Magento websites and Magento stores

To add to this, the terms websites and stores have a slightly different meaning in Magento than in general and in other systems. For example, if your business is called M2, you might have three Magento stores (managed through the same installation of Magento) called:

• Blue Store
• Red Store
• Yellow Store

  

In this case, Magento refers to M2 as the website and the stores are Blue Store, Red Store, and Yellow Store. Each store then has one or more store views associated with it too. The simplest Magento website consists of a store and store view (usually of the same name):

A slightly more complex Magento store may just have one store view for each store. This is a useful technique if you want to manage more than one store in the same Magento installation, with each store selling different products (for example, the Blue Store sells blue products and the Yellow Store sells yellow products).

If a store were to make use of more than one Magento store view, it might be, to present customers with a bi-lingual website. For example, our Blue Store may have an English, French, and Japanese store view associated with it:

Magento interfaces

An interface consists of one or more Magento themes that comprise how your stores look and function for your customers. Interfaces can be assigned at two levels in Magento:

• At the website level
• At the store view level

If you assign an interface at the website level of your Magento installation, all stores associated with the interface inherit the interface. For example, imagine your website is known as M2 in Magento and it contains three stores called:

• Blue Store
• Red Store
• Yellow Store

If you assign an interface at the website level (that is, M2), then the subsequent stores, Blue Store, Red Store, and Yellow Store, inherit this interface:

If you assigned the interface at the store view level of Magento, then each store view can retain a different interface:

Magento packages

A Magento package typically contains a base theme, which contains all of the templates, and other files that Magento needs to run successfully, and a custom theme.

Let’s take a typical example of a Magento store, M2. This may have two packages: the base package, located in the app/design/frontend/base/ directory and another package which itself consists of two themes:

The base theme is in the app/design/frontend/base/ directory. The second package contains the custom theme’s default theme in the app/design/frontend/ default/ directory, which acts as a base theme within the package. The custom theme itself, which is the non-default theme, is in the app/design/frontend/our-custom- theme/default/ and app/design/frontend/our-custom-theme/custom-theme/ directories.

By default, Magento will look for a required file in the following order:

1. Custom theme directory: app/design/frontend/our-custom-theme/ custom-theme/
2. Custom theme’s default directory: app/design/frontend/our-custom-theme/ default/
3. Base directory: app/design/frontend/base/

Magento themes

A Magento theme fits in to the Magento hierarchy in a number of positions: it can act as an interface or as a store view. There’s more to discover about Magento themes yet, though there are two types of Magento theme: a base theme (this was called a default theme in Magento 1.3) and a non-default theme.

Base theme

A base theme provides all conceivable files that a Magento store requires to run without error, so that non-default themes built to customize a Magento store will not cause errors if a file does not exist within it.

The base theme does not contain all of the CSS and images required to style your store, as you’ll be doing this with our non-default theme.

Don’t change the base package!
It is important that you do not edit any files in the base package and that you do not attempt to create a custom theme in the base package, as this will make upgrading Magento fully difficult. Make sure any custom themes you are working on are within their own design package; for example, your theme’s files should be located at app/design/ frontend/your-package-name/default and skin/frontend/ your-package-name/default.

Default themes

A default theme in Magento 1.4 changes aspects of your store but does not need to include every file required by Magento as a base theme does, though it must just contain at least one file for at least one aspect of a theme (that is, locales, skins, templates, layout):

Default themes in Magento 1.3
In Magento 1.3, the default theme acted the way the base theme did in Magento 1.4, providing every file that your Magento store required to operate.

Non-default themes

A non-default theme changes aspects of a Magento store but does not need to include every file required by Magento as the base theme does; it must just contain at least one file for at least one aspect of a theme (that is, locales, skins, templates, layout):

In this way, non-default themes are similar to a default theme in Magento. Non-default themes can be used to alter your Magento store for different seasonal events such as Christmas, Easter, Eid, Passover, and other religious festivals, as well as events in your industry’s corporate calendar such as annual exhibitions and conferences.

Blocks in Magento

Magento uses blocks to differentiate between the various components of its functionality, with the idea that this makes it easier for Magento developers and Magento theme designers to customize the functionality of Magento and the look and feel of Magento respectively. There are two types of blocks in Magento:

• Content blocks
• Structural blocks

Content blocks

A content block displays the generated XHTML provided by Magento for any given feature. Content blocks are used within Magento structural blocks. Examples of content blocks in Magento include the following:

• The search feature
• Product listings
• The mini cart
• Category listings
• Site navigation links
• Callouts (advertising blocks)

The following diagram illustrates how a Magento store might have content blocks positioned within its structural blocks:

Simply, content blocks are the what of a Magento theme: they define what type of content appears within any given page or view within Magento.

Structural blocks

In Magento, a structural block exists only to maintain a visual hierarchy to a page. Typical structural blocks in a Magento theme include:

• Header
• Primary area
• Left column
• Right column
• Footer