How to develop an Opencart 4.0.1 custom theme? OpenCart 4 theme development tutorial

As part of the Opencart 4 theme development tutorial, We already showed you how to install Opencart 4 theme and to create Opencart 4 custom theme admin section, in today’s tutorial, we are showing you how to develop the frontend section of the Opencart 4 custom theme. You can download the custom Opencart 4 theme here.

The final files and folders structure of the Opencart 4 custom theme looks like below:

opencart 4 custom theme

When we developed the backend code, we have added the Startup code like below:

Opencart 4 custom theme Startup Theme

Taking that into consideration, you need to create the following file at extension >> webocreation4 >> catalog >> controller >> startup >> theme_standard.php, once you create the file, you can use the following lines of code.

namespace Opencart\Catalog\Controller\Extension\webocreation4\Startup;

class ThemeStandard extends \Opencart\System\Engine\Controller
    public function index(): void
        if ($this->config->get('theme_theme_standard_status')) {
            $this->event->register('view/*/before', new \Opencart\System\Engine\Action('extension/webocreation4/startup/theme_standard|event'));

    public function event(string &$route, array &$args, mixed &$output): void
        $override = [

        if (in_array($route, $override)) {
            $route = 'extension/webocreation4/' . $route;

This overrides the header of the code, now, let’s create the header.twig at the extension folder, extension >> webocreation4 >> catalog >> view >> template >> common >> header.twig. Add the following lines of code:

<!DOCTYPE html>
<html dir="{{ direction }}" lang="{{ lang }}">
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>We are Here{{ title }}</title>
  <base href="{{ base }}"/>
  {% if description %}
    <meta name="description" content="{{ description }}"/>
  {% endif %}
  {% if keywords %}
    <meta name="keywords" content="{{ keywords }}"/>
  {% endif %}
  <script src="{{ jquery }}" type="text/javascript"></script>
  <link href="{{ bootstrap }}" type="text/css" rel="stylesheet" media="screen"/>
  <link href="{{ icons }}" type="text/css" rel="stylesheet"/>
  <link href="{{ stylesheet }}" type="text/css" rel="stylesheet"/>
  <link href="extension/webocreation4/catalog/view/stylesheet/stylesheet.css" type="text/css" rel="stylesheet"/>
  {% for style in styles %}
    <link href="{{ style.href }}" type="text/css" rel="{{ style.rel }}" media="{{ }}"/>
  {% endfor %}
  {% for script in scripts %}
    <script src="{{ script }}" type="text/javascript"></script>
  {% endfor %}
  <script src="catalog/view/javascript/common.js" type="text/javascript"></script>
  {% for link in links %}
    <link href="{{ link.href }}" rel="{{ link.rel }}"/>
  {% endfor %}
  {% for analytic in analytics %}
    {{ analytic }}
  {% endfor %}
<nav id="top">
  <div id="alert" class="position-fixed top-0 end-0 p-3" style="z-index: 9999;"></div>
  <div class="container">
    <div class="nav float-start">
      <ul class="list-inline">
        <li class="list-inline-item">{{ currency }}</li>
        <li class="list-inline-item">{{ language }}</li>
    <div class="nav float-end">
      <ul class="list-inline">
        <li class="list-inline-item"><a href="{{ contact }}"><i class="fas fa-phone"></i></a> <span class="d-none d-md-inline">{{ telephone }}</span></li>
        <li class="list-inline-item">
          <div class="dropdown">
            <a href="{{ account }}" class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-user"></i> <span class="d-none d-md-inline">{{ text_account }}</span> <i class="fas fa-caret-down"></i></a>
            <ul class="dropdown-menu dropdown-menu-right">
              {% if not logged %}
                <li><a href="{{ register }}" class="dropdown-item">{{ text_register }}</a></li>
                <li><a href="{{ login }}" class="dropdown-item">{{ text_login }}</a></li>
              {% else %}
                <li><a href="{{ account }}" class="dropdown-item">{{ text_account }}</a></li>
                <li><a href="{{ order }}" class="dropdown-item">{{ text_order }}</a></li>
                <li><a href="{{ transaction }}" class="dropdown-item">{{ text_transaction }}</a></li>
                <li><a href="{{ download }}" class="dropdown-item">{{ text_download }}</a></li>
                <li><a href="{{ logout }}" class="dropdown-item">{{ text_logout }}</a></li>
              {% endif %}
        <li class="list-inline-item"><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fas fa-heart"></i> <span class="d-none d-md-inline">{{ text_wishlist }}</span></a></li>
        <li class="list-inline-item"><a href="{{ shopping_cart }}" title="{{ text_shopping_cart }}"><i class="fas fa-shopping-cart"></i> <span class="d-none d-md-inline">{{ text_shopping_cart }}</span></a></li>
        <li class="list-inline-item"><a href="{{ checkout }}" title="{{ text_checkout }}"><i class="fas fa-share"></i> <span class="d-none d-md-inline">{{ text_checkout }}</span></a></li>
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-lg-4">
        <div id="logo">
          {% if logo %}
            <a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-fluid"/></a>
          {% else %}
            <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}
      <div class="col-md-5">{{ search }}</div>
      <div id="header-cart" class="col-md-4 col-lg-3">{{ cart }}</div>
  {{ menu }}

The above code is similar to the default header code of the core Opencart code, one change is we add the custom stylesheet like below:

  <link href="extension/webocreation4/catalog/view/stylesheet/stylesheet.css" type="text/css" rel="stylesheet"/>

There are events to change the stylesheet but for now, we directly add the code like above. Now let’s create the stylesheet.css, extension >> webocreation4 >> catalog >> view >> stylesheet >>stylesheet.css. Paste the following code:

a {
  color: #f45511;
#menu {
  background-color: #f45511;
  background-image: linear-gradient(to bottom, #f45511, #f45511);
  background-repeat: repeat-x;
  border: 1px solid #f45511;
  border-color: #f45511;
  min-height: 40px;
  border-radius: 4px;

.btn-primary {
  color: #ffffff;
  text-shadow: none;
  background-image: linear-gradient(to bottom, #f45511, #f45511);
  background-repeat: repeat-x;
  border-color: #f45511;

With these codes, your custom Opencart 4 theme is ready, now you can add your CSS as per your requirement and make the website unique. Once it is active, it looks like the below, you can see the demo of the Opencart 4 custom theme

Opencart 4 custom themes

In this way, we complete a simple OpenCart 4 theme development tutorial, you can develop a new custom Opencart 4 theme and change the style, and show it on the front of Opencart 4. Hope you liked this article, please subscribe to our YouTube Channel for Opencart video tutorials. You can also find us on Webocreation Twitter and Webocreation Facebook. Please let us know if you have any questions or concerns.

Previous articleHost LAMP stack in AWS Lightsail, Opencart hosting in AWS
Next articleHow to let the Opencart APIs work for all IP addresses?


  1. Hello Rupak,

    I want to Overwrite Controller like
    namespace Opencart\Catalog\Controller\Common;
    class Header extends \Opencart\System\Engine\Controller {
    namespace Opencart\Catalog\Controller\Extension\new_theme\Common;
    class Header extends \Opencart\System\Engine\Controller {

    How way we can do this?

    Please help me

    Thank you

  2. Lastest OpenCart Version
    header.twig – code not overwrites default theme template, but looks like event added in admin panel.

  3. founded OpenCart Version
    $this->event->register(‘view/*/before’, new \Opencart\System\Engine\Action(‘extension/webocreation4/startup/theme_standard|event’));
    change “| “to “.”, now working
    $this->event->register(‘view/*/before’, new \Opencart\System\Engine\Action(‘extension/webocreation4/startup/theme_standard.event’));


Please enter your comment!
Please enter your name here