OpenCart Theme Development: Basic Tutorial for Beginners
OpenCart is known as one of the most popular platforms to get started with a functional and effective eCommerce site.
As the default setting, OpenCart includes a pre-installed template from the first installation. The theme serves as a foundation to create custom OpenCart templates of your own. If you have some basic knowledge of PHP, HTML, and MVC-L pattern, then you can go ahead and build a basic OpenCart template on your own.
Before we move to the guide, let’s late a look at the way OpenCart is structured.
OpenCart Structure
OpenCart is built using MVC-L design pattern. This allows you to separate concerns between the data and the presentation.
The framework is structured in a clear and simple way.
Whenever you need to access the back-end files, work in the ‘admin’ directory. Front-end files are stored in the ‘catalog’ directory. The latter is of special interest to us in this guide as we will end up with a custom front-end theme.
MVC (or Model View Controller) is a popular design pattern in the software development niche.
OpenCart adds the Language element to it.
That is why we refer to it as MCV-L.
The language element is responsible for separating data written in different languages for multi-lingual sites. Other elements include:
- Controller that is intended to handle the application logic.
- Model that fetches data from the back-end database.
- View that is responsible for rendering the front-end layout.
Exploring More About the View Directory
The default OpenCart template is available in the 'view' directory, which is also made up of two other directories - javascript and theme.
As you might have guessed, all of the required JavaScript files are placed in the 'javascript' directory, whereas all files related to the theme are stored in the 'theme' directory.
Digging deeper into its structure, you will find out that there is a separate directory called 'default'.
This is where the pre-built template provided by OpenCart is placed.
The default theme structure looks like this:
- Image directory contains all image filed related to the default theme.
- Stylesheet directory containing skinning related code.
- Template directory contains all the front-end template files organized in a modular way.
The structure of the 'template' directory is of special interest to us in this guide.
Before we keep moving further it's worth to mention that OpenCart provides a selection of built-in modules, which contain all the core features needed to create a standard shopping cart.
However, if you need more, you can create custom modules that will meet your personal requirements. The modules are included into the template directory.
Here is how those can be reached via the template categorization.
Every OpenCart template is made up of a series of categories like:
- Common includes the common elements that are available across different pages in the same directory. These are header, footer, and sidebar elements. This is also a place where you can include other files of your template if you want those to appear across different pages of your site.
- Error stands for the error template.
- Information contains templates that are related to Contact Page, Sitemap Page, and Static information page.
- Module directory contains all files related to the default and custom modules that you develop to fulfill your own requirements.
That's all that you need to know about the basic OpenCart theme structure. Now, let's move to the guide on how to create a custom theme with OpenCart.
Guide: How to Build Your Custom OpenCart Theme
OpenCart is loaded with a default template, which can be used as a foundation of your own custom template.
In general, there are two possible scenarios in which you would like to create a custom theme of yours:
- Revamp the default interface completely;
- Bring a couple of changes to it, like a different layout structure, color scheme, etc.
It's up to you choose which way to go. However, it's highly recommended to create your custom OpenCart template from scratch.
This should make it much easier to you to upgrade the OpenCart version in the future.
Before you proceed to the creation of a custom OpenCart template, make sure that you have a working installation of OpenCart.
Create a new directory under the title 'mycustomtheme' underneath Catalog > View > Theme.
This will be a container for the files stored in other directories within 'mycustomtheme' directory like images, stylesheets, and templates.
Once you've done all this, activate your custom theme from the back-end.
To do this, log-in the back-end, navigate to System > Settings, and you will see all stores included in your OpenCart installation.
As a rule, you will see a single store entry displayed only. More than one row is revealed for sites with multiple stores being set up.
With OpenCart, you can install multiple stores with a single installation as well as manage all of them within one admin interface.
After you’ve checked the number of stores included in the OpenCart installation, click the Edit link in the Action column.
By doing this, you will open the store configuration interface.
With a click on the Store tab you will be able to select the front-end theme.
This is where you should see your ‘mycustomtheme’ listed alongside with the default theme in the Template dropdown box.
To apply changes, click the Save button.
Now, if you check the front-end, you will see everything working just fine. Our custom OpenCart theme doesn’t include a single file yet.
So, how does it work? This is when we need to get straight to discussing template overriding.
Whenever you set up a custom template as an active theme of the OpenCart store, its front-end will still look the same before we activated the new theme in the back-end.
This is happening due to the template overriding system.
It works like this:
In order to render the homepage, OpenCart uses the following path to the template: ‘catalog/view/theme/*/template/common/home.tpl’.
Now, OpenCart will execute the following procedure to find the ‘home.tpl’ theme:
- As soon as you set up ‘mycustomtheme’ as an active theme for the store, OpenCart will try to find it using the following path: catalog/view/theme/mycustomtheme/template/common/home.tpl. If it’s found, then everything is working the right way and we can end up on this.
- If ‘home.tpl’ wasn’t found in the active theme, it will return the default theme settings. So, that’s the default theme serving the files of the OpenCart store, even if the custom theme is in place. This may come in handy when you need to tweak just a few of the theme files instead of revamping it from scratch.
As of now, your custom theme still doesn’t contain any data. In order to upload it with the content, navigate to the ‘template’ directory and create the ‘common’ new directory under it.
Next, copy home.tpl and header.tpl of the default theme and paste these to the newly created template/common.
Apply the same action to the stylesheet and image.
Copy those from the default theme and paste in the respective directory of the custom template.
You will see something like this:
The thing worth to mention at this point is that you need to copy only those template files to the custom theme that should to be tweaked.
If you do not need to bring any changes to the file, those will be automatically picked up from the default theme. Moreover, you will need to maintain the files structure similar to the way those are organized in the default theme.
Next, open template/common/header.tpl file in any code editor.
The code that this file contains is used to display the header section on your site. Take a closer look at the code and you will see several stylesheet references hard coded in the default theme.
Here is how to change it so it's fetched from the custom theme:
Find the following code:
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />
And replace it with:
<link rel="stylesheet" type="text/css" href="catalog/view/theme/mycustomtheme/stylesheet/stylesheet.css" />
Apply the same action to the rest stylesheet references elsewhere required.
Thus, you will get all stylesheet files loaded from the custom theme.
Next, open template/common/home.tpl and replace the content in the following way:
<?php echo $header; ?>
<?php echo $column_left; ?>
<?php echo $column_right; ?>
<div style="background: #00F;color: #FFF;font-weight: bold;padding-left: 10px;">If this line appears, Our custom theme is doing it's part!</div><br/>
<div id="content">
<?php echo $content_top; ?>
<h1 style="display: none;"><?php echo $heading_title; ?></h1>
<?php echo $content_bottom; ?>
</div>
</div>
<?php echo $footer; ?>
Navigate to the homepage to see the changes applied.
This is just one of the examples of how to add and modify custom OpenCart templates.
In the real world, you will need to browse inventories of themes that correspond to your own preferences.
To give you a hint on the latest and trendiest OpenCart themes, take a look at the following collection of OpenCart themes from TemplateMonster.
Fooder - Pizza Restaurant With Online Ordering System OpenCart Template
Fooder is more than just an ordinary eCommerce template. This is a full-fledged starting point of pizza restaurants with an array of usable elements for a seamless online shopping experience. For example, it includes a smart online ordering form featuring the ability to pick ingredients of your pizza or burger on your own. There is also an integrated delivery system, which makes it possible to count the exact cost of the delivery, as well as find out when the order will be delivered to you.
Musclecar - Car Parts Responsive OpenCart Template
Musclecar is a clean and spacious OpenCart template that is best suited for selling car parts on the web. It is quick and easy to edit due to the integrated layout builder. The theme is intended to be handled by the users with little to no coding skills. The pages can be tweaked as you simply drag and drop various elements within an intuitive interface.
StoreFlex - Responsive Multipurpose OpenCart Template + RTL
StoreFlex is a truly multipurpose eCommerce design that is loaded with a number of ready-made skins that are ready to go live straight out of the box. It also features an intuitive layout builder. A number of features intended for a remarkable showcase of the products from the inventory are included in the cost of the template. In such a way, the theme includes lookbook feature, smart product filtering, a usable products catalogue, informative product pages, and much more.
Your turn
Now, you are ready to get started with a custom OpenCart theme. Use the guide as you build your web store. It will help you create a better experience, tailored for your style and target audience.
