CREATING A CUSTOM HOMEPAGE TEMPLATE IN MAGENTO
The majority of e-commerce 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. as it gives you a 3 or 4 useful templates.
1 column, 2 columns left, 2 columns right, 3 columns and So on. So depending on your design, you might need to use the 1 column for your homepage and and the 2 columns left for all your inner pages. But what happens if by chance your product page is also a 1 column layout? Also your homepage template needs to have a load of customisations like sliders, featured products etc etc.
When embarking on a Magento build some people like to use a theme some people like to build from scratch, Im a build from scratch kind of chap but either way this solution is pluggable into anything. As it doesn’t hack into any core files at all and uses a neat ‘local’ module to extend the core template function.
In this tutorial i will be Creating a custom homepage template in Magento, follow this step by step guide to achieve this on your website.
Above is the download with instructions that you can upload via FTP straight into your file structure. (Always backup first).
Below is a breakdown of what we are doing in the files to give you an idea of whats going on and so you can see at a glance if its the right solution for you.
Part 1 – The Home Page Template
As a good starting point I always just use a copy of the code thats in 1column.phtml (or whichever basiclayout you think best fits your design) and copy the code into:
Once you have done this save it and leave it for a bit, you will be revisiting this file to make you changes soon!
Part 2 – Create your template module config.xml.
<?xml version="1.0"?> <config> <modules> <Home_page> <version>0.1.0</version> </Home_page> </modules> <global> <page> <layouts> <homepage translate="label"> <label>Home_page</label> <template>page/homepage.phtml</template> <layout_handle>home_page</layout_handle> </homepage> <!-- add more layouts here --> </layouts> </page> </global> </config>
Place this file here: /app/code/local/Home/Page/etc/… (you may need to create a local folder if this is your first module)
Part 3 – Next tell Magento your module exists
create a file called Home_page.xml
Place the file here: /app/etc/modules/…
And fill it with the following code
<?xml version="1.0"?> <config> <modules> <Home_page> <active>true</active> <codePool>local</codePool> <depends> <Mage_Page /> </depends> </Home_page> </modules> </config>
Part 4 – Add to your CMS Page and edit
Now go to your Magento back end admin. Go to CMS > Pages
Now go to the CMS homepage, you should now have ‘Home_page’ in your ‘layout’ dropdown select it and save your page
Now go back to your homepage.phtml and edit till your hearts content!