Jump to content
vekia

[TUTORIAL] classic 3 columns theme

Recommended Posts

I've noticed that many merchants asking how to enable / disable columns in new bootstrap template. Many of forum members asking about turning on left and right column like it is in default prestashop 1.5 template.  This is why i decided to create  guide.


 


With this free tutorial you will achieve it easily. Step by step guide with pictures.


 


3-columns-prestashop-1-6.png


 


video overview:



 


 


tutorial here:


classic 3 columns template in prestashop 1.6


 


 


another guides:


classic product tabs in prestashop 1.6


  • Like 9

Share this post


Link to post
Share on other sites

I have noticed in your tutorial (unless I am missing it) that you have made no mention of removing the exceptions from the dsiplayLeftColumn modules. Some of the modules have exceptions that are blocking modules from being displayed, and this occurs especially if someone is upgrading from a previous version.

Share this post


Link to post
Share on other sites

i will list all of these modules, but i have analyse them one by one in BO :)

  • Like 1

Share this post


Link to post
Share on other sites

Great, because judging by many of the posts on the forum, people are clicking display left column and display right column and then clicking all the pages where the columns are to appear and then posting that nothing happens. This is because there are exceptions on some of the modules and oddly on some of them by default, pages like 'product' are listed twice in the exceptions list, and both exceptions need to be removed. :)

Share this post


Link to post
Share on other sites

in fact right column is just empty (in fresh installation) - when they turn right coumn on it is just empty, so it isn't appearing. It's confusing a little :D But i wrote about right column and described whole transplantation process :)

Share this post


Link to post
Share on other sites

this is what i looked for

thanks a million Vekia, personally im fan of you :D

 

may i ask for something?

i want to move slider to the top, like i moved it in 1.5

any idea?

  • Like 1

Share this post


Link to post
Share on other sites

1) go to modules > positions in your back office

2) go to transplant page

3) from first dropdown select "image slider for your homepage", from second select displayTop position - and just save changes

4) go to themes/default-bootstrap/css/modules/homeslider/homeslider.css and change width:66.6% to width:100%;

 

voila ;)

and don't forget to upload images with new width, because default images are too short.

Share this post


Link to post
Share on other sites

you're welcome :)

if you've got any other ideas about tutorials (perhaps you're looking for some solutions?) - just let me know :)

Share this post


Link to post
Share on other sites

Vekia,

 

Hi, in a somewhat related request can you do a tutorial for how to reinstall the original Prestashop modules after updating them to the incompatible ones for version 1.6? I have read all the posts relating to that, uploaded all the original 1.5 modules and still cannot get my URL to launch. I tried to update to version 1.6 and that fixed the launching error, but my purchased template would not display at all, so I reverted to the non-working version. Back office is fine, but I just cannot seem to replace the updated modules with the older ones to get it working, as suggested in the forums.

 

Just thought I would try you, because you have a great understand of the program to say the least. I have been at this for only a couple months and thought I had a good grasp on things until I foolishly performed the update to the modules.

 

Any advice would be appreciated.

 

Best regards,

Share this post


Link to post
Share on other sites

Vekia,

 

Hi, in a somewhat related request can you do a tutorial for how to reinstall the original Prestashop modules after updating them to the incompatible ones for version 1.6? I have read all the posts relating to that, uploaded all the original 1.5 modules and still cannot get my URL to launch. I tried to update to version 1.6 and that fixed the launching error, but my purchased template would not display at all, so I reverted to the non-working version. Back office is fine, but I just cannot seem to replace the updated modules with the older ones to get it working, as suggested in the forums.

 

Just thought I would try you, because you have a great understand of the program to say the least. I have been at this for only a couple months and thought I had a good grasp on things until I foolishly performed the update to the modules.

 

Any advice would be appreciated.

 

Best regards,

 

as you wish: http://mypresta.eu/en/art/issues/updated-prestashop-modules-not-work.html

 

:D

but i think that it's not enough in your case :(

Share this post


Link to post
Share on other sites

i updated article, i added section related to confusing error: "an error occured while updating this meta", with fix of course ;)

Share this post


Link to post
Share on other sites

Nice idea, i will release also my first real video guide today night, or tommorow morning,

waiting for real capacitor microphone  <3 can't wait ! :D

  • Like 2

Share this post


Link to post
Share on other sites

Hi Vekia,

 

Here's my website URL that is not working since updating the incompatible modules: http://designsbyjalex.net

 

I had error messages turned on, so you can see what I am getting. I contacted Prestashop and they said my theme I purchased will be updated in a few days to be compatible with version 1.6. Good news, but I'd like to correct these errors before the update.

 

Can you check it out and point me in the right direction?

 

I appreciate your input.

Share this post


Link to post
Share on other sites

Here's my website URL that is not working since updating the incompatible modules: http://designsbyjalex.net

 

One more item: this is the only error I am receiving in my configuration file too. Am I getting closer to a solution?

 

I appreciate your input.

 

AdminInformation.gif Check your configuration

Required parameters: Please fix the following error(s)


  • Notice: Undefined index: files in /home/desig349/public_html/cache/smarty/compile/5c/09/d8/5c09d808c666cbfa77e750219160de87c913d678.file.view.tpl.php on line 260

Optional parameters: OK

 

AdminInformation.gif List of changed files
Changed/missing files have been detected.
Missing files (1)
  • admin1234/autoupgrade/index.php

Share this post


Link to post
Share on other sites

hello

have you recompiled entire theme after overwriting modules?

Share this post


Link to post
Share on other sites

hello,

 

I want to do the same but with only 2 columns, left and center. It´s possible ?

I did all the steps of the tutorial, except turn on right column, and everything seems fine except the image (slider). Slider does not fill the full width of the center column, has a blank space on the right side, already tried with a larger picture but it's the same.

 

I appreciate your help

Share this post


Link to post
Share on other sites

yes it is

just disable right column for each page on theme preferences page.

change width of the slider to 100%, will work then (now it uses 66.6%)

  • Like 1

Share this post


Link to post
Share on other sites

I have not starting 1.6 yet, but tutorials like this will certainly help me a lot in the future.. Thanks mate.

Share this post


Link to post
Share on other sites

hello,

 

I want to do the same but with only 2 columns, left and center. It´s possible ?

I did all the steps of the tutorial, except turn on right column, and everything seems fine except the image (slider). Slider does not fill the full width of the center column, has a blank space on the right side, already tried with a larger picture but it's the same.

 

I appreciate your help

This did not work for me - image only fills center column not where the 2 top images originally were as though its waiting for the images to be reinserted. Any help appreciated

Share this post


Link to post
Share on other sites

This did not work for me - image only fills center column not where the 2 top images originally were as though its waiting for the images to be reinserted. Any help appreciated

 

sorry for late reply, i was offline over the weekend.

is there any chance to see what you've got right now?

it's a little hard to imagine this problem ;)

Share this post


Link to post
Share on other sites

Great guide Vekia.

worked perfect to me.

you're very welcome :-) glad to hear that my guide helped you a little

Share this post


Link to post
Share on other sites

sorry for late reply, i was offline over the weekend.

is there any chance to see what you've got right now?

it's a little hard to imagine this problem ;)

my website www.chicplus.com.au and www.pppjs.com.au - I had to put the slide images in so it looked ok

Share this post


Link to post
Share on other sites

change: max-width: 779px; to: max-width: 1170px; in

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

and of course upload slides with new resolution (width:1170px)

Share this post


Link to post
Share on other sites

change: max-width: 779px; to: max-width: 1170px; in

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

and of course upload slides with new resolution (width:1170px)

Hi

I want the slider to fit next to the left column not be across the full top. Is this possible ?

Share this post


Link to post
Share on other sites

and you wan to display it on each page? or only on homepage?

QWbzKra.png

Share this post


Link to post
Share on other sites

Did the update by the tutorial mentioned. Seems to work, but have couple questions.

 

1) Something did happen with the Categories. Even selected category is e.g. "B", the highlighted category remains e.g. "a" (it is circled in the attachment). I also do not see the word "Categories", even when I'm in the "home" category. Instead of the word "Categories" I see the name of one of the categories. But, when I'm in the Positions Live Mode - Categories list works just fine.

2) Add to cart button seem to be oversized. Shipping rate button (from presta-changeo module) as well.

 

Any ideas what could be wrong?

post-369270-0-18718000-1396223560_thumb.jpg

post-369270-0-43303600-1396226583_thumb.jpg

Edited by HETPE3B (see edit history)
  • Like 2

Share this post


Link to post
Share on other sites

and you wan to display it on each page? or only on homepage?

QWbzKra.png

Home page only

Share this post


Link to post
Share on other sites

hi, this is not working in version 1.6.0.5 , the slider show as static images. I tried a lotès of thing and cant make it work. please help...all slide image are show one the content page, there is no slider at all....

Share this post


Link to post
Share on other sites

1) Something did happen with the Categories. Even selected category is e.g. "B", the highlighted category remains e.g. "a" (it is circled in the attachment).

Hi, you probably have the same problem with categories described here http://www.prestashop.com/forums/topic/319267-categories-block-looks-like-one-category-is-selected-on-everywhere/?do=findComment&comment=1615431 , Forge issue here http://forge.prestashop.com/browse/PSCSX-1484

Share this post


Link to post
Share on other sites

VEKIA you're my hero again :D

thank you!

any idea how to hook to center column bloc knew products module?

Share this post


Link to post
Share on other sites

you mean that you want to transplant module to the displayHome hook?

Share this post


Link to post
Share on other sites

Got the 3 columns now, just my image slider is HUGE. Look at this screen shot? Any ideas?

 

post-782229-0-13943300-1396981962_thumb.jpg

Edited by ronpfid (see edit history)

Share this post


Link to post
Share on other sites

ronpfid - "Image slider for your homepage" module should be locked on "display Home" positon. 

Share this post


Link to post
Share on other sites

This is a nice tutorial, thanks to Vekia. I transplanted the banner for two columns and is working, Now I just need to know how to change position, I want the banner to display on top of the New Products. I was not able to do it using the Live Positions Edit. 

 

