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:

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.

  1. 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.

  2. 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/)
    These 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.


:: That's it for terminologies, folks! - Short and sweet. In the next chapter, we'll get close and personal with Magento themes.