Creating featured product slider on homepage

Featured products act as CTA button for any e-commerce 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 featured 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.

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

We will create featured products slider 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 just after the jQuery

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

Now, simply add the following script to trigger the slider. The bellow settings is completely customizable. Read the documentation to customize the settings for the featured 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>

Finally, we need to call 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 go to 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 refresh again.

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

Do let us know if any issue.!

Tags - Magetno 1.9