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

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

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

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

So, basically select checkboxes near modules like i show above, after that, scroll page down and press 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

Effect of our transplantation and modifications of settings looks like:

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

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

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

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)

Video overview