Designer's Guide to Magento

You have heard about the unbelievable open-source features Magento offers right out the box.You spare no time seeing it in action, have oo-ed and aah-ed over it all - over and over again.

...And now you want to make it all your own. You've got your PSDs ready and the zeal to build and integrate. So what's next—Where do you begin?

Designer's Guide to Magento has been prepared for you to learn and expand your knowledge of the structural, conceptual workings and methods of designing for Magento—It will basically teach you what you need to know to begin creating a theme of your own with Magento. This said, due to the sheer extent of flexibility that Magento's features offer, it is not possible to document all the different ways in which it can be customized for use. For help with this, you can consult Magento's community forums and wiki where real-life people with real-life experiences will be able to point you in the right direction. Also, remember that Magento is an application constantly in development, therefore despite our greatest efforts this documentation may not faithfully reflect the release version you are currently working with.

This documentation is largely sectioned into four chapters and can be skipped through back and forth in order to quickly access only the information you need most. However, because each chapter acts as a prelude to the next, we advise you to follow along with the documentation in the order it was written.

Magento Design Terminologies

In order to follow along with the documentation, it is crucial that you have a good grasp of the terminologies used to describe aspects of the Magento system. The terminologies introduced in this chapter are most likely new territory for you, so take your time and read through them thoroughly. But most importantly, don't be discouraged if you can't fully grasp the concept of all these new terminologies - This chapter merely serves to introduce them to you all at once, and further chapters will dig deeper into and expand upon those simple definitions. Terminologies covered in this chapter are:

Website, Store and Store View

Interface

Themes

Layouts

Templates

Skins

Blocks

Structural Blocks

Content Blocks

Back to TopWebsite and Store

A website is a collection of stores that share the same customer and order information as well as shopping cart. A store is a collection of store views. These are very broad terms that can be adopted to define the unique needs of individual merchants. A few scenarios to define the different uses of website, store and store views are as follows:

Scenario 1

A company called Dubloo Inc creates an online presence with three separate clothing stores that each cater to different price-level audience. Dubloo Inc wants the ability for all three of its stores to share customer and order information. In such scenario, Dubloo Inc would have one website and three stores under their online presence. Store would define the individual price-level store, and website would be the Dubloo Inc umbrella.

Scenario 2

A company called My Laptops wants to open two separate websites that both sell laptops but at differing prices. They also want to offer English and Spanish language options per site, each carrying its own selected items according to language selection. They also need to synchronize customer and order information per site. In such scenario, store view would define each English and Spanish branch under the according website. A website would define "My Laptops" and "Cheap Laptops".

Scenario 3

A company called Bongo's Instruments wants to create an online presence. With no other branch of stores, Bongo's Instruments is the store as well as the website.

Back to TopInterface

Interface is a collection of themes that determines the visual output and frontend functionalities of your store. An interface can be assigned on either the website-level and/or store view-level through the admin panel (Learn how to assign an interface to the website/store).

If you assign an interface in the website-level, all your stores will inherit the interface of your website. You can further assign an interface in the store view-level and store-, effectively overriding that of the website. Say you operate four different stores under a website called “John's Panacea” - By studying the effects of each method as shown below, you can easily determine the method to employ for the design needs of your business.

Website-level declaration

If you want to create a unifying look and feel for all four stores, you will assign an interface in the website level, in which case all four stores will inherit the interface of the website.

Store view-level declaration

If you want to incorporate a separate look and feel per store, you can assign an interface per store-view, in which case the four stores will each carry its own unique look and feel.

Back to TopThemes

A theme is any combination of layout, template, locale and/or skin file(s) that create the visual experience of your store. Magento is built with the capacity to load multiple themes at once, therefore distinguishes themes into two large types:

Default theme

Every interface comes with a theme called 'default' which is the main theme of an interface. When you assign an interface to your store, the application automatically looks for this theme 'default' and loads it to the front-end. In order to customize your store design, you can either modify this theme alone, or create a non-default theme in addition and load it alongside the default. The default theme must contain all the required layouts, templates and skins to run a store error-free and hence is the lowest theme in the theme hierarchy.

