A common requirement of e-commerce stores is to display a number of newly added products on the home page; this can be useful for search engines (to encourage new products to be indexed more quickly) and customers who are visiting again to find newly added stock on your website.
Before you start making changes to your theme, ensure that you have a few products marked as "new" within Magento. To do this, log in to your Magento administration panel and navigate to Catalog |Manage Products. From there, select a product that you wish to mark as new. On the General tab, enter date values for the Set Product as New from Date and Set Product as New to Date fields that include the current date so the products are currently marked as "new" within Magento:
Once you have done this, click on the Save button at the top-right corner of your screen. You may wish to add more than one product to the new products list using this method.
Once you have assigned some products in your store to the new products list, open your theme's local.xml file and add the following highlighted XML within the cms_index_index handle:
<cms_index_index> <reference name="content"> <block type="catalog/product_new" template="catalog/product/new.phtml"> <action method="setProductsCount"><count>3</count></action> <action method="addColumnCountLayoutDepend"><layout>empty</layout><count>5</count></action> <action method="addColumnCountLayoutDepend"><layout>one_column</layout><count>5</count></action> <action method="addColumnCountLayoutDepend"><layout>two_columns_left</layout><count>4</count></action> <action method="addColumnCountLayoutDepend"><layout>two_columns_right</layout><count>4</count></action> <action method="addColumnCountLayoutDepend"><layout>three_columns</layout><count>3</count></action> </block> </reference> </cms_index_index>
If you refresh the home page, you will see the products you marked as "new" in Magento's administration panel are now visible, but they are not styled:
Finally, you can apply some styling to the product grid by adding the following CSS to your styles.css file in the /skin/frontend/default/m18/css/ directory:
.products-grid {
border-bottom: 1px solid #CCC;
list-style: none;
position: relative;
}
.products-grid.last {
border-bottom: 0;
}
.products-grid li.item {
border-right: 1px #CCC solid;
float: left;
width: 138px;
padding: 12px 10px 80px;
}
.products-grid li.item.last {
border-right: none;
}
.products-grid .product-image {
display: block;
height: 135px;
margin: 0 0 10px;
width: 135px;
}
.products-grid .product-name {
color: #e57d04;
font-size: 0.9em;
font-weight: bold;
margin: 0 0 5px;
}
.products-grid .product-name a {
color:#203548;
}
.products-grid .price-box {
margin:5px 0;
}
.products-grid .availability {
line-height:21px;
}
.products-grid .actions {
position:absolute;
bottom:12px;
}
.add-to-links {
list-style: none;
font-size: 0.8em;
margin-top: 10px;
}This provides a neater product grid to display your products throughout your Magento store, including the New Products block that now appears on the home page:
