Structure of Magento Themes

E-mail Print PDF

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

Blocks

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.

Testimonials

Questo tema VirtueMart è molto buona. Sarà un nuovo acquisto.

--- Gina

Nem installation, professionelt design, tak for din Prestashop skabelon

--- Mads

Comment faire pour déplacer le module catégorie à un autre poste dans ce modèle de virtuemart? Smile

--- Eric

Ich mag deine professionelle Gestaltung und freundliche Unterstützung. Ich werde kaufen ein Prestashop Vorlage heute. 

--- Schulz

Я заинтересован в вашем интернет-магазина шаблон, оружие магазине, за $ 90 и Одежда магазине, за $ 106. Можете ли вы сделать скидку?

--- Владислав

Can you edit themes if I have a look I’m going for or off a psd?  And cost and turn around time.

--- Slava Vidomanets

 
You are here: Magento Tutorial Structure of Magento Themes