Introduction

This Blog details out the entire procedure to how to work with layouts in your OpenCart2.3x Store.You will know here what they do and how these layouts change the appearance of their storefront. Always remember that this is an integral part of developing up your E-Commerce website.

Hence, let’s begin!

The Steps:

1. To find the ‘Layouts’ management menu, go to the ‘admin panel’ and click on ‘Design’ and then select ‘layouts.’
2. The ‘layouts’ list lists down all the native layouts you can find that come with the standard OpenCart installation.
3. The ‘layouts’ are used to assign modules and different pages in your store. Let’s explain one of the layouts to see what it has got.
4. For this instance, let’s take a look at the ‘Checkout’ layout.
5. First, you get the ‘layout name.’ If you feel the need, you can change it to anything you find appropriate.
6. Below the ‘layout name,’ you can choose which store to activate the layout. ‘My first store’ is the clickable one if you have more list enabled.
7. Next is the ‘Route’ which is part of the ‘URL’ which indicates the ‘Current’ page.
8. The ‘modules’ are arranged in the section below called, ‘Choose the Position of the Modules.’
9. This section is where you assign the different modules to the positions within the layout.
10. By default, your store has ‘four’ positions where you can assign the modules: ‘Column Left’ | ‘Content Top’ | ‘Column Right’ and ‘Content Bottom.’
11. Clicking on the ‘small plus icon’ will let you choose the ‘module’ you want to add to the position.
12. To see how this system works, let’s add the ‘featured product’ to the top of the ‘Checkout’ layout.
13. Select the ‘featured module’ called the ‘Home Page’ from the Drop Down menu under the Content Top position.
14. Afterward, click the ‘Add’ button to add the module position and then ‘Save.’
15. Now, go to the storefront, add a product to your ‘Cart’ and click on ‘Checkout.’
16. You must see the ‘featured products’ appearing at the top of your ‘Checkout’ page.

The Next Set:

1. Now we can try with a different position.
2. To do that, go back to the ‘Layouts’ page and remove the featured products from the ‘Content Top.’
3. Let’s again select the same one, ‘featured products’ to ‘Content Bottom’ and click ‘Save.’ again
4. Go to the ‘Storefront,’ and you will notice that the featured products have moved below the Checkout.

New Layouts

1. OpenCart also lets you make new layouts.
2. To ‘Add New’ layout, you have to know the ‘route’ to the page you want it to be leading to.
3. Usually, the need for creating a new ‘route’ comes with installing ‘third party extensions’ having the wrong route.
4. For instance, in OpenCart 2.3x, if you are adding a ‘Blog’ module, the possible route would an extension
5. You can even create a ‘New Layout’ for this route, and then add ‘modules’ to the module page.

Conclusion

This is the basis of the how the layout system works in OpenCart 2.3x. This blog will surely teach you how to assign modules to your layout and adjust their position in the server. Hope you do not face any difficulty while doing so.

Good luck and have fun with OpenCart 2.3x.