Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

How to show featured products in HOMEPAGE in Magento

You can add featured products in HOMEPAGE as following.


Go to Catalog > Manage Attributes and add a new attribute. Enter featured_product as Attribute Code. Change Catalog Input Type to Yes/No. In the left column click on Manage Label / Options and enter something like Featured Product as label. Click the Save button.

Now that we have a new product attribute to mark the featured products, we only need to add it to an attribute set so it actually appears as an option when we edit a product. Go to Catalog / Manage Attribute Sets and edit the attribute sets that you are using for your store. If there is only the default one, edit the default one. The right column is a list of unassigned attributes – drag featured_product into the middle column and place it where it makes sense. Now save the attribute list.

When you edit a product now, you will find a new attribute Featured Product. Edit a couple of products and set it to Yes.


Your templates directory should be something like

"app > design > frontend > default > yourtheme > template"

yourtheme is the name of your Magento theme. Create a new directory custom inside the template folder. Inside this directory create a new file featured.phtml and copy the following code:

<div id="home-featured">
<div class="page-title featured-title">
        <h3><?php echo $this->__('Featured products') ?></h3>

// some helpers
$_helper = $this->helper('catalog/output');
$storeId = Mage::app()->getStore()->getId();
$catalog = $this->getLayout()->createBlock('catalog/product_list')->setStoreId($storeId);

// get all products that are marked as featured
$collection = Mage::getModel('catalog/product')->getCollection();
array('attribute' => 'featured_product', 'eq' => true),

// if no products are currently featured, display some text
if (!$collection->count()) :

<p class="note-msg"><?php echo $this->__('There are no featured products at the moment.') ?></p>

<?php else : ?>

<div class="category-products">

$_collectionSize = $collection->count();
$_columnCount = 4;
$i = 0;

foreach ($collection as $_product) :
$_product = Mage::getModel('catalog/product')->setStoreId($storeId)->load($_product->getId());


   <?php if ($i++%$_columnCount==0): ?>
   <ul class="products-grid">
   <?php endif ?>
       <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
           <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
           <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
           <?php if($_product->getRatingSummary()): ?>
           <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
           <?php endif; ?>
           <?php echo $this->getPriceHtml($_product, true) ?>
           <div class="actions">
               <?php if($_product->isSaleable()): ?>
                   <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $catalog->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
               <?php else: ?>
                   <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
               <?php endif; ?>
               <ul class="add-to-links">
                   <?php if ($this->helper('wishlist')->isAllow()) : ?>
                       <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                   <?php endif; ?>
                   <?php if($_compareUrl=$catalog->getAddToCompareUrl($_product)): ?>
                       <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                   <?php endif; ?>
   <?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
   <?php endif ?>

<?php endforeach ?>

        <script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>


<?php endif ?>



Now that we have a template for featured products, we need to add this new block to the homepage. Go to CMS > Pages and edit the Homepage. In the left menu go to Design and enter the following into Layout Update XML:

<reference name="content">
<block type="core/template" name="home-featured" template="custom/featured.phtml"/>

Please support us, Like us on Facebook.

  1. Well done, thanks for the tutorial. Thing to note, for some reason the prices are not loading for me. Pretty weird since the code is the same as the original product output.

  2. Alrighty, I found a solution to the problem.

    Around line 56: instead of 'echo $this->getPriceHtml(...);'
    use this instead:
    '$theProductBlock = new Mage_Catalog_Block_Product;
    echo $theProductBlock->getPriceHtml($_product, true);'



Copyright @ 2017 HKBlog.