How to Create Extra Position in Opencart 2.0

How to Create Extra Position in Opencart 2.0

A while back ago I have customer who bought my template for opencart version and want to have a module position above the column left or column right and the content. I know that it is not possible if using default opencart layout, so it will need to have extra layout position below the header. and the trick is I made a duplicate of content top position I give it name "content header" and put the position under the header.
And now I will write some steps about how  to create the extra position with opencart version, so let’s begin!

Catalog – Duplicate Controller file

Now for the first step we will create new controller file for the new layout, it don’t have to write all code from the start but just duplicate the existing file. The file will located in “catalog/controller/common/” folder, and the file that will be duplicated is “content_top.php”.
Copy and paste the file in the same folder then rename it to “content_header.php”.
Open the new file and find for every text ‘content_top’ and ‘ContentTop’.  Then change or replace ‘content_top’ to ‘content_header’ and ‘ContentTop’ to ‘ContentHeader’. There will be 5 replacement, and the result should like this below:

class ControllerCommonContentHeader extends Controller {
public function index() {

if (isset($this->request->get['route'])) {
$route = (string)$this->request->get['route'];
} else {
$route = 'common/home';

$layout_id = 0;

if ($route == 'product/category' && isset($this->request->get['path'])) {

$path = explode('_', (string)$this->request->get['path']);

$layout_id = $this->model_catalog_category->getCategoryLayoutId(end($path));

if ($route == 'product/product' && isset($this->request->get['product_id'])) {

$layout_id = $this->model_catalog_product->getProductLayoutId($this->request->get['product_id']);

if ($route == 'information/information' && isset($this->request->get['information_id'])) {

$layout_id = $this->model_catalog_information->getInformationLayoutId($this->request->get['information_id']);

if (!$layout_id) {
$layout_id = $this->model_design_layout->getLayout($route);

if (!$layout_id) {
$layout_id = $this->config->get('config_layout_id');


$data['modules'] = array();

$modules = $this->model_design_layout->getLayoutModules($layout_id, 'content_header');

foreach ($modules as $module) {
$part = explode('.', $module['code']);

if (isset($part[0]) && $this->config->get($part[0] . '_status')) {
$data['modules'][] = $this->load->controller('module/' . $part[0]);

if (isset($part[1])) {
$setting_info = $this->model_extension_module->getModule($part[1]);

if ($setting_info && $setting_info['status']) {
$data['modules'][] = $this->load->controller('module/' . $part[0], $setting_info);

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/common/content_header.tpl')) {
return $this->load->view($this->config->get('config_template') . '/template/common/content_header.tpl', $data);
} else {
return $this->load->view('default/template/common/content_header.tpl', $data);

Catalog - DuplicateTemplate File

For the tpl file we will duplicate file ‘content_top.tpl’ where it’s located in ‘catalog/view/theme/default/template/common/’ folder. But if you working on custom template then file will be located in ‘catalog/view/theme/YOUR TEMPLATE NAME/template/common/’.
If you have found the file, duplicate it and rename to ‘content_header.tpl’. then replace all the code with this:

<?php if ($modules) { ?>
<div class="container">
<div class="row"><div class="col-sm-12">
<?php foreach ($modules as $module) { ?>
<?php echo $module; ?>
<?php } ?>
<?php } ?>

In code above you’ll notice that I have add div container and also div class, I’ve add those class because to make it fit with default theme, so if you’re using a custom theme then the class name can be different.

Catalog – Add New Position to Controller file

Open file ‘catalog/controller/common/header.php’ find this:

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/common/header.tpl')) {

before the code above add this:

$data['content_header'] = $this->load->controller('common/content_header');

Catalog - Add New Position to Template File

Now we will add the call function for the new position in template file, open file ‘header.tpl’ in ‘catalog/view/theme/YOUR TEMPLATE NAME/template/common/’ folder, then find this code  at the bottom of file:

<?php echo $content_header; ?>

Now we will working for admin section, the main purpose is we will modify the admin file to make the new layout position will be listed in layout setting option.

Admin -  Add new Layout Position to Controller

Open file ‘admin/controller/design/layout.php’ and find this :

$data['text_content_top'] = $this->language->get('text_content_top');

Before it add this :

$data['text_content_header'] = $this->language->get('text_content_header');

Admin – Add New Layout Name to language File

Open file ‘admin/language/english/design/layout.php’ and find this :

$_['text_content_top']    = 'Content Top';

Before it add this :

$_['text_content_header']    = 'Content Header';

Admin – Add New Layout Position to Template File

Here is the last step, we will add the new position to the layout option list in admin.
Open file ‘admin/view/template/design/layout_form.tpl’
Find this:

<?php if ($layout_module['position'] == 'content_top') { ?>

Before it add this:

<?php if ($layout_module['position'] == 'content_header') { ?>
<option value="content_header" selected="selected"><?php echo $text_content_header; ?></option>
<?php } else { ?>
<option value="content_header"><?php echo $text_content_header; ?></option>
<?php } ?>

Find this:

html += '    <option value="content_top"><?php echo $text_content_top; ?></option>';

before it add this:

html += '    <option value="content_header"><?php echo $text_content_header; ?></option>';

That it’s!, now let we test the result, please try login to admin -> System -> Design -> Layouts -> for test let’s try on Home page layout, so click edit on Home -> Click on add module button or edit the existing one -> choose the module and set the Position to Content Header -> save. Then see the result on Home Page
If you have a problem with this tutorial or feeling worried making mistakes that will causing errors, I also have provide the vqmod version file for the result of this tutorial that you can download from HERE, but by reading the tutorials at least you can learn about to create new extra Layout Position in opencart.

Download Files

Mogi Posted by Mogi

Related Articles

How to Add Thumb Image to Subcategory in Category Page
By default opencart the subcategories list in category page will be displayed as a text list without images. Now I'm gonna show you a few steps how to add thumbnail images above the category title.This tutorial applied to the default opencart theme and opencart version used is version is the steps:1. open file "catalog/controller/product/category.php" and find this code:$data['categories'][] = array(add this before the code above:if($result['image']) {$image = $this->model_tool_image->resize($result['image'], 200, 200); } else {$image = $this->model_tool_image->resize('..
7 comments on this article - view comments

3 Comments To "How to Create Extra Position in Opencart 2.0 "

DJ Cotton On 18.08.2016
Thanks so much for your tutorial...I am having trouble with this step ------------ Catalog - Add New Position to Template File Now we will add the call function for the new position in template file, open file ‘header.tpl’ in ‘catalog/view/theme/YOUR TEMPLATE NAME/template/common/’ folder, then find this code at the bottom of file: <?php echo $content_header; ?> -------- Firstly I noticed you wrote "find this code at the bottom" however this code doesn't exist on the page so I assumed you meant add this code...but when I add it I get an Undefined variable error on the front page.. All the other steps I have followed and edited but I still can't see the new position in my layout page in the admin section Could you help with that? Thanks a lot Reply to this comment
Nasser Man On 18.08.2016
very useful in details thank you for sharing, Reply to this comment
Qualidade On 06.01.2016
It worked perfectly, thank you! Reply to this comment
Showing 1 to 3 of 3 (1 Pages)

Write a comment

Your Name:
Your Comment:
Note: HTML is not translated!