Prestashop one column homepage - default template modification

Today i want to show you how to create one column homepage in your prestashop default template. With this modification you will have got only one column (wide center column with content) on the hompeage, on the each other pages you will have got all other columns available. Remember, if you're changing the template files mentioned below, make sure that you've got force compilation turned on. All that we do in this tutorial will be related to the modifications of the default theme .tpl files. What does it mean? It mean that we will not change any core file.

How your homepage will looks like

Okay, so for the first we must remove columns from homepage. As i said we want achieve the one column homepage so we must "remove" the left and right columns. In this case we will use simple {if} condition, where we will check what kind of page customer browsing - if homepage - then code will hide the columns, if other - then columns will appear.

Right column | footer.tpl

Open footer.tpl file located in your theme directory: themes/default/footer.tpl. You've got there right column definition:

<div id="right_column" class="column grid_2 omega">
    {$HOOK_RIGHT_COLUMN}
</div>

all we need is to change the code to:

{if $page_name !='index'}
    <div id="right_column" class="column grid_2 omega">
        {$HOOK_RIGHT_COLUMN}
    </div>
{/if} 

As you can see - i added condition: {if $page_name !='index'}. This code means: If homepage is different than index (homepage) then show right column. Easy, don't you think? We have to do the same for the left column.

Left column | header.tpl

Open header.tpl file located in your theme directory: themes/default/header.tpl. You've got there left column definition:

<div id="left_column" class="column grid_2 alpha">
    {$HOOK_LEFT_COLUMN}
</div>

Add there the same {if} condition as I added to the right column before

{if $page_name !='index'}
    <div id="left_column" class="column grid_2 alpha">
        {$HOOK_LEFT_COLUMN}
    </div>
{/if} 

Okay, now you can check how your homepage looks like. As you can probably see -  we need also to change the center column (with content). We have to make it a lot wider, because now the template looks like:

Create wide center column

It's very easy to achieve, in the same file (header.tpl) you've got definition of the center column, the code looks like:

<!-- Center -->
<div id="center_column" class="grid_5">

We have to change the class="" param, value of this param is "grid_5" it means that our center block have got about 535px width. We have to change it to 100%. How? Just use other grid param for the homepage (remember that in other pages we have two columns, so in each other pages the class value must be the same as it is now -grid_5)  Just use this code:

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

I used this {if} condition: {if $page_name !='index'}grid_5{else}grid_9{/if} What does the code mean? If page is different than homepage (!='index') use the grid_5 value, if page is homepage ({else}grid_9{/if}) use the grid_9 param value. grid_9 param defines the width of the block to: 980px, which mean that the template center column will looks like:

That's all. If you've got any questions - feel free to continue discussion in the comments field below.