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 default bootstrap prestashop 1.6

 

 

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

unhook theme configurator for prestashop

 

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

homeslider configuration page 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)

remove slides prestashop 1.6

 

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

new slides with correct width

 

 

effect of our modifications: full width slider in prestashop 1.6

full width slider in prestashop 1.6

 

author milos myszczuk
Article by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation
1.4 version 1.4.11 1.6 404 addon admin advertise ahref ajax alpha animation api app application authentication back office backup badge banner basics block bootstrap button cache carrier cart catalog category certificate changelog chat class clear client clip cms code colors columns comments configuration contact container content controller cookie counter country coupon css csv currency customer dashboard database debug default delete delivery desktop developer device disable discount displayNav displayTop download dynamic editor effect empty encrypt engine error exchange exclude export facebook faceshop fade fancoupon fancybox fanpage fatal feature feed field file fix fixed font footer free friendly url front ftp full gallery generate gift global godaddy google google+ gray grid groupon header help hide highlight homefeatured homepage hook hosting hover howto htaccess html html5 ID image import include input instagram installation integration iPhone issue javascript jquery kgb knowhow languages law left likebox link list livingsocial loading log login logo loyality mail mailing maintenance manufacturer marketing marquee mcrypt menu meta mobile modification module movie moving multilanguage multiupload must have mysql news newsletter notification number open graph order override page password performance PHP phpmyadmin picture pinterest plugin popup post prestashop prestashop 1.0 prestashop 1.1 prestashop 1.2 prestashop 1.3 prestashop 1.4 prestashop 1.5 price rules problem product profile promotion proslider purifier quantity query quick tip random rates register reinsurance release reporting reset responsive restore results ribbon rich text right sales search security seo service shadow share shipping shop shopmania slider smarty social networks SQL SSL statistics stock store style subcategory superuser support switcher tab tablet tag tax template text theme tinyMCE tips and tricks tpl tracking translations tree trends trigger tumblr tutorial twitter update upgrade upload variables video visits voucher vulnerability web2print wide widget width window wishlist wysiwyg youtube zip zopim