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.
Download “HomePage.zip”HomePage.zip – Downloaded 3069 times – 6 kB
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:
/app/design/frontend/default/YOURTHEME/template/page/homepage.phtml
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!