Creating Custom Homepage Template and Magento
- Posted by: Hiren Ponkia on 03 Oct, 2015
We have requested to create custom homepage template for Magento site. It is also really useful to give different look and feel of static pages of Magento site.
The most of Magento Websites you will come across the homepage is normally a different type of layout to the rest of your pages. Magento by default does cover this quite well by different templates like 1 column, 2 columns left 2 columns right, 3 columns etc…
So most of the designer chooses to have 1 column for homepage and the 2 columns left for all your inner pages depending on design. But in our case product page is also a 1 column layout. Also Homepage template has a load of customisations like sliders, featured products etc.
In this article, we will learn how to create custom homepage template and other CMS pages templates in Magento and we’ll look at the rendering of layout files.
What Is the Template File?
As the name suggests, these template files hold the markup for each Magento blocks that are being displayed in the frontend reside in in app > design > frontend > interface > theme > template.
Create NEW Custom Template File
To create a new template, first we need to create .phtml file.
Go to app > design > frontend > interface > theme > template > page folder and create .phtml file (i.e homepage.phtml)
Copy content from 1column.phtml (as it holds the most essential parts of the theme (i.e., HTML Head, header, footer, main menu, etc.) and paste on homepage.phtml
Now you can do all customization which you want to show on Home Page only on homepage.phtml
Create local.xml File
Create the local.xml inside your theme’s layout folder (app > design > frontend > interface > theme > layout) and add following code.
page/homecolumn.phtml
Assign New Template to CMS Pages
Go to Magento Admin > CMS > Pages and Select Home Page. In Design Tab, Your template file will be visible there, select “Home Page Template” from dropdown and save.
You can also assign same template to any other CMS page.
Clear cache, and check your homepage.
In this post, I have attached the local.xml code that we have created.
