How to Add Featured Products to Magento Frontend - Step by Step Instructions

In a pursuit of higher revenue, merchants seek every possibility to increase sales demonstrating wonders of marketing creativity. For instance, how many time you’ve seen highlighted products suggestions usually placed on a store’s homepage?

The display of “Featured Products” panel is an effective and time tested way to bring your customers' attention to products worthy of extra consideration (best-selling, on sale, most recent, etc.) and encourage sales.

Generally, the point of featured products is to ease customer’s choice. Looking at a huge number of products, a customer often gets completely lost in choice and leaves the store without purchase. However, specially highlighted products attract customer’s attention and, consequently, are more likely to be bought.

How to Add Featured Products to Magento Frontend - Step by Step Instructions

Thus, today we’ll learn how to add featured products to Magento store frontend and go through every step of this procedure.

How to Add Featured Products to Magento Store Frontend

Step 1: Create “is_featured” product attribute

We’ll start with the creation a new product attribute for our purpose.

Go to Catalog > Attributes > Manage Attributes > Add New Attribute

Here we’ll define the properties of the new featured attribute we’re creating. These are some default values:

Attribute Properties

  • Attribute Code: is_featured
  • Scope: Store View (we want to enable this attribute only for front end)
  • Catalog input type for store owner: yes/no
  • Default Value: no
  • Unique Value: No (As the same material might be used for several other products)
  • Values Required: No (In case the material for the different products are different)
  • Input Validation for Store Owner: None (if no validation is required select none)
  • Apply to: All Product Types

Frontend Properties

  • Use in Quick Search: No
  • Use in Quick/Advanced Search: Yes (By selecting yes, we enable a faster search on the front end for this attribute)
  • Comparable on Front End: Yes (So that two products with similar value can be compared)
  • Use in Layered Navigation: No
  • Visible on Catalog Pages along the front end: Yes

Settings for Manage Label/Options

  • Default: Featured Product
  • English: Featured Product (Or any other language you use)

Once we’ve made changes in all the mentioned settings above, we need to save the new attribute.

For this purpose, go to Catalog > Attributes > Manage Attribute Sets, and add the newly created attribute to Default attribute set.

How to Add Featured Products to Magento Frontend - Step by Step Instructions

Step 2: Creating a New Block Class

Once the new featured attribute is created, we need to get to the next step - the creation of a new block class which will feature the featured product.

Go to app/code/local/Sttl/Custom/Block and create Featured.php block:

<?php
class Sttl_Custom_Block_Featured extends Mage_Catalog_Block_Product_Abstract
{
           public function gteFeaturedProducts() {
                    $products = Mage::getModel('catalog/product')->getCollection()
                             ->addAttributeToFilter('is_featured', array(1))
                             ->addAttributeToFilter('status', array(1));
                    return $products;             }
}

Step 3: Reverberate Featured Products as HTML

Now, go to app/design/frontend/default/default/template/sttl/custom/ and create featured.phtml:

<?php $featured_products = $this->getFeaturedProducts(); ?>
    <?php shuffle($featured_products); ?>
    <div class="box recently" style="padding-left:15px; padding-right:15px;">
        <h3><?php echo $this->__('Featured Products') ?></h3>
        <div class="listing-type-grid  catalog-listing">
            <?php $_collectionSize = count($featured_products) ?>
            <table cellspacing="0" class="recently-list" id="product-list-table">
                <?php 
                    $i=0; 
                    foreach ($featured_products as $_res): ?>
                        <?php $_product = Mage::getModel('catalog/product')->load($_res['product_id']); ?>
                        <?php if ($i++%3==0): ?><tr><?php endif ?>
                        <td>
                            <div>
                                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
                                    <img class="product-image" src="<?php echo $this-/>helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
                                </a>
                            </div>
                            <p>
                                <a class="product-name" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) 
?>)"
><?php echo $this->htmlEscape($_product->getName()) ?></a>
                            </p>
                            <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                        </td>
                        <?php if ($i%3==0 && $i!=$_collectionSize): ?></tr><?php endif ?>
                    <?php endforeach ?>
                    <?php for($i;$i%3!=0;$i++): ?>
                        <td class="empty-product">&nbsp;</td>
                    <?php endfor ?>
                    <?php if ($i%3==0): ?>&nbsp;<?php endif ?>
            </table>
            <script type="text/javascript">decorateTable('product-list-table')</script>
        </div>
    </div>

Step 4: Add Featured Products to Frontend

Now we need place the featured product box to the frontend. To do this:

Go to CMS > Manage Pages > Homepage

How to Add Featured Products to Magento Frontend - Step by Step Instructions

Place the following code at this location:

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

Congratulations! The featured products are now added to the frontend of your Magento store. Now, enable a good interface and optimize conversion rate by creating an excellent user experience for your customers!

If you are willing to widen functionality, facilitate managing process and enhance shopping flow, consider upgrading Magento. Cart2Cart provides an automated migration service to move accurately and smoothly a vast range of entities between Magento stores (1.x - 2.x): products, categories, manufacturers, orders, taxes, customers, CMS pages among them. Launch an absolutely Free Demo Migration to test the service and obtain a store on the latest Magento version.