How to Create Full Width Image Slider in Prestashop 1.6

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



47 comments

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

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

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

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

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

  6. Hello Lena Tsybulenko,

    Thanks for sharing.

    do you know if this works on prestashop 1.6.1.5?

    Best resgard´s

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

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

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

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

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

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

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

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

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

  16. Hello Lena,

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

    Best Regard´s

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

  18. Hello Lena,

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

    Best Regard´s

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

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

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

Post a new comment

top