Non-default theme

A non-default theme can contain as many or as little theme files as you see fit for your need. This type of theme is intended for use on creating temporary seasonal design changes to a store without having to create a whole new set of default theme—By creating a few images and updating some of the CSS, you can easily turn your store from a real bore to a stand-out seasonal Christmas store.

A theme consists of any or all of the following:

Layout (located in app/design/frontend/your_interface/your_theme/layout/)

These are basic XML files that define block structure for different pages as well as control META information and page encoding.For in-depth look into layouts, read Intro to Layouts)

Templates (located in app/design/frontend/your_interface/your_theme/template/)

These are PHTML files that contain (X)HTML markups and any necessary PHP tags to create logic for visual presentation.

Locale (located in app/design/frontend/your_interface/your_theme/locale/)

Theses are simple text documents organized on a per language basis that contain translations for store copy.

Skins (located in skin/frontend/your_interface/your_theme/)

These are block-specific Javascript and CSS and image files that compliment your (X)HTML.

Back to TopBlocks

Diagram 1. Structural Block (Indicated in blue)

Diagram 2. Content Block (Indicated in orange)

Blocks are a way by which Magento distinguishes the array of functionalities in the system and creates a modular way to manage it from both visual and functional stand point. There are two types of blocks and they work together to create the visual output.

Structural Blocks

These are blocks created for the sole purpose of assigning visual structure to a store page such as header, left column, main column and footer (Diagram 1).

Content Blocks

These are blocks that produce the actual content inside each structural block. They are representations of each feature functionality in a page and employs template files to generate (X)HTML to be inserted into its parent structural block. Category list, mini cart, product tags and product listing…etc are each its own content block (Diagram 2).

Instead of including template after template as a typical eCommerce application would in order to gather the whole (X)HTML output, Magento gathers and arranges page content through blocks.

Working with Magento Themes

In this chapter we'll go into the details of how Magento handles themes and teach you how to create and manage your own:

How Magento does themes different from others

How to create a theme

How to assign interface and theme to the store

Say hello to multiple themes

Hierarchy of themes: How Magento handles multiple themes

Back to TopHow Magento Does Themes Different from Others

The term ‘theme’ probably sounds to you a familiar ring. Either as an audience, a creator, or both, you’ve experienced the sea of available web applications options via its themes. A theme has largely two types of users – First, the audience–type who experiences it from the aesthetical and usability standpoint by browsing through a store – And second, the creator–type who goes through an additional layer of the theme experience by taking part in building the theme.

To the first user type, a store experience is defined by the ability of a store to fulfill his/her tactical and emotional demands. To the second user type who must fill the creator role, it is the efficiency with which he/she is able to complete a set of development tasks that determines the store experience.We recognize that it is the accumulated experiences of both user types that determine the final profitability of the store, therefore neither user’s experience can afford to be overlooked.

Because we know that as designers you’ve already got the graphical end of things best covered (servicing to the audience–types), we figured we'd just help you along by building an out-of-this-world theme management to maximize your work-flow efficiency and take your creativity to the next level. Here’s some things we thought might get you drooling:

Maximum customization power

With Magento you can update the look and feel of your store in the category and product level, giving you greater marketing and promotional power as well as a store with endlessly unique design. Ever imagined presenting each product in its own customized product info page? Magento gives you the power to do just that and more, by providing a quick way to customize your product presentation in a per-product and per-category basis.

Multiple themes

Magento gives you the ability to load multiple themes at once, allowing you to swap between a default store design and temporary event/season-specific ones — All at the command of a few key strokes.

Uninterrupted workflow

With Magento’s fully object-oriented programming, all modules are immediately accessible via templates tags from any template files. And because Magento comes feature-rich right out of the box, you’ll never again have to be dependent on a programmer to finish the simplest tasks for you. Magento also thrives on an extensive network of knowledgeable community members (including the official Magento Team), so you will never need to think twice about where to get guidance should you need it along the way.

Minimize debugging time

