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.

Check also How To Create Featured Products Slider in Prestashop 1.7.



20 comments

  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…

    Problem:

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

    When i should have:
    Specials
    Slider

    Best Sellers
    Slider

    New Products
    Slider

    Can you help me fix this?

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

  11. Hello Lena,

    i’m interested with your tutorial.i want make it in prestashop 1.7.
    can you tell me where i can find link homefeatured.tpl, blocknweproducts-home.tpl, blockbestsellers-home.tpl in presta 1.7.
    thanks before … nice to know you :)

    Thank you

  12. Hi Enda,
    thanks for the question!
    In Presta 1.7 the process is different indeed. But… Right now we’re writing the new article about it! Subscribe to our blog to stay tuned :)

  13. Thank you. This information is very useful.
    I changed code for home featured product and it is nicely working on Android mobile phone browsers (chrome and default browser). But when I open same site on desktop having browser (firefox, chrome or opera) slider works well till the time I do not hover mouse on the products in slider. As soon as I hover move over products in slider that area becomes grey and remains grey. Every such other products area becomes turns to grey after mouse hover on them all.

    Please suggest me some key point to solve this issue.

  14. Hello, Amit!
    Unfortunately, it’s hard to answer your question without any investigation. I can just suppose that you have a mistake in styles.
    Please, write to our support department to request the detailed inspection: store@belvg.com. We’ll be happy to assist.

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *