In Prestashop, the homepage will be usually 3 column layout such as left, center, right columns. Sometimes we need to change the layout of homepage according to our design. But unfortunately Prestashop don’t have that option in backend like in Magento.
So we’ve to make some changes in the code.

Prestashop uses Smarty as a templating engine. These files end with an extension “.tpl“. Smarty is good for designers, as it separates PHP code from HTML and also it allows us to reuse code which speeds up the front-end development.

homepage

Here is the solution to change the layout in prestashop. Thanks to Prestashopic for this wonderful article. But unfortunately there are lot of questions in my mind after following this like, “after removing the column I don’t know how to make the center column as full page” and much more. After some research I wrote this article to clear doubts which I had.

Solution to remove left column:

  1. Find header.tpl under themes/{Your theme folder}/header.tpl
  2. In header.tpl, you will find code such that shown below(not that if condition). By deleting that div container with id left_column code, you will remove left column. But that’s not a good idea.
  3. You have to hide only from homepage. So wrap that HTML code with the smarty “if” condition as shown below:
{if $page_name != 'index'}
<div id="left_column" class="column grid_2">
{$HOOK_LEFT_COLUMN}
</div>
{/if}

The above code don’t display left column in homepage alone.

Solution to remove right column:

  1. Find footer.tpl under themes/{Your theme folder}/footer.tpl
  2. In footer.tpl, you will find code such that shown below(excluding that if condition). By deleting that div container with id right_column code, you will remove left column. But that’s not a good idea, as I said before. So just wrap that smarty “if” condition as shown below:
{if $page_name != 'index'}
<div id="right_column" class="column grid_2">
{$HOOK_RIGHT_COLUMN}
</div>
{/if}

But this will only delete left and right column and leave the content center without adjusting itself to whole page. So we’ve to do some workaround to make it work. Wrap the #center_column with the following smarty condition. It checks whether the page is “Home page” and if it is True then it’ll change the class for the div to grid_9 or else it’ll change it to grid_5

{if $page_name == 'index'}
<div id="center_column" class="grid_9">
{else}
<div id="center_column" class="grid_5">
{/if}

This code will be located below Left column code in header.tpl. This code will display your home page in one-column layout. If you want 2-column-left or 2-column-right as your home page layout, then you’ve to customize based on that.

settings

Note: Don’t forget to disable the cache and enable force compilation from Advanced Parameters -> Performance while designing, so the design changes will be visible to you.