Any designer can recall those precious hours and minutes wasted looking for the unclosed markup scrutinized by your validator. The validator may tell you what’s wrong, but it never seems to tell you where it’s happening. Magento’s modular backend brings with it a modular template system that minimizes the amount of (X)HTML you need to handle at once. Less the mess mean less the fuss and more the sanity for the truly important things in life.

Really, the best part of what Magento offers you though, is an application that thrives on its flexibility, leaving you with nothing much to worry about except devising your brilliant plans for your next ‘wow’ front-end. The sky is the limit for this application, and we hope you have fun applying it to your store.

Back to TopHow to Create a Theme

Let's first unveil some directories to get you going. Open the following directories in your Magento root and do get nosy:

Directory 1: app/design/frontend/default/default/ — This directory contains the layout, translation (locale) and template materials.

Directory 2: skin/frontend/default/default/ — This directory contains the images, CSS and block-specific Javascripts.

When working with themes, these two directories will remain your base starting point.

As you may have noticed, we’ve sectioned the theme files into two parts. By separating the files that must be web accessible (such as image and Javascripts) from those that can be hidden from it, we’ve made certain Magento offers you maximum security measure for your store at every corner.

Let’s go ahead and examine the two directories.

At first blush you’ll notice the use of directory names “default/default” in both directory 1 and 2 like so:

Directory 1: app/design/frontend/default/default/

Directory 2: skin/frontend/default/default/

In both cases, * indicates the interface name, and * indicates the theme name. So if you were working on a theme called “my_theme” in an interface called “my_interface”, you would be working in the ‘app/design/frontend/my_interface/my_theme/’ directory.

You can save as many themes into your interface directory as you’d like, but at the time of writing, your store can only handle loading the theme called ‘default’ and one additional theme of your choice to your store. (Note:Capacity to load unlimited number of themes will become available in the coming releases.) To learn how Magento manages loading multiple themes at once, read Hierachy of Themes) This gives you two themes to work with, so you can keep your default theme for your store’s off-season design and use the additional theme for the seasonal and event-specific ones (To read about how multiple themes work and how you can benefit, read Say Hello to Multiple Themes ).

Creating a new default theme

In order to create a new default theme, first you must copy an existing default theme from which you can base your new theme. Create a duplicate of app/design/frontend/default/default/ and rename the new directory to whatever you would like (Name of an interface and theme should be one alpha-numeric word starting with a letter from the alphabet[a-z]. For instance, ‘My New Theme’ and ‘02123_my_theme’ is bad. ‘my_new_theme’ is good). The name of your theme directory is the name by which the application will recognize your theme. Now do the same for skin/frontend/default/default. And that’s it! You’ve now successfully created a new default theme. To learn how to assign this theme to your store, read Assigning a new theme below.

Creating a new non-default theme

Diagram 1

When creating a new non-default theme, you don’t need to duplicate any existing default theme directories. Most likely you’re just making changes to specific files and hence will only need to duplicate the according files as a starting point of your new theme. One rule you must always remember to follow, however, is to make certain that you preserve the subdirectory structural conventions of Magento. For example, if all that your non-default theme contain is the template file ‘home.phtml’ from the catalog module, inside app/design/frontend/your_interface/your_non_default_theme/ you will need to create directories ‘template/catalog’ into which you will save your template file. When you open up a default Magento theme directory (Diagram 1), you will see how directories are structured—Make sure to reference this directory convention in order for your new theme to load successfully.

Assigning interface and theme to the store

Now that you’ve created your own theme (whether a default or a non-default), you’ll need to assign it to your website/store in order for it to take effect. Navigate to the Magento admin panel (ie.www.mydomain.com/admin), then the Design configuration tab (System -> Configuration -> Design tab).

Diagram 2

On the upper corner of the left column in Diagram 2, you will see a box labeled ‘Current Configuration Scope’.

In order to manage your store design in the website-level, select the name of your website from the dropdown, then apply the following steps.

In order to manage the design from the store view-level, select the name of your store view from the dropdown, then apply the following steps.

Step 1

From the Design tab, in Current package name, enter the name of the interface in which your new theme resides. Magento will automatically load the interface called ‘default’ if this box is left blank.

Step 2