Opencart Layout all about

Written by 

opencart layout-concept

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 front­end, 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.

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.

opencart layout list

In the layout setting panel, there are following elements:

opencart layout structure

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.

Module Assignment

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 Back­End

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.

opencart layout-concept

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.

opencart layout association

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.

Our Next Blog Post

We hope the tutorial help you understand more about Opencart Layout concept and how to assign modules to different positions in layout. Our next topic will be about SEO Notes for 2015.

Kevil

I am a fan of Opensource, a man of work.

Looking for Custom work?

We provide all kinds of OpenCart stuffs like customizing your Opencart site, adding new features, building an Ecommerce site, etc. Tell us your expectations, we'll do the rest!

Let us help you!