How to Create Full Width Image Slider in Prestashop 1.6

Oct 17, 2014

4915 Lena 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:

Igor Dragun

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Igor


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

Brands Slider is an easy and quick solution to show the variety of brands, presented in your store. Follow the link to check it out.

homepage_carousel

Home Carousel

Take your online store to the next level with BelVG extension

Download here
Igor Dragun

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Igor

50 Comments

  1. 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 1.7.2.3

  2. 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; }

  3. 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 ?

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

  5. Hello Lena,

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

    Best Regard´s

  6. 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?

    Thanks
    Best regard´s

  7. Hello Lena,

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

    Best Regard´s

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

  9. 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!!!!!!

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

  11. 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)}
    {$HOOK_RIGHT_COLUMN}
    {/if}



    {if isset($HOOK_FOOTER)}

    {$HOOK_FOOTER}


    {/if}

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

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

  13. 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

  14. 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.

  15. Hello Lena Tsbulenko,

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

    Thanks
    Best Regard´s

  16. 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

  17. Hello Lena Tsybulenko,

    Thanks for sharing.

    do you know if this works on prestashop 1.6.1.5?

    Best resgard´s

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

  19. 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. =/

  20. 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?

  21. Hi Lena !

    First of all thank you for your help !

    I’m using the version 1.6.0.1.4 of Prestashop.

    Can you please take a moment to explain how to do it on this version please ?

    Thank you for your time !!!!

  22. Hi Lena, my code is a bit different than yours, in any case when I copy from down, and paste before , I get the effect as above, however, as I zoom out, the slider off sets to the left. I tried the other line of code in global css file, as you stated in the comments, but still doesn’t work. any ideas would be really helpful. Thanks. below is my relevant header.tpl section

    {if $page_name !=’index’ && $page_name !=’pagenotfound’}
    {include file=”$tpl_dir./breadcrumb.tpl”}
    {/if}

    {capture name=’displayTopColumn’}{hook h=’displayTopColumn’}{/capture}
    {if $smarty.capture.displayTopColumn}
    {$smarty.capture.displayTopColumn}
    {/if}

    {if isset($left_column_size) && !empty($left_column_size)}
    {$HOOK_LEFT_COLUMN}
    {/if}
    {if isset($left_column_size) && isset($right_column_size)}{assign var=’cols’ value=(12 – $left_column_size – $right_column_size)}{else}{assign var=’cols’ value=12}{/if}

    {/if}

  23. NOT NOT….

    add:

    {if isset($HOOK_TOP)}{$HOOK_TOP}{/if}

    {if $page_name !=’index’ && $page_name !=’pagenotfound’}
    {/if}

    {hook h=”displayTopColumn”}

    {if $page_name !=’index’ && $page_name !=’pagenotfound’}
    {include file=”$tpl_dir./breadcrumb.tpl”}
    {/if}

    {if isset($left_column_size) && !empty($left_column_size)}
    {$HOOK_LEFT_COLUMN}
    {/if}
    {if isset($left_column_size) && isset($right_column_size)}{assign var=’cols’ value=(12 – $left_column_size – $right_column_size)}{else}{assign var=’cols’ value=12}{/if}

    {/if}

  24. Hi Lena,

    OMG, Can’t thank you enough for your quick response. It’s working perfect now.
    Once again thank you very much genius girl.

  25. Simri,

    You need to load 1920px picture and set max-slider width: 1920px in the admin panel.

  26. Hi Lena,

    I am here again with my problem.
    I still get exactly the same problem as Angel. I’ve tried to follow the way you do, but still the slider stay to the left, and not elastic (to become full width / 100%).
    This code #top_column, #slider_row{margin:0px; padding:0px;} is working fine, and no more scroll bar on the bottom. Any other suggestion would be very appreciated.
    Thanks

  27. Hi Lena,

    And where to find this code (to avoid the scroll bar)?
    #top_column, #slider_row{margin:0px; padding:0px;}

    Sorry, I’m just very new to this.
    Thanks

  28. hello, After installation of new theme completed,module homepage image slider only posted image on webpage,image not animated or slided,second one-(when click on my shop from dashboard)Theme configurator,Live edit not work

  29. Angel,

    To avoid horizontal scroll use css code:

  30. Hello Lena, thank you for your tip. When I do that, the slider has the whole width of the screen available but it goes all the way to the left of the screen and stays there. I haven’t found a way to make it elastic so that it expands its photos and covers the whole width of the screen.
    When I go to the slider module I can’t let the width field empty and it doesn’t take 100% as a value so I always have to write a fixed amount of pixels for the width. How could I overcome that? Usually with a background you set background-size to 100% on your css and it works like charm but I don’t see how to do it here.
    There must be a way because your FULL WIDTH SLIDER looks perfect in the picture you posted.
    By the way, when I followed your tip, I always get the horizontal scroll bar, because apparently the homeslider width is larger than the screen width.
    If you could help me with these 2 points, it would be very appreciated.
    Thank you.

  31. when I change the code my background color will change.
    why and what should I do?
    Thank you.

  32. What should I do whith this code?
    Can you edit this code for me?
    thank you.

    {if $page_name !=’index’ && $page_name !=’pagenotfound’}
    {include file=”$tpl_dir./breadcrumb.tpl”}

    {hook h=”displayTopColumn”}

    {if isset($left_column_size) && !empty($left_column_size)}
    {$HOOK_LEFT_COLUMN}
    {/if}

    {/if}

  33. Your post is useless I can´t find header.tpl and also the other archive.
    Could you please be more especifi?

Post a new comment

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