Featured products with Magento in 3 easy steps

One of the most popular features for online shops is to have a list of featured products on the homepage. I’ve set up quite a few eCommerce sites with Magento so far and always had to implement it myself since Magento doesn’t support it out of the box. Of course I could use a plugin, but the more independent solution is to do it myself. Fortunately it’s quite easy to implement.

The following tutorial aims at people who know how to use Magento and who know how to create and modify themes. Beginners beware, it may not work to just copy the code, you need to modify a few parts to suit your own Magento installation. Everything was tested with 2 separate installations of Magento CE 1.4.1.0, but chances are it will work with older versions as well.

1. Add a new attribute

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.

2. Create the template for featured products

Your templates directory should be something like

app > design > frontend > default > mytheme > template

mytheme 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>
    </div>

	<?php
		// 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();
		$collection->addAttributeToSelect('featured_product');
		$collection->addFieldToFilter(array(
			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">

	<?php
		$_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; ?>
	                </ul>
	            </div>
	        </li>
	    <?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
	    </ul>
	    <?php endif ?>

		<?php endforeach ?>

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

	</div>

	<?php endif ?>

</div>

If you’re a Magento expert you’ll notice quickly that this is essentially copied from the default Catalog / Products / List template. Important are only the first lines where the products are loaded. From line 40 on you can customise the product display to your likings, the code is only an example for how to load all products with a specified attribute and loop through the collection.

3. Add a new block to the homepage

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"/>
</reference>

If you already have other blocks listed there, you may need to add a position parameter like before or after to put the featured products in the right place. In general there are a lot of things you may need to adjust to suit your design and installation, but this goes beyond the scope of this small tutorial. If you’re a Magento beginner I strongly recommend looking at the layout XML files and templates of the default template to get an idea on how things work.