Skip to main content

Magento Featured Products Listing on Home Page

Posted Thu, 03/25/2010 - 3:38pm

There are a few articles and extensions I've come across showing how to add "Featured Products" on the home page of Magento. The problem is that none that I have read, seem to fully tackle the issue of being compatible with Magento 1.4.x (Magento 1.4.0.1 at the time of this writing) AND fully using Magento's features while being fairly easy to implement (i.e. without adding complicated, unnecessary,redundant or outdated code)

Anyhow... Here's a fairly simple way you can add a featured product listing using the standard Magento files, which should work for any version of Magento.

In your Magento /admin section:

  1. Create a category as usual (you can put it in any path) and call it, e.g., "Featured Products" and make sure to note the "ID:XX" number. You can set this directory to "Active:NO" if you don't want it to display in your category listing on the front end of your site or just leave it as is. You can leave everything else at the default settings.
  2. Go to each product, that you want to appear under "Featured Products", and edit as usual, but this time put a check mark next to the new directory you created "Featured Products". Do this for every product you want to be a "Featured Product". Easy enough.
  3. Now... go into your CMS --> Pages and select your home page (you can identify which is for the home page, by looking at the url key which would be something like "home")
  4. Click the "Content" tab--switch to HTML editor (non-wysiwyg) and paste in the Content text area:
    <div class="featured-products">
    <h2 class="heading">Featured Products</h2>
    {{block type="catalog/product_list" category_id="YOURCATIDNUMBER" template="catalog/product/list.phtml"}}
    </div>

    since my category id # was ID:36, I would do the following

    <div class="featured-products">
    <h2 class="heading">Featured Products</h2>
    {{block type="catalog/product_list" category_id="36" template="catalog/product/list.phtml"}}
    </div>

    Save, and you're done.... You will be presented with a listing of the "Featured Products" on your home page.

    • side note: you can make a copy of the list.phtml file and name it, e.g. "feature-products.phtml" if you need to make further edits to the listing. Also, if you've upgraded to magento 1.4 , it may be a good idea to copy the latest template file from:
      app/design/frontend/base/default/template/catalog/product/list.phtml

      and paste this into your template directory overwriting the old.

  5. However, if you want it to appear in a grid--i.e. more than the single column, which you will get by default--then all you need to do is edit your CSS file...

    Simply add this to your css file used to style your site (I put my at the bottom of my css file) :

    /* View Type: Featured products, list changed to grid */
    .featured-products { width:100%; float:left; clear:both; padding:0;  }
    .featured-products .products-list { margin:0; padding:0; border:0px solid red; float:left;}
    .featured-products .products-list li.item { list-style:none; list-style-image:none; border:1px solid #D8D9D9; background:#FFFFFF; margin:0 3px 3px 0; width:205px; float:left; height:400px; padding:8px; }
    .featured-products .products-list h2.product-name { margin:6px 0 6px 0; padding:0;   }
    .featured-products .products-list h2.product-name a { font:bold 12px/14px Arial, Helvetica, sans-serif; display:block;}
    .featured-products .products-list .product-image { float:none; }
    .featured-products .products-list .product-shop { float:none; width:auto; margin:0; padding:0;}
    .featured-products .products-list .price-box { float:none;}
    .featured-products .products-list .desc { float:none; font:normal 11px/13px Arial, Helvetica, sans-serif; margin:6px 0; display:block; width:100%; float:left; }
    .featured-products .products-list .desc .link-more { display:block; }
    .featured-products .products-list .add-to-links { display:none; /*i hide this since I don't want to show "compare" link on the featured section */}

    note the critical usage of ".feature-products" class, which we wrapped around the "Featured Products" block in the CMS home page--without that, this won't work, as you don't want to mess with the regular listing throughout the site, you just want to make the list view into a grid view for the "Featured Products" only.

    To change the width and height of your grid, simply change the width and height under
    .featured-products .products-list li.item {}

Alright, then...

That should do it... a pretty simple way to create a "Featured Products" section on the home page of Magento, that should be compatible with any current, past, or future Magento versions.

Comments

Thanks a bunch! This was

by Chris - 03/31/2010 - 7:10pm

Thanks a bunch! This was super easy.

featured products

by cocotu - 04/08/2010 - 2:40pm

hi,
when you say: "Create a directory as usual", do you mean create a category?

thanks..

Yes, sorry about that, I

by duntuk - 04/20/2010 - 3:53pm

Yes, sorry about that, I meant 'category'.

(updated the tutorial)

Hi, this is awesome, but i'm

by balsagoth - 04/25/2010 - 1:54pm

Hi, this is awesome, but i'm trying to change the default number of produts that appear on my homepage. On my categories page's appear 9 products (3x3) but in my frontpage i want to show 12 (3x4). Do you know how i do that?
Thanks a lot.

Hello Thansl a lot, but i

by Desmodromisk - 05/25/2010 - 10:21pm

Hello

Thansl a lot, but i dont manage to get my featured products
to appear in grid how i try.

Regards

It does appear however that

by SEMTruth - 06/02/2010 - 1:16pm

It does appear however that through adding featured products in this manner, the pagination or pager links do not show for category listings with multiple pages. Any ideas on how to get the pagination links to show up when calling a product list in a CMS Block?

showing multiple featured

by K.RaviChandran - 01/05/2011 - 2:41am

showing multiple featured products on home page.

Step1: Create attribute "featured".

Go to admin-> Catalog-> Attributes-> Manage Attributes-> add new attribute:

Attribute Properties

Attribute Identifier: featured

Scope: Store View

Catalog Input Type for Store Owner: Yes/No

Unique Value (not shared with other products): No

Values Required: No

Input Validation for Store Owner: None

Apply To: All Product Types

Front End Properties

Use in quick search: No

Use in advanced search: Yes

Comparable on Front-end: No

Use In Layered Navigation (Can be used only with catalog input type ‘Dropdown’): No

Manage Label/Options

Default: Featured Product

English: Featured Product

Step2: Adding these attributes to attribute set.

After creating attributes, you need to add them into attribute sets, if you use default attribute set (or any attribute set you define), please add these attributes into the attribute set you used. (Below is example for Default Attribute Set).

Step 3:

Go to folder: …\app\design\frontend\default\your theme\template\catalog\product

Create file featured.phtml and add the following code into this file

<?php

//{{block type="core/template" show_total="4" name="product_featured" as="product_featured" template="catalog/product/featured.phtml}}

$totalPerPage = ($this->show_total) ? $this->show_total : 12;

$visibility = array(

                     

Mage_Catalog_Model_Product_Visibility::VISIBILITY_BOTH,

                     

Mage_Catalog_Model_Product_Visibility::VISIBILITY_IN_CATALOG

                 

);

$storeId = Mage::app()->getStore()->getId();

$_productCollection = Mage::getResourceModel('reports/product_collection')

                        ->

addAttributeToSelect('*')   

                        ->

setStoreId($storeId)

                        ->

addStoreFilter($storeId)   

                        ->

addAttributeToFilter('visibility', $visibility)

                        ->

addAttributeToFilter('featured', true)

                        ->

setOrder('created_at', 'desc')

                        ->

addAttributeToSelect('status')

                        ->

setPageSize($totalPerPage);

Mage::getSingleton('catalog/product_status')->addVisibleFilterToCollection($_productCollection);

Mage::getSingleton('cataloginventory/stock')->addInStockFilterToCollection($_productCollection);

Mage::getSingleton('catalog/product_visibility')->addVisibleInSearchFilterToCollection($_productCollection);

?>

Featured Product

<?php
if(!$_productCollection->count()):
?>
<?php
echo $this->__('There are no products matching the selection.')
?>
<?php
else:
?>
<?php
echo $this->getToolbarHtml()
?>
<?php
// List mode
?>
<?php
if($this->getMode()!='grid'):
?>
<?php
$_iterator = 0;
?>
<?php
foreach ($_productCollection as $_product):
?>
<?php
echo $this->htmlEscape($_product->getName())
?>
<?php
// Product Image
?>
<?php
// Product description
?>
<?php
echo nl2br($_product->getShortDescription())
?>
<?php
echo $this->__('Learn More')
?>
<?php
if($_product->getRatingSummary()):
?>
<?php
echo $this->getReviewsSummaryHtml($_product)
?>
<?php
endif;
?>
<?php
if ($this->helper('wishlist')->isAllow()) :
?>
<?php
echo $this->__('Add to Wishlist')
?>
<?php
endif;
?>
<?php
if($_compareUrl=$this->getAddToCompareUrl($_product)):
?>

|

<?php
echo $this->__('Add to Compare')
?>
<?php
endif;
?>
<?php
echo $this->getPriceHtml($_product, true)
?>
<?php
if($_product->isSaleable()):
?>
<?php
echo $this->__('Add to Cart')
?>
<?php
else:
?>
<?php
echo $this->__('Out of stock')
?>
<?php
endif;
?>
<?php
endforeach;
?>

decorateList('products-list', 'none-recursive')

<?php
else:
?>
<?php
// Grid Mode
?>
<?php
$_collectionSize = $_productCollection->count()
?>
<?php
$i=0; foreach ($_productCollection as $_product):
?>
<?php
if ($i++%3==0):
?>
<?php
endif
?>
<?php
echo $this->htmlEscape($_product->getName())
?>
<?php
if($_product->getRatingSummary()):
?>
<?php
echo $this->getReviewsSummaryHtml($_product, 'short')
?>
<?php
endif;
?>
<?php
echo $this->getPriceHtml($_product, true)
?>
<?php
if($_product->isSaleable()):
?>
<?php
echo $this->__('Add to Cart')
?>
<?php
else:
?>
<?php
echo $this->__('Out of stock')
?>
<?php
endif;
?>
<?php
if ($this->helper('wishlist')->isAllow()) :
?>
<?php
echo $this->__('Add to Wishlist')
?>
<?php
endif;
?>
<?php
if($_compareUrl=$this->getAddToCompareUrl($_product)):
?>

|

<?php
echo $this->__('Add to Compare')
?>
<?php
endif;
?>
<?php
if ($i%3==0 && $i!=$_collectionSize):
?>
<?php
endif
?>
<?php
endforeach; $kol = $i;
?>
<?php
for($i;$i%3!=0;$i++):
?>

 

<?php
endfor
?>
<?php
if ($i%3==0):
?>
<?php
endif
?>

decorateTable('products-grid-table');
function setHeight(items){for (i = 1; i <= items; i++ ){document.getElementById('cont_'+i).style.height = document.getElementById('td_'+i).offsetHeight-33+'px';}}
setTimeout('setHeight(

<?php
echo $kol
?>

)', 1000);

<?php
endif;
?>
<?php
echo $this->getToolbarHtml()
?>
<?php
endif;
?>

*

Create Magento Featured Products
Published On: 04 Aug 2010
For an online store, it is essential to have the ability to display and sort your products, and thus support your customers in searching and choosing products. This article shows you how to create these featured products on homepage in Magento.

In this article, I will guide you how to display the featured products on frontent Home Page

Step1: Create attribute "featured".

Go to admin-> Catalog-> Attributes-> Manage Attributes-> add new attribute:

Attribute Properties

Attribute Identifier: featured

Scope: Store View

Catalog Input Type for Store Owner: Yes/No

Unique Value (not shared with other products): No

Values Required: No

Input Validation for Store Owner: None

Apply To: All Product Types

Front End Properties

Use in quick search: No

Use in advanced search: Yes

Comparable on Front-end: No

Use In Layered Navigation (Can be used only with catalog input type ‘Dropdown’): No

Manage Label/Options

Default: Featured Product

English: Featured Product

Step2: Adding these attributes to attribute set.

After creating attributes, you need to add them into attribute sets, if you use default attribute set (or any attribute set you define), please add these attributes into the attribute set you used. (Below is example for Default Attribute Set).

Step 3:

Go to folder: …\app\design\frontend\default\your theme\template\catalog\product

Create file featured.phtml and add the following code into this file

<?php

//{{block type="core/template" show_total="4" name="product_featured" as="product_featured" template="catalog/product/featured.phtml}}

$totalPerPage = ($this->show_total) ? $this->show_total : 12;

$visibility = array(

                     

Mage_Catalog_Model_Product_Visibility::VISIBILITY_BOTH,

                     

Mage_Catalog_Model_Product_Visibility::VISIBILITY_IN_CATALOG

                 

);

$storeId = Mage::app()->getStore()->getId();

$_productCollection = Mage::getResourceModel('reports/product_collection')

                        ->

addAttributeToSelect('*')   

                        ->

setStoreId($storeId)

                        ->

addStoreFilter($storeId)   

                        ->

addAttributeToFilter('visibility', $visibility)

                        ->

addAttributeToFilter('featured', true)

                        ->

setOrder('created_at', 'desc')

                        ->

addAttributeToSelect('status')

                        ->

setPageSize($totalPerPage);

Mage::getSingleton('catalog/product_status')->addVisibleFilterToCollection($_productCollection);

Mage::getSingleton('cataloginventory/stock')->addInStockFilterToCollection($_productCollection);

Mage::getSingleton('catalog/product_visibility')->addVisibleInSearchFilterToCollection($_productCollection);

?>

Featured product (test module)

<?php
$_collectionSize = $_productCollection->count()
?>
<?php
$i=0; foreach ($_productCollection as $_product):
?>
<?php
if ($i++%4==0):
?>
<?php
endif
?>
<?php
echo $this->htmlEscape($_product->getName())
?>
<?php
if ($_product->getSpecialPrice()>0):
?>
<?php
echo $this->helper('checkout')->formatPrice($_product->getPrice())
?>

 

<?php
echo $this->helper('checkout')->formatPrice($_product->getSpecialPrice())
?>
<?php
else:
?>
<?php
echo $this->helper('checkout')->formatPrice($_product->getPrice())
?>
<?php
endif;
?>
<?php
echo $_product->getShortDescription()
?>
<?php
if ($i%4==0 && $i!=$_collectionSize):
?>
<?php
endif
?>
<?php
endforeach
?>
<?php
for($i;$i%4!=0;$i++):
?>

 

<?php
endfor
?>
<?php
if ($i%4==0):
?>
<?php
endif
?>

decorateTable('product-list-table')

Step 4: Display the featured products on frontent Home Page:

You copy and Paste the following code into CMS home page

{{block type="core/template" name="product_featured" as="product_featured" template="catalog/product/featured.phtml}}

Step 5:

Go to admin-> Catalog-> Manage Products-> add new Products:

Input full information for product.

You will see Featured Products on left side: choose Yes. And Save Products.

Now go back to Homepage and refresh. You should see the attribute product you’ve created.

Join each separated code to done that

Very Useful

by Ravi - 04/13/2011 - 2:00am

Very Useful Article.

Thanks
JeevanSathi

Thanks for this. Although a

by Pari - 04/30/2011 - 1:56pm

Thanks for this. Although a bit above me from a technical point of view, this is something that I really need on my site, so shall ask my developer to take a look.

Thank you taking the time to post this.

Pari.

Thank you so much.I was

by DON - 07/08/2011 - 10:17pm

Thank you so much.I was surfing alot on web to get some solution.Finally your post gace me solution:-)

Thank You.You have helped me

by DON - 07/08/2011 - 10:18pm

Thank You.You have helped me

This seems to work, the Issue

by Pream - 10/20/2011 - 11:23am

This seems to work, the Issue I am having is I cannot get the list.phtml file to return any products, I don't want to edit the products.phtml file, I just can't find a way to return products without editing the file

$_productCollection->count () is returning a false which is causing the error message:
There are no products matching the selection

I want to show paging on home

by Rahul - 10/21/2011 - 10:48am

I want to show paging on home page list.
Is that possible ?

Many thanks for this, we

by gloopy - 11/20/2011 - 3:33pm

Many thanks for this, we actually are adapting this to be called Top Posts :)

Find cheap hotels in London.

by MeganStrandsWAE - 11/22/2011 - 5:24am

Find cheap hotels in London. Search over 300 luxury, budget, discount and cheap London hotels. Book your central London hotels online with lastminute Welcome to Harrah's Tunica, the premier in Tunica Entertainment and Tunica Hotel Accommodations. At Grand Casino, we can help you create the perfect Tunica Along the Positano coast there is an impressive number of caves and shelters of Hotel Margherita (Praiano) - Book now and get your best special rate.

Check carnival toys carefully

by MaryTenderLOS - 12/04/2011 - 9:48am

Check carnival toys carefully for loose parts and sharp edges before giving them to your infant. Another choice in the top ten Christmas toys, 2011 is from Lego with the Lego Space Center. You had better get shopping don't you think!

These craft accessories and

by MaryTenderLOS - 12/15/2011 - 5:17pm

These craft accessories and accents for your little girl, comes in sets, can increase their creative side. For the really young girl, a pair of Heathers Treasure Box Pink High Top Sneakers are excellent for causal days while some fun Heelarious Sophie Pink Satin Infant High Heels complement cool baby clothes really well. If your child love the green character then there isn't anything else we can imagine that will be great for him; only this hero sizes mitts.

thanks for helping with

by gloopy - 12/28/2011 - 1:40pm

thanks for helping with showing featured products in magento :)

Post new comment

The content of this field is kept private and will not be shown publicly.