Next topic in our Opencart 2.0 tutorial series is about Opencart layout concept. In this tutorial, we will give you basic understand about one of the most important section in Opencart – Layout. We will base on Opencart 2.0 as it’s the latest version with new UI and features, the workflow is almost the same in Opencart 1.5.
Opencart layout concept
“Layout” in web design is the concept of organizing and providing templates for different kinds of pages in the frontend, it decides the structure of content displayed in your site. In Opencart, the definition is the same. By default, Opencart supports lots of layouts: Homepage, Category page, Product detail page, checkout page, etc and the content structure in those layouts are different, depends on the purpose and content type in the page. Layouts are the decorator templates which prepare the complete page by filling up the slots and modules available to that particular layout.
MORE OPENCART TUTORIALS
- Create Multi-store in a single installation
- Assign position for module in Opencart layout
- Opencart Back-end configuration
- How to use Opencart Options
In short, layouts are also useful in OpenCart to assign different modules to the page. OpenCart also allows you to create new layouts from the back-end so that you can override the default layouts assigned to the different pages of the front-end.
Opencart 2.0 Core Layouts
To view all Opencart core layouts, from back-end of OpenCart, go to System > Design > Layouts. Here is the list of all existing layouts, Click on the Edit icon of any layout to see the layout settings.
In the layout setting panel, there are following elements:
1. Route Assignment
The important setting suggests to OpenCart that whenever there’s a URL containing the value in the “Route” field, for example: “common/home” in the front-end page, it should activate this layout-related setting. In other words, it’ll activate all the modules assigned to this layout for the homepage.
The module assignment allows you to assign modules to display in the layout in different positions and the order you want.
- Assign module to display in the layout
- Set position for the module in the layout
- Set display order of the module in front-page
How to add a new Opencart layout from BackEnd
To add new layout, please go to the System > Design > Layouts page. Click on the New icon, fill out the required info and configure it as the way we did in the above section and save.
Click the “New” icon to add new route and module for the new layout.
How to associate layout with products and categories
To associate layout with product, please go to Catalog > Products, which will list all the products available in the store. Open the editing page of one product then go to the Design tab where you will find the Layout Override option for Default store, select the layout that we just created.
As can be seen, the default product layout of the product is overridden with the new created layout – “SampleLayout” layout. It means that whenever someone visits the product detail page in the front-end, “CustomLayout” will be activated for that page.
For category, do the same way to override layout for any category you want.