How to achieve this or what feature is it termed in magento.

I need to get scrollable sections something like in below snaps:

1) New products in one section with products

2) Offers in another section

enter image description here

enter image description here

How to achieve the same in front page??


1 Answer 1


Try this,

Download js & css file to this link Link

then add your css and js in your local.xml

<action method="addItem"><type>skin_css</type><name>css/allproduct/owl.carousel.css</name></action>             
                <action method="addItem"><type>skin_css</type><name>css/allproduct/owl.theme.css</name></action>
                <action method="addItem"><type>skin_css</type><name>css/allproduct/owl.transitions.css</name></action>
                <action method="addItem"><type>skin_css</type><name>css/allproduct/slider.css</name></action>               
                <action method="addItem"><type>skin_js</type><name>js/allproduct/jquery-1.9.1.min.js</name></action>
                <action method="addItem"><type>skin_js</type><name>js/allproduct/noconflict.js</name></action>              
                <action method="addItem"><type>skin_js</type><name>js/allproduct/owl.carousel.js</name></action>


    $isActiveFeature = Mage::getStoreConfig('mps_allproduct/featureenable/featureactive');
    $isFeaturewanttodisplaytitle = Mage::getStoreConfig('mps_allproduct/featureenable/featurewantdisplay');
    $isFeaturewanttodisplayaddtocart = Mage::getStoreConfig('mps_allproduct/featureenable/featureaddtocart');
    $isFeaturewanttocompare = Mage::getStoreConfig('mps_allproduct/featureenable/featurecompare');
    $isFeaturewanttowishlist = Mage::getStoreConfig('mps_allproduct/featureenable/featurewishlist');
    if ($isActiveFeature == 1){
            if($isFeaturewanttodisplaytitle == 1){?>
                <div class="slidertitle">
                    <h1> <?php echo Mage::getStoreConfig('mps_allproduct/featureenable/featuretitle');?></h1>
            <?php }?>
        <?php $isFeature = $this->_getProductCollection();
        $isFeatureCount = $isFeature->count();
        if($isFeatureCount > 0){?>
            <div class="owl-sliders" id="owl-feature">
            <?php foreach ($isFeature as $_product){?>
                    <div class="owl-product-item">  
                        <a href="<?php echo $_product->getProductUrl()?>" title="<?php echo $_product->getName();?>" class="product-image">
                            <img class="lazyOwl" data-src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize(150); ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />                
                        <h2 class="product-name">
                            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_product->getName(); ?>
                        <?php if($_product->getRatingSummary()): ?>
                        <?php echo $this->getReviewsSummaryHtml($_product, 'short',true) ?>
                        <?php endif; ?>
                        <?php echo $this->getPriceHtml($_product, true, '-new') ?>

                        <div class="actions">
                           <?php if($isFeaturewanttodisplayaddtocart == 1){
                                if($_product->isSaleable()): ?>
                                    <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->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($isFeaturewanttowishlist == 1){?>
                                        <a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?>
                                <?php }
                                if ($isFeaturewanttocompare ==1){?>
                                        <span class="separator">|</span>
                                         <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?>
                                <?php }?>

                <?php }?>
            <div class="customNavigation">
              <a class="btn prev"> Previous </a>
              <a class="btn next"> Next </a>

        <?php }

            echo "No Feature Product";



        echo '<h2 style="color: red; text-transform: unset; font-weight: bold; font-size: 18px;">Please Enable Feature Product system-&gt;configuration-&gt;All Product Configuration</h2>';

<script type="text/javascript">

    jQuery(document).ready(function($) { 
        var owl = $("#owl-feature");
          pagination : false, //Remove Pagination
          lazyLoad : true, // Lazy Load Product Image
          touchDrag  : false,
          mouseDrag  : false,
          items : 5, //10 items above 1000px browser width
          itemsDesktop : [1000,5], //5 items between 1000px and 901px
          itemsDesktopSmall : [900,3], // betweem 900px and 601px
          itemsTablet: [600,2], //2 items between 600 and 0
          itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
      // Custom Navigation Events


it's my custom extension plz remove unwanted variables

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.