Learn how to add an extra position in OpenCart Header or any other place.
Before we start, here is the github repo for all the code you see here.
This is the third and final part of our 3 part series on OpenCart Layouts. If you haven't watched the first two I strongly recommend you do.
Because OpenCart has hardcoded only 4 positions, you may experience the need to create your own positions. Luckily in the latest versions of OpenCart 2 and above it is relatively simple.
Here is a breakdown of the steps:
In admin/view/template/design/layout_form.twig add a new block of HTML code for the extra position. You can simply copy one from column-right and modify the code replacing column-right with position_1.
In catalog/controller/common/ create a new file called position_1.php and copy the code from column_right.php. In the code replace ColumnRight with Position1 and column_right with position_1
Create a template file catalog/view/theme/default/template/common/position_1.twig as a copy of column_right.twig. Edit the Html code to fit your needs (for example replace the id with position_1 and col-sm-3 with col-sm-12)
In all pages load the controller for the new position (for example in catalog/controller/common/home.php load the new controller after column_right)
And in catalog/view/theme/default/template/common/home.twig add the placeholder php code display the new position.