Innovation Icon

Let's Make Something Amazing Together

We always provide our best creative ideas at the highest level. Tell us about your project and we will make it work.

InnovateBringing innovative solutions to complex problems

AutomateStreamlining processes through automation

DominateLeading the market with exceptional results

Build Smarter and Launch FasterEfficient development for rapid deployment

Ecommerce Templates Opencart OpenCart Guide Opencart themes for free OpenCart Tips and Tricks

In this Opencart tutorial, we are listing out to create opencart theme development from scratch for the designer, we are trying to show how to integrate HTML into the Opencart theme. We would like to introduce the OpenCart theme development course and make the OpenCart theme from scratch.

Right now OpenCart version is 3 and we are desperately waiting for OpenCart version 4 and hope it will be launched soon. We are using Opencart 3.0.2 for demo purposes. Before going through the theme development please watch the following videos playlist which describes OpenCart programming knowledge:

To develop an Opencart theme let's start with the MVCL pattern of Opencart:

Then go through the files and folder structure of Opencart:

An OpenCart theme is a collection of the images, stylesheet and template, files and folders which is found in the view folder. Let's see the default theme folder structure:

See the template folder they are separated into multiple folders as per needs. In Opencart 2, those template folders contain TPL files but in Opencart 3 they consist of Twig files, they are the section we use for regular HTML markup interspersed by PHP code for the functionality.

Then better to understand the layouts and position of Opencart in theme

After that study, the Opencart Library Predefined objects' methods so that you can understand what is already available:

Then read the blog post about how to see all variables available in twig template:

How to see all variables available in twig template in Opencart?

Then, see how we can install the Opencart 3 theme, in the video we are giving an example of our free opencart 3 themes, which you can download the free theme here:

Setup Local environment for the development of Opencart 3 theme

Once you study those, see how you can clone the default theme to custom opencart theme:

Here is another video to setup local environment and setup up automation with Gulp for the Opencart 3 theme development video

Youtube Opencart Video Playlists:

We keep on updating the youtube opencart video playlists for the Opencart theme development at below:

Hope you liked this post, we will come up with part II soon, till then let us know if you have any questions or suggestions, please subscribe to our YouTube Channel for Opencart video tutorials. You can also find us on Twitter and Facebook. Enjoy!