How to Create Full Width Image Slider in Prestashop 1.6.x

Default Prestashop 1.6 theme contains fixed-width slider looking like this:

Here is the solution on how to make Image Slider appear in a full width.
First of all you should disable small banners on the right hand side.

Step 1. Log into your PrestaShop admin panel.

Step 2. Go to Modules -> Positions. Search there for modules list named displayTopColumn. You will see there two modules.

Step 3.  Click on edit button near Theme configurator and click on “unhook”. After this action two small baners will disappear.
 

Step 4. Go to  header.tpl  in your theme folder and find this code:

<div id=”slider_row” class=”row”>
<div id=”top_column” class=”center_column col-xs-12 col-sm-12″>{hook h=”displayTopColumn”}</div>
</div>

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:

<div id=”slider_row” class=”row”>
    <div id=”top_column” class=”center_column col-xs-12 col-sm-12″>{hook h=”displayTopColumn”}</div>
</div>
<div id=”columns” class=”container”>
    {if $page_name !=’index’ && $page_name !=’pagenotfound’}
    {include file=”$tpl_dir./breadcrumb.tpl”}
    {/if}
    <div class=”row”>
    {if isset($left_column_size) && !empty($left_column_size)}
    <div id=”left_column” class=”column col-xs-12 col-sm-{$left_column_size|intval}”>{$HOOK_LEFT_COLUMN}</div>
    {/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}
    <div id=”center_column” class=”center_column col-xs-12 col-sm-{$cols|intval}”>
{/if}

Now you should change width of the banner. So

Step 5. Go to Modules->Modules. Search for “Image slider for your homepage” and click on Configure button.

Step 6. In the main “Settings” form change Max width parameter value from 799px to 1920px.

Step 7. Click to Save button.

Step 8.  Remove old smaller than 1920px (width) pictures and upload new pictures with min-width: 1920px (see How to Edit Slideshow).

Here is the result:

prestashop_336x280