When I installed Magento and listed a product for the very first time, I was a bit shocked that my homepage remained empty. This was mainly because I was used to shopping carts that didn’t give you much control over the content of your homepage.
You see, most of the others just populate the homepage with newly added products. Magento on the other hand doesn’t do this because the developers took into consideration that most store owners want to customize their homepage.
While some may see this as making things difficult on people, I look at it the other way around… For example, have you ever tried customizing the homepage of a cart that automatically populates the homepage with products? I have and it’s a lot harder than customizing the Magento homepage.
In the video below I show you how to add products to your homepage. I actually show you 2 ways that you can do this. The first way auto-populates your homepage with newly listed items and the other way lets you choose which items are displayed. In addition to adding products, I also show you how to add a banner, customize the heading and edit the meta tags of the page.
Beneath the video you will find the code that I used in the video as well as a written guide on how to add it.
Can’t view the video? Watch it on YouTube
How to add products to your homepage
The easiest way to add products would be by adding a widget.
Simply go to “CMS > Pages”.
Then click on your existing homepage to edit the page.
Then click on the ‘content’ tab.
In the HTML editor toolbar, look for the ‘insert widget’ icon 
and click it.
A window will appear… In that window select ‘catalog new products list’ for ‘widget type’.
For display type, you can select ‘all products’ or ‘new products’. If you select ‘new products’ you will need to make sure that you set dates during the product creation process for the items you want to appear on your homepage. These dates are set in the general section where it reads ‘set product as new from date’ and ‘set product as new to date’.
After populating the rest of the fields in the widget window, simply click the ‘insert widget’ button to add the widget to your page. Click the ‘save page’ button and refresh your homepage. Your list of new products should now be visible on your homepage.
In the video I show you another way to add products, but that way is better explained in the video than it would be here. So if you’re not happy with the widget, I recommend watching the video.
Edit the CSS of your homepage
In the video I edited the CSS of the homepage because I didn’t like the bullets in the UL list which was created by the ‘catalog new products list’ widget. I got rid of those bullets by pasting this block of code In the ‘custom layout update XML’ text area:
<reference name="head"> <action method="addCss"> <stylesheet>css/custom.css</stylesheet> </action> </reference>
I then created a CSS file named ‘custom.css‘ in the directory css which is located in “Skin > frontend > default > default”.
If you’re not using the default template, simply save your homepage with the code above pasted in ‘custom layout update XML’ and visit your homepage on the frontend and look at the source code and search for ‘custom.css’. Then simply look at the path to that file and create your CSS file in that directory.
If you already have an existing CSS file with the same name, you can replace ‘custom.css’ with the name of your choice in the block of code above.
For those of you that also want to remove the bullets, just add this line of code to your CSS file:
ul li{list-style-type:none;}
WYSIWYG image upload fix
For those of you that got the error “the directory is not writable by server.” when trying to upload images, simply create a folder named ‘wysiwyg‘ in your Magento’s ‘media’ directory and make sure that the directory is writeable by the server. I used 777 permissions for the directory.
After adding the directory, remember to close the insert image window and reopen it so that it can recognize that the new directory has been created.