How to Create Full Width Image Slider in Prestashop 1.6

Oct 17, 2014847Lena Tsybulenko
How to Create Full Width Image Slider in Prestashop 1.6

Default Prestashop 1.6 theme contains fixed-width slider. Here is the solution on how to make Image Slider appear in a full width.

First, disable Theme Configurator banners (to the right from the slider). Then go to header.tpl and find this code:

In header.tpl you can see the <div id=”slider_row” class=”row”> is inside the <div id=”columns” class=”container”>.

Bootstrap class . container defines fixed-width. So to achieve the full-width Image Slider take the #slider_row out of the class .container and place it above, like this:

That’s it. Don’t  forget to set slider width in admin panel.

Here is the result:

How to Create Full Width Image Slider in Prestashop 1.6


  1. Lena,

    good tips with the slider width, and very simple too. Problem though, now the whole page got extra 15px wide. Something in the _grid.scss with the slider row, margin-right:-15px. How do I go around this?

  2. Hi, i tried everything you sad and adjut the admin width size and put a image with 1920x but it still not working. It’s the same thing. =/

  3. Please disregard my question – apparently others have had the same problem as well. Followed your tips with the global.css override, thanks!

  4. Hello Lena Tsybulenko,

    Thanks for sharing.

    do you know if this works on prestashop

    Best resgard´s

  5. Hello, Lena Tsybulenko,

    Thanks for your replay.

    I have tried the way sou explain but nothing happens can you please help me?

    Best Regard´s

  6. Hello Lena Tsbulenko,

    I have finally got it. but the full width slider goes all way up how can i solve this?

    Best Regard´s

  7. Demetrio, could you be more specific, it’s not clear what happened?
    Please, add a picture with a problem or a link to the dev website.

  8. Hello, Lena Tsybulenko,

    Thanks for your quick reply, sorry i’ve been doing wrong, now its perfect. but my footer is not full width any more? how can i correct the footer?

    Thanks Best regard´s

  9. Demetrio, just remove class=“container” from the footer tag if you wish a full width footer

  10. Can you show me how the way i did my footer disappeared

    Here ir my original footer.tpl

    {if !isset($content_only) || !$content_only}

    {if isset($right_column_size) && !empty($right_column_size)}

    {if isset($HOOK_FOOTER)}



    {include file="$tpl_dir./global.tpl"}

  11. do not remove all the footer, just words CLASS="CONTAINER" at <footer id="footer" class="container"> so it’ll become <footer id="footer">

  12. Hi Lena!
    I need your help!
    I modified:

    global.css and at the end i paste this: #top_column, #slider_row{margin:0px; padding:0px;}
    the i opened the header.tpl and i paste what you wrote.
    I set 1920px slide image and charge a 1920px image.
    I cleaned cache manually and disabled cache in admin panel but the problem still remain.
    I have slideshow with horizontal scroll bar!!!!!!

  13. Guido, Demetrio,
    I am sorry, but your questions require a long time for description. Could you contact our Support Team at They will try to help you.

  14. Hello Lena,

    Thanks for your help and patience, I wish all the best for you.

    Best Regard´s

  15. Hello Lena,

    I managed to solve the problem, was missing to close the code you wrote, everything is working but I have a little problem. when I see the products I have in store appears at the end of the page.

    can you help me?

    Best regard´s

  16. Hello Lena,

    I managed to solve the problem, now my category´s name appears twice on my web site.

    Best Regard´s

  17. I am so grateful for your blog. Really looking forward to read more. Really Cool.

  18. Bonjour,

    j’ai augmenter mon slider comme vous cela a bien fonctionner mais je rencontre un problème du coup mon menu ne vas pas jusqu’au bout du slider sa s’arrête au milieu de mon site avez vous une solution ?

  19. Lena,

    It worked for me. Thank you a lot!

    One more thing if you can help: there is a gap between the top menu and the image slider. I tried to change the margin-bottom as below. But the image slider started to go underneath the top menu. It seems the height of the container of the image slider is more than that of the actual image I put on the slider. Do you have any idea? Thanks!
    .sf-menu > li {
    float: left;
    border-right: 1px solid #d6d4d4;
    margin-bottom: -3px; }

  20. Lena Tsybulenko and others,

    I’m new to prestashop and sorry if some of my questions will be answered before

    I’m trying to modify presta for my friend and I’m stack

    slider – I manage to follow your instruction but I believe I’m dealing with wrong files, please can you be more specific and tell me where to find this exact header.tpl I managed to find few and none of them is correct one :(

    I’m using PrestaShop

Post a new comment

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