Add Featured Products to Home Page

Last modified by kiatng on Fri, June 25, 2010 11:10
Source|Old Revisions  

This is an old revision of the document!

This article will show you an easy way to display products of your choosing on the home page.

  1. Create a category to contain the featured products. Call it e.g. “Featured” or “Home Page”. Set “Is Active” to No. That way, it won’t display in the catalog menu.
  2. After saving the category, please note what ID it gets. You can see it in the last part of the URL. If the URL ends with catalog_category/edit/id/8/, the ID is 8. On later version, the ID is next to the category name:
  3. Add products for the home page to the new category.
  4. Edit the Home Page (CMS → Manage Pages → Home Page) and add the following content, where 8 should be replaced by your category ID:
{{block type="catalog/product_list" category_id="8" template="catalog/product/list.phtml"}} 

If you want a view that is different from the category lists, you can copy and modify list.phtml and change the path above. Following steps is an example.

Add Bestsellers to Home Page using the best-selling box of Blue Theme

In Blue Theme, there is a sample HTML code in the content box (Admin → CMS → Manage Pages → Home Page) that displays a list of Best Selling Products. You can easily modify list.phtml to reuse the skin of the best-selling box. Adding featured products to Home Page is a matter of clicking to select the required products in the category (Admin → CMS → Manage Categories → Category Products tab) as outlined in the above method and there is no need to mess with the HTML code in the CMS.

  1. Copy the following code to your preferred text editor
    <?php $_productCollection=$this->getLoadedProductCollection() ?>
    <?php if(!$_productCollection->count()): ?>
    <div class="note-msg">
        <?php echo $this->__('There are no products matching the selection.') ?>
    <?php else: ?>
    <div class="box best-selling">
    <?php $_collectionSize = $_productCollection->count() ?>
    <table border="0" cellspacing="0">
        <?php $i=0; foreach ($_productCollection as $_product): ?>
            <?php if($i++%2==0): ?>
            <?php endif; ?>
                    <a href="<?php echo $_product->getProductUrl() ?>" >
                    <img class="product-img" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(95, 95); ?>" width="95" height="95" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
                    <div class="product-description">
                    <p><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></p>
                    <?php echo $this->getPriceHtml($_product, true) ?>
                    <?php if($_product->getRatingSummary()): ?>
                        <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                    <?php endif; ?>
                    <?php echo nl2br($_product->getShortDescription()) ?>
                    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><small><?php echo $this->__('Learn More') ?></small></a>
            <?php if($i%2==0 || $i==$_collectionSize): ?>
            <?php endif; ?>
        <?php endforeach ?>
        <script type="text/javascript">decorateGeneric($$('tr'), ['last', 'odd', 'even']);</script>
    <?php endif; //$_productCollection->count() ?>

    - Name it homelist.phtml and save it in location “app\design\frontend\default\blue\template\catalog\product”, create the folders where necessary

  2. Edit the Home Page (CMS → Manage Pages → Home Page) and add the following content, where 19 should be replaced by your category ID:
<h3>Best Selling Products</h3>
{{block type="catalog/product_list" category_id="19" template="catalog/product/homelist.phtml"}}  

Please note: In order to make this work for more than one block of products with different category IDs on the same page, you need to add the following code at the end of your phtml file(s):

//unset catalog to allow using template for multiple categories on single page

Alternative way:

If you want more in depth way, try to view this post:

If you’re using Magento v1.1.5 or later, you might want to use these code snippets instead: This approach uses core functions instead of using Zend DB to figure out how to build a query statement.