Tuesday, 3 June 2014

Full width image slider for your homepage

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


full-width-slider


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


1-unhook-theme-configurator-from-theme-configurator


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


2a-image-slider-full-width-prestashop-1-6


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)


2b-remove-slides-imageslider


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 :)


New slide uploaded to website


2c-upload-new-images-correct-size


effect of our modifications: full width slider in prestashop 1.6


0-slider-full-width-prestashop-1-6


 


 



Full width image slider for your homepage