How to add left and right columns like in prestashop 1.5?

2014-03-22 columns, left, right, template, theme

In this tutorial i want to show you how to modify the default bootstrap theme (in prestashop 1.6) to looks like default theme in prestashop 1.5.  As you probably already noticed - default bootstrap theme doesn't use columns like prestashop 1.5. In this guide i want to show you how to turn on columns on each page of new 1.6 version. We will not modify any file, all of this you can do in back office.

 

Log in to back office...

Ok, so we cant start now. Please log in to your back office and go to preferences > themes tab. You will see there list of your themes. By default there is only one template named "default boostrap". (1) Enable right column - just click on it, and (2) click on edit button.

 

preferences > themes page in back office

prestashop 1.6 default theme columns right left

 

After clicking on edit button (2) you will be redirected to theme settings page. You can manage your theme there like enable columns, disable some modules etc. Please enable left and right columns for each listed page. If you want, you can disable right column for "login" and all "order" pages - like in prestashop 1.5 theme. If you see this error: an error occurred while updating this meta, please open this guide and follow all instructions form this article.

 

 

columns theme configuration in prestashop 1.6

columns in prestashop 1.6

 

 

Moving  modules...

Now because in prestashop 1.6 by default right column hook is just empty, we have to transplant some modules to this position. But firstly - we have to unhook these addons from original position (left column). In this case please go to modules > positions tab in your back office. Then search for "displayLeftColumn" modules list and for example, remove  from this hook 3 modules: our stores block, specials, new products block. Of course you can remove any other module you want. We will transplant these modules to right column.

 

unhooking prestashop modules from left column

left column presatshop remove modules

 

So, basically select checkboxes near modules like i show above, after that, scroll page down and press button:

unhook module prestashop

 

 

 

transplant module button

Transplanting modules

Ok, we already unhooked several modules from left column. It's time to move them to the right column So, please click on transplant button located in top right section of modules > themes tab in your back office. After clicking on it you will see form to transplant module to new position. 

 

From modules list select module that you unhooked (or any other module you want) and from second dropdown select dispalyRightColumn (Right column blocks) hook, like i show on image below. Do the same for all modules you want to display in right column.

 

transplanting modules in prestashop 1.6

transplanting module in prestashop 1.6

 

 

Effect of our transplantation and modifications of settings looks like:

sliders prestashop

 

 

Transplaning slider and removing the banners...

As you probably noticed, we have got slider and banners above our columns (btw. you probably see that it works! we have got three columns now, like we have in default 1.5 template). So now we have to move slider to the displayHome hook (between columns) and remove unwanted banners. In this case, we have to back to modules > positions tab. Search for displayTopColumn modules list and remove all (two addons) modules from this list, like i show below:

 

displayTopColumn modules list prestashop 1.6

displayTopColumn hook presatshop 1.6

 

 

Homslider between columns

Okay, now it's time to transplant homeslider module to displayHome hook. In this case click on transplant button, you will see the form to transplant module (you saw it before!). From first dropdown (module) select: Image slider for your homeapge, and from second dropdown select "displayHome (homepage content)" - not displayHomeTab!.

After that go to modules > postions again, search for "displayHome" modules list and change position of image slider for your homepage module. Move it to the top of the list, like i show below. unhook from this postion modules: Theme configuration, facebook block, custom CMS information block.

image slider for your homepage - first on list

iamgeslider homepage prestashop 1.6

 

 

Unhooking modules from homepage tabs

Now it's time to unhook modules from homepage tabs feature. (new arrivals, popular, best sellers). So go to modules > positions, search for dispalyHomeTab + displayHomeTabContents modules list and unhook all modules from these lists:

 

unhooking modules from displayHomeTab and displayHomeTabContents hooks in prestashop 1.6

displayHomeTab prestashop 16

 

 

Transplanting homepage featured modules to displayHome hook..

It's last step in this guide. Go to module transplantation page and transplant module: Featured products on the homepage to displayHome hook... Now open file: /themes/default-bootstrap/css/modules/homeslier/homeslider.css and change width param to 100%, like on examples below:

#homepage-slider {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 14px;
  width: 66.6%;
  max-width: 779px;
  max-height: 448px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  float: left; 
}

to:

#homepage-slider {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 14px;
  width: 100%;
  max-width: 779px;
  max-height: 448px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  float: left; 
}

 

and.. voila!  that's all, now your theme will looks like modern version of 1.5 release!

 

 

final effect (click on image to enlarge)

3 columns left right prestashop

 

 

Video overview

 

 

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