Please Help. 

 

my site is http://pelosuave.com/presta/ 

 

Thanks.

Share this post


Link to post
Share on other sites

It worked, but now i wanted to go back to 1 column or no collumns...It seems that i cant change this anymore?  i did everything in reverse but somehow my modules stay in the right colum, cant even unhook them (it says module is unhooked but then they are not) Even live edit wont work...

 

 

--SOLVED--

OK it was a problem with the cashe system, turning them all off made it work again (only emptying was not enoufgh).

 

 

Hans

www.N-Shop.be

Edited by N-Connection (see edit history)

Share this post


Link to post
Share on other sites

This is a nice tutorial, thanks to Vekia. I transplanted the banner for two columns and is working, Now I just need to know how to change position, I want the banner to display on top of the New Products. I was not able to do it using the Live Positions Edit. 

 

Please Help. 

 

my site is http://pelosuave.com/presta/

 

Thanks.

Hi Vekia. Great tutorial, but now i've the same problem of josebon.  I'm not able to see slider before new product block.

Thanks

Share this post


Link to post
Share on other sites

ronpfid - "Image slider for your homepage" module should be locked on "display Home" positon. 

"Thanks, I'll try that :)

Share this post


Link to post
Share on other sites

Hi Vekia. Great tutorial, but now i've the same problem of josebon.  I'm not able to see slider before new product block.

Thanks

transplant module to displayHome position

also make sure that menu is at the end of list on "displayHome" modules list on modules > positions page in your back office

Share this post


Link to post
Share on other sites

transplant module to displayHome position

also make sure that menu is at the end of list on "displayHome" modules list on modules > positions page in your back office

I try to transplant "New Product" in "Display Home" in my back office but it says that is not possible to transplant this module in this point. I only transplant in "Display Home" the "featured product" but not the new product

  • Like 1

Share this post


Link to post
Share on other sites

ok i see this module donesnt support this hook, in this case it's necessary to modify it

add function to handle displayHome hook, like it is in this addon: new products block

you can even try to use this module and then - paste .tpl file from original module from 1.6

it should work.

Share this post


Link to post
Share on other sites

Hello

On my shop and on Your example image in first post in this topic left column is a bit lower then center and right. How can I make them all in one line?

Share this post


Link to post
Share on other sites

I solved this issue adding inside my custom theme on global.css file (line 379 on my file) :

 

Path : .\themes\your_theme\css\global.css

h3 {
  margin-top: 0; /*18px;*/

Friendly

Share this post


Link to post
Share on other sites

Big thanks. This work (I set 9pix how ever to get same line instead of 0).

 

I have also another problem: I did use this solution to get 3 columns with slider betwen them:
https://www.prestashop.com/forums/topic/450576-how-to-put-the-home-slider-on-the-right-side-of-the-homepage/

(is also mentioned somewere in this topic)

------------------

Make a space around line 604 and add the code below, 
 
 public function hookDisplayHomeTab($params)
     {
      return $this->hookdisplayTopColumn($params);
 
     }
 
then transplant to Image slider for your homepage to displayHomeTab (Home Page Tabs)
Now go to displayHomeTab in Modules, Positions and move the Image Slider to top of list
Now go to displayTopColumn and unhook Image slider 
Your Image Slider will now be in the Center column above the Home tabs
You may want to add some space between left column and bottom you can do that here.
Go to themes/default-bootstrap/css/modules/homeslider/homeslider.css and in the first block of css change the Padding-left and the margin bottom to your liking.
---------------------

and another problem I have is that slider is not directly in center. Space betwen slider and left column is much smaller then space betwen slider and right column.

 

Can You also help me solve this?

 

Share this post


Link to post
Share on other sites

hi! Is there any way to have the classic three columns theme,  keeping  the same time the homepage tabs? For example, if we want to have two categories, new products and featured products.

Share this post


Link to post
Share on other sites

Hi,

 

Thank you very much for this awesome tutorial but it seems there is an issue with the 3 columns mode and some pages. (see images)

 

Is there a way to always keep the 3 columns and fix the display issues ?

 

Thanks !

post-27680-0-86210000-1455395193_thumb.png

post-27680-0-61458800-1455395202_thumb.png

Share this post


Link to post
Share on other sites

Much thanks for this tutoriel, just have a question:

i got my three columns and at the end of the displayhome is my themeconfigurator module.

i search a way to have the themeconfigurator hook full width, so out of displayhome.

can't find a way, can you point me in the right direction ?

 

i try to have the themeconfigurator images just on top of footer, full width, not in displayhome :)

Share this post


Link to post
Share on other sites

Much thanks for this tutoriel, just have a question:

i got my three columns and at the end of the displayhome is my themeconfigurator module.

i search a way to have the themeconfigurator hook full width, so out of displayhome.

can't find a way, can you point me in the right direction ?

 

i try to have the themeconfigurator images just on top of footer, full width, not in displayhome :)

Any chance to find help ? i'm stuck on this  :blink:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More