Specifying the number of columns for each Prestashop page

In today’s tutorial we will see how to specify which columns to show for each page our our prestashop store.

The $page_name variable

In Prestashop, every page has a name. Okay, sounds ridiculous put in this way. However, it simply means that each page of your Prestashop store has a unique identifier that can help you target that and no other page specifically when you want to modify the template?

It is utterly simple to know the name for each page. Reach the page you want, hit f12 to bring up the developer console of your browser and inspect the html source. Look for the tag and its ID, that’s the page’s name!

Inspect the page name in Prestashop

If you have a look at header.tpl, you’ll see where that name is pulling from as well:

<!-- <body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}  -->

Therefore, you can see we can target both the specific page id and use that $page_name variable in the template as well. We can therefore have 2 ways (actually 3, if you considered the mixed one), to bend Prestashop to our needs: hard-editing the tpl files, or targeting the page id from CSS.

Varying the column layout in Prestashop – the TPL way

For this first example, we will see how to remove all columns from the homepage, and leave the left one only in the CMS pages. This TPL-only way has its disadvantages, which we’ll discover soon enough.

Open your header.tpl file, and locate

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

Note: I’m using the default template, yours might be different.

CHange it as follows

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

Explanation: it simply means: if this is not the homepage, show me the left column. So, if we are currently viewing the home of our web store, that column won’t even be rendered. As soon as you refresh your homepage, and that only, your left column will be gone.

Now, we need to consider the center column’s width. In the default template, columns widths are defined by the so-called Prestashop grid, which is a 9-columns based wireframe system. Thus, if we want the center column to span across the entire site’s width in the homepage, we need to change its class to grid_9…but for the index only!

Look for

<div id="center_column" class=" grid_5">

And change it into

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

Save&refresh. Your right column will be sent to next line. Again, for the homepage only. If we are not currently seeing the index, our center_column will still have a class of grid_5.

Right away, you can see the first issues that arise with this method. If you have custom modules which are set to a fixed width, or in any case are configured to span across the usual center column width, you’ll need to edit those too, and take the new with into account. This is also true for the featured products block as you can see the fifth element is stuck to the fourth. This happens because there is a variable set in homefeatured.tpl, which takes only 4 items per line. You can change it to account for the new size of course. And indeed, the slider up there needs bigger images!

After changing the tpl grid class in Prestashop

Let’s get rid of the right column to complete our homepage. Open footer.tpl and change

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

To

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

There it is, homepage completed!

Moving onto the CMS pages layout, we can simply amend our previous changes and take the page_name ‘cms’ into account. So, to hide the right column:

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

Then, to extend our center column, back to header.tpl:


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

Explanation: alpha and omega. If you are wondering why I added ‘omega’ to this last block, instead of simply leaving grid_7 (which is, 7 columns over a total of 9, considering we still have the left column there), it’s because of margins. All blocks but grid_9 have a margin; adding alpha will kill the left margin, adding omega will kill the right one. This way, all blocks will fit into their space like puzzle pieces.

Varying the column layout in Prestashop – the CSS way

Using the previous method is certainly effective, and it’s okay on most pages. However, in some pages, like the checkout using one-page-checkout, it will simply fail. No matter what you’ll do, your center column will never cover the whole space. This is because on certain pages prestashop assigns a fixed width to the template. Here is an example taken from global.css

#order-opc #center_column {
	width: 757px;
}

As you can see, it has a fixed width. In addition, notice how we can actually target the specific page and change the width (and more) using css, since that ID is nothing but the $page_name. Let’s open up global.css located at themes/themename/css/. Look for the line I mentioned above. Now change it to

#order-opc #center_column {
	width: 980px;
}

Refresh, and you’ll see the center column taking up all the space all of a sudden. It’s then time to hide the right column. Note that this will simply hide it, and the actual html will still be parsed. Add this right after the previous modifications

#order-opc #right_column {
	display:none
}

There, the right column’s gone!

The mixed way

The first method we saw is cool since it will not render part of the template (though hooks will still be processed because they are assigned in a controller, perhaps a subject for some new tutorial? Let me know). However, as we saw it is useless in some pages. On the other hand, while it’s really easy to edit css, those blocks we hide are…uh, only hidden! What about going for a mixed way? You can try it yourself on the product page. Add the code to remove the left or right column (or both). Then, open up product.css and look for #pb-left-column and #pb-right-column. Change their size to account for the new space, but bear in mind their names are actually inverted!.

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

  • andreas

    again, thanks alot nemo… easy to follow tuts for noobs like me. been trying to make a blog with 2columns while other pages 3columns. these help me alot of time. you’re the best

  • Konrad

    Hi!
    Nice tut. Thanks. But how to recognize all “$page_name” names? i have found:
    category
    product
    order
    cms
    authentication
    payment

    But how the my-account page is called? Anybody?

  • http://enora.josse.free.fr Eno

    Hi, and thanks for this article.

    As you said, there is still some stuff processed on the server if you simply add an {if} statement in the header.tpl. So yes, this should be a subject for a new tutorial :)

    I’m pretty new to Prestashop, and while this previous method seems simple, I read somewhere that you can add an if statement directly in the header.php and footer.php files, something like :

    if (in_array($page_name , array('index'))) $smarty->assign('HOOK_RIGHT_COLUMN',Module::hookExec
    ('rightColumn'));

    But in Prestashop 1.5.6, there is nothing in these two files, so I looked into FrontController.php (maybe not the right place ?) and around line 426 there are some hooks defined, but I have no idea how to alter them to display only on such and such pages. Could you enlighten me ?

    Also, at the top of this same file, there is this :
    public $display_column_left = true;
    public $display_column_right = true;

    If I make one of them false, then the class “hide-left/right-column” on the body is used to hide the column with display:none, but it applies to the entire website and not the single pages we want to target… Also using this method the modules don’t appear in the code, unlike the CSS-only way, how is this working ?

    Thanks in advance for any anwser.

Store Top Sales

You like the tuts and want to say "thank you"? Well, you can always feel free to donate: