How to Create Slider for Homefeatured Products in Prestashop 1.6

January 28, 2015 Lena Tsybulenko Prestashop
How to Create Slider for Homefeatured Products in Prestashop 1.6

Prestashop 1.6 includes bxSlider and it is used in Homeslider module. It is possible to apply it for other modules. In this article I’ll describe how to create slider for homefeatured products, blocknewproducts and top-selling products module on homepage.

Open homefeatured.tpl, blocknweproducts-home.tpl, blockbestsellers-home.tpl files from your theme directory.

Find the code:

We’ll create class for example .bxslider-hometabs for this included product-list.tpl, like this:

Then open your .js file, for example global.js and define settings for this slider:

Set slide width, number of slides, margin, controls.

It’s almost done, you just need to fix css. Set clear:none for the li.first-in-line and li.first-item-of-tablet-line in order to avoid the break of product list:

To achieve correct tablet and mobile view I used paddings between slides.

Here is my result.

How to Create Slider for Homefeatured Products in Prestashop 1.6

The same way we can create slider for blocknewproducts module in category, like that:

Open file blocknewproducts.tpl. Find the code:

Create id for this list:

Then set slider settings in .js file:

That’s it. See the result in the category.


  1. Hi, thanks for this mod,, works fine.. only one question.. how to add auto play to this sliders?
    Thanks anyway

  2. Hello

    can you please tell me in which .js file i need to enter code and where i need to enter above code and also in which css file i need to change the code.

    Thank you

  3. Hemal,

    In global.js you need to enter the code:

    CSS code:

    enter it in global.css

  4. Hi Dear

    Unfortunately this line
    {include file=”$tpl_dir./product-list.tpl” id=’homefeatured’ class=’homefeatured tab-pane ‘ }
    doesn’t exists in this files
    fblocknweproducts-home.tpl, blockbestsellers-home.tpl
    in theme module folder .
    could please explain more about it .

    I just edited homefeatured.tpl ,global.css and global.js and slider appeared Incompletely it seems i doesnt work well on Homefeatured Tabs.
    Is it possible to have this option on HomeSlider Tabs ?

  5. hey awesome tutorial . it works. im newbie .. can i change next and prev button with fontawesome or image? please

  6. Tried your result page on my tab and it does not scroll to “New products” section. swithing to mobile view the whole phone wrapper scrolls up and down. Any page i can test on my mobile phone?

  7. It works! just be careful on where you paste the .js code and where you place the brackets )};…..

  8. Hi, tabs in home not working. If i have bxslider then tabs error.
    Do you test this solition for active and deactive tabs? Sorry for my english.

  9. Hi,
    Great tutorial…


    The titles all stay like the tabs
    Ex: i have Specials Best Sellers and New Products
    Then all the sliders

    When i should have:

    Best Sellers

    New Products

    Can you help me fix this?

  10. in presta blocknewproducts slider not works, homefeatured is OK .. any help

Post a new comment