Featured products act as CTA button for any ecommerce website. In magento, there are many paid extensions are available. But we can easily create our own custom featured product slider on Magento homepage. This feaured products slider can be used on any of frontend page. We just need to add the product which we want to show in the featured products slider and call it in CMS.

In the following featured products slider, we can customize price, descriptions, images etc. without interfering the main store product listings.

Much Talk. Let's move. 

Follow these easy step by step tutorial to create the featured products slider for homepage.

We will create featured products slider in Magento using carouFredSel-6.2.1-packed.js

First, download the carouFredSel-6.2.1-packed.js.

Open /app/design/frontend/CurrentTheme/template/catalog/product/ and Create a featured products block as "featured-products.phtml". Now copy the below code and paste it in .phtml file.

<div class="container">
<div class="row">
<?php $_productCollection=$this->getLoadedProductCollection() ?>
<?php if(!$_productCollection->count()): ?>
<div class="note-msg">
<?php echo $this->__('There are no products matching the selection.') ?>
</div>
<?php else: ?>

<?php // Grid Mode ?>
<div class="what-we-build-home fadeInUp wow animated" style="margin-bottom:45px;">
<h2 class="text-center">Featured Products</h2>
<?php $_collectionSize = $_productCollection->count() ?>
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php if($i++%7==0): ?>
<div class="list_carousel responsive">
<ul id="featProdCar">
<?php endif ?>
<li>
<br />
<div id="featured-product" class="tab<?php echo $i ?>">
<div class="featured-product-body">

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
<center>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(180, 180); ?>" width="180" height="180" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/>
</a>
</center>
<h3><?php echo $this->htmlEscape($_product->getName()) ?><?php echo $this->getPriceHtml($_product, true) ?></h3>
<!--get short description of products----<p><?php //echo $this->htmlEscape($_product->getShortDescription()) ?></p>-->

<p style="border:1px solid "><?php echo $_product->getDescription() ?></p>

</div>

<div class="clearfix" />
</div>
<?php if ($i%7==0 && $i!=$_collectionSize): ?>
<?php endif ?>

</div>
</li>

<?php endforeach ?>
</ul>

<script type="text/javascript">decorateGeneric($$('.grid-row'), ['last', 'odd', 'even']);</script>
<?php endif; ?>

</div>

</div>
</div>
</div>
</div>

Goto /app/design/frontend/CurrentTheme/layout/page.xml and add the following code 

<action method="addItem"><type>skin_js</type><name>js/jquery.carouFredSel-6.2.1-packed.js</name></action>

Make sure it is hooked up after the 

<action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action>

Now simpy add the following script to trigger the slider. The bellow settings is completely customizable. Read the documentation to customize the settings for the featuerd products slider.

<script type="text/javascript">
$j(function() {
$j('#featProdCar').carouFredSel({
responsive: true,
width: '100%',
infinite: true,
scroll: 2,
scroll : {
items : 1,
easing : "elastic",
duration : 10000,
pauseOnHover : true
},
items: {
width: 280,
height: 'auto',
visible: {
min: 2,
max: 4
}
}
});
});
</script>

Login Your Magento Admin and create a featured products category right under the root category. Note the category Id.

Finally we need to call the the above created block using Magento CMS on Homepage.

{{block type="catalog/product_list" category_id="8" template="catalog/product/featured-products.phtml"}}

Assuming you have copied the category Id (in the example category_id is 8), replace the value of 'category_id' with your feature products category. If not goto manage category to find the category Id of featured products.

Basic style goes in your theme's style.css (or in your customCSS.css)

.list_carousel {
width: 360px;
}
.list_carousel li {
font-size: 40px;
color:#fff;
text-align: center;
padding: 0;
margin: 6px;
display: block;
float: left;
}
.list_carousel.responsive {
width: auto;
margin-left: 0;
}
.featured-product-body p{
font-size:14px;
}

All Done. Goto Home page and refresh. If everything is done properly, your featured product slider should be there. If not try clearing cache and refrsh again.


Similarly, we can create the the same featured slider by using Owl carousel , Bxslider or Slik carousel . Choose as per your requirement.

Do let us know if any issue.!