Full width slider in prestashop 1.6

Full width slider in prestashop 1.6

In this tutorial i want to show you how easily you can change the way of how homeslider appears in default-bootstrap template in PrestaShop 1.6. As you know default homeslider module is a part of homepage of your shop. It appears right below the main menu. Near the module (on right hand side) you can see two small banners. In this guide i will show you how to remove these banners, and how to change width of slider to 100%.

How to change full width to 100%

In guide related to prestashop 1.5: homeslider to top ful width we had to change a lot of things in prestashop files, like stylesheet, like template file and also module core (to support new hook). In prestashop 1.6 we can achieve all of this without touching files. We can do everything in back office with available settings and features. Awesome!

Disable to small banners on the right hand side

First step in our modificaiton: we have to remove two small banners on the right hand side of the main slider. These images are a part of "theme configurator" module and to remove these banners we just have to disable this module. But be aware, don't disable module at all, just disable it in hook named displayTopColumn. In this case go to modules > positions tab in back office. Search there for modules list named displayTopColumn. You will see there two modules (by default there are two modules). Click on edit button near theme configurator and click on "unhook", exactly as i show on image below.

Unhooking theme configurator module from displayTopColumn position

After this action two small baners will disappear but they will left blank empty space. So we have to fill this blank space with our slider module. Then it will have full width :) 

Change width of the banner

Go to modules > modules tab and search for "image slider for your homepage" addon. Click on configure button near this module and then - you will be redirected to module configuration page. In the main "settings" form change Max width param value from 799px to 1170px (just type 1170 in this field exactly as i show below). Wondering why 1170? 1170 is a width of the main page container.

changing width of the default home slider module from 799 to 1170

Removing banners with width smaller than 1170

Due to the fact that we changed width of the slider window, we have to remove old smaller than 1170px (width) pictures that we uploaded. We have to upload pictures with min-width: 1170px; On screenshot below i show how to remove actual slides. Below the "settings" form (where you changed width of slider) you can manage already uploaded slides. Just hit on delete button like i show:

removing default slides with old small width value (799)

Upload images with new sizes

If you removed all old slides with wrong width - now it's time to upload new pictures. So, you have to prepare own slides for example in photoshop or other desktop software. Create slides with width at least 1170 and upload them to slider. They will appear as a "full" width slides, like i show on effect image at the bottom of this article. After upload new slides - don't forget to Enable them :) You can download example of image with 1170 width here: download picture

New slide uploaded to website

effect of our modifications: full width slider in prestashop 1.6