Skinning Your Magento Site

Posted on: Dec 6, 2011 4:10:21 PM By: Viet Le Quang

Applying your possess customised ecommerce web pattern is one of a many critical things you’ll do to your Magento store, it’s what creates your store differemt from everybody elses. The best approach to skin your site with your possess pattern is to start by regulating a template – a one that we customarily suggest to start with is a central Magento Modern theme, that is easily pre-installed in Magento!

I’m going to go by a integrate of tips for skinning your Magento store, that will assistance we a lot, generally if you’re a beginner.

1) The Main Template Files

If we got to app pattern frontend default yourtheme template page you’ll see a categorical files that we need to revise to get your tradition skinning started.

These files are:

  • 1column.phtml
  • 2columns-left.phtml
  • 2columns-right.phtml
  • 3columns.phtml

And in a /html folder you’ll see:

  • header.phtml
  • footer.phtml

You need to make certain that we have a pattern suitable for during a unequivocally slightest a 2 mainstay and a 1 mainstay layout. This means we need to get your measure right. If we try to squeeze a essence of a 1 mainstay blueprint into a 3 mainstay blueprint you’ll shortly start to see those vast blocks of calm smoke-stack on tip of any other like children’s minute building blocks.

2) 2 Columns Left Right

Believe it or not we don’t indeed need your 2 columns left and right files to demeanour any different. Why not usually keep a sidebar in a same place for both, and usually embody a suitable left or right embody where required? You’ll find that a infancy of pages in your site use a 2 columns-left layout. This includes product pages, patron comment pages, difficulty pages, checkout pages and more. In sequence for these dual columns to co-exist, try to use a measure as below:

2 Column Layout

This will concede your calm to fit easily within a dimensions:

2 Column Layout

3) 1 Column Layout

The 1 mainstay blueprint needs to be good and far-reaching to concede for a far-reaching bucket of calm that needs to fit into it. The transport page, patron login page and several others all need to use a 1 mainstay layout, and if it’s too slight it simply won’t fit. Below are my endorsed dimensions:

1 Column Layout

This will concede your 1 mainstay calm to fit easily within a dimensions:

1 Column Layout

4) 3 Column Layout

The 3 mainstay blueprint is indeed not unequivocally used during all in Magento by default. we consider it’s used for a ‘about us’ page that we get pleasantness of Magento on installation, though zero important. As a outcome we customarily use a 3 mainstay blueprint usually for a homepage and this afterwards allows me to customise this page as most as possible.

I always harp on about a significance of good POS on your shop’s homepage, good if we have a finish leisure of a totally singular blueprint for your homepage, we can character it however we want. The 3 mainstay blueprint is usually 3 columns since it uses both a left and right mainstay includes in a template file. Nothing special here…

Hope this has helped, and happy new year everybody from a Magento Blog!