How to Create Full Width Image Slider in Prestashop 1.6

Oct 17, 20141662Lena 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



49 Comments

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

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

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

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

  5. Angel,

    To avoid horizontal scroll use css code:

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

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

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

  9. Simri,

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

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

  11. 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}

  12. 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}

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

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

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

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

  17. Hello Lena Tsybulenko,

    Thanks for sharing.

    do you know if this works on prestashop 1.6.1.5?

    Best resgard´s

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

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

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

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

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

Post a new comment

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