Building Your Magento Theme

E-mail Print PDF

Magento is built on a fully modular model that transfers to unlimited scalability and flexibility for your store. By nature of the application, this approach to programming is mirrored in the way you will develop themes for your store. In this chapter, we will explore what that means for you and exactly how to go about developing a theme for your store with Magento.

Introducing Blocks and Layout

You’ve most likely worked with other eCommerce applications before arriving at Magento—with such experience we know you probably have a few sets of things that have become second nature to you when developing a magento theme for your store. Before you begin this documentation, we’d like to make sure you gather those expectations you may have and mercilessly throw them out the window. No, no, this doesn’t mean you need to learn a whole new language. It doesn’t even mean much will change with regards to your workflow, actually. All this really means is that there’re a couple of new tricks you will need to learn and along with it new tools we’d now like to introduce to you. Marry these tools, keep them at your side at all times and make sure you pay them lots and lots of attention—You do all this, and we promise you, you will love yourself for it. Are you ready? Here they are:

  1. Structural Blocks
  2. Content Blocks
  3. Layout

Creating the Mental Note

In order to give you a clear understanding of what blocks and layouts are, here’s a mental picture you can draw for yourself:

  1. Imagine an outline of a block (like in Diagram 1 -- Don’t reference the picture the whole time. Imagine it and follow along).
  2. Now imagine the outline of a block filled with one block.
  3. Now imagine two blocks and the outline growing with the blocks.
  4. Now imagine three blocks and the outline growing with the blocks.
  5. Now imagine four and the outline growing with the blocks.

    Diagram 1

  6. Now look at this snapshot of the category landing page in Magento:


    Diagram 2

  7. And now look at the break-down of the above snapshot into two types.

    Diagram 3

    Diagram 4

The mental picture you just created serves to give you a parallel comparison between concept and actual realization of blocks. I know you’re probably completely lost. Let us explain.

In concept, the outlines in Diagram 3 are the structural blocks. They are the parent blocks of content blocks and in realization, serve to position its content blocks within a store page context (as in Diagram 4). These structural blocks exist in the forms of the header area, left column area, right column…etc. which serve to create the visual structure for a store page.

A content block on the other hand, in concept, is the individual-colored blocks that make up a structural block. In a store context, they are the true meat of a store page. They are representations of each functionalities featured in a page (such as category list, callout and product tags…etc.), and employs template files to generate (X)HTML to be inserted into its parent structural block.

Layout is the tool with which you can assign content blocks to each structural block you create. Layout exists in the form of XML text-file and by modifying the layout you are able to move blocks around in a page and assign templates to the content blocks to produce markup for the structural blocks. In fact, with the help of a few layout files alone, you are able to modify the visual layout of every page in your store. Read further about layouts in Intro to Layouts.

With Magento, you will no longer have a template file called left_column.ext and in it have the never-ending spaghetti of markups that must be manually managed depending on each functionality needed for the page. Instead, your templates are managed on a per-functionality basis and you can load and unload functionalities in your store page by the virtue of a couple of layout commands alone.


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 Building Your Magento Theme