Creating templates for your Magento website

Creating a template for your Magento website is an important step in setting up your online store. Indeed, the visual apect of an e-store is as important as a shopwindow: it is the first thing the would-be customer will see. This shopwindow will retain a customer or on the contrary, make him leave.

(Of course there are other ways to bring prospects directly inside your store, using search engines for instance, but this will described in another article.)

Knowing this, the whole Magento design system was conceived and designed to help you creating pages on your Magento website, organizing them and decorating them as you wish. (And of course without specific developments which would prevent you from installing future Magento releases.)

In order to build a Magento design package, three types of objects are needed:

  1. templates
  2. skins
  3. layouts

Understanding how these three types of objects work together is essential in order to be able to create your deisgn package.

Templates

Templates are a set of blocks that will display your shop.

For instance, these blocks will:

  • display a product detail,
  • display the customer shopping cart,
  • display featured products,
  • display navigation menus,
  • display content informations such as "Terms of use",
  • et caetera .

Magento provides a default template that contains a variety of standard blocks. It is possible, using inheritance, to override blocks design, to create new ones, and so on...
Moreover, Magento being based on the Zend Framework, which provides components for the MVC design pattern, the business rules are defined elsewhere, allowing complete independence of your graphic with the core system.

Skins

Skins contain all the CSS files of your site and describe how the block should be displayed (colors, images, fonts...). Separated from the templates, it becomes extremely easy to customize the graphic style without changing the blocks.

Changing all or parts of the graphic can be easily achieved, for instance:

  • for specific parts of the website (specific category, refurb ...)
  • for a period of time (Christmas, sales ...),
  • for a particular category of user (committees, VIP ...),
  • et caetera .

Layouts

Layouts will determine which blocks will appear on which page (catalog page, product page, checkout page, customer account page ...) and define their attributes. In other words, they are the definition of the overall structure of your site. Again, a standard layout is proposed and it is easily customizable.

2 comments on "Creating templates for your Magento website"

jon's picture
jon (visitor) - Mon, 21/03/2011 - 21:35:

OK so I have:

my package

my theme

so

a. what is the "skin"???

b. how do I switch "skin" or "what the user can see" e.g. blocks if they are in a particular group.

you wrote:

Skins

"Skins contain all the CSS...blocks.

Changing all or parts of the graphic can be easily achieved, for instance:

* for a particular category of user (committees, VIP ...), "

radio s's picture
radio s (visitor) - Thu, 18/10/2012 - 14:03:

Thank you for this tutorial, it's very good.