Create a custom theme in Opencart

I had a requirement to change the theme of opencart website. Initial thought was to search for available out of the box themes in the market and buy one of them. My requirement was to make few changes to the layout and unfortunately none of the designs or templates met my requirement.

That’s when I decided to create my own theme. If you want to do the same follow the below steps:

Please note: all the paths mentioned below are for mac os x. Please modify them as per your operating system.

1. Locate the default theme folder. The default theme folder is located at <webroot> /catalog/views/theme/default
   1. Make a copy of this folder and rename it to the name of your theme. It is advisable to keep the name of your theme without any special characters and with out space.
   1. Navigate to template/common folder inside this new theme folder and edit the header.twig file.
   1. Find <link href=”catalog/view/theme/default/stylesheet/stylesheet.css” rel=”stylesheet”>
   1. The href points to stylesheet in your default theme folder. Change it with the name of <yourtheme> to make it point to your theme folder
2. Create language file for theme. Navigate to admin folder. <webroot>/admin/language/en-gb/extension/theme/
   1. Copy the file default.php and rename it to <yourtheme>.php
   1. Open the <yourtheme>.php file and find
      $_[‘heading_title’]                    = ‘Default Store Theme’;
   1. Change the value to title of your own theme.
3. Create a new twig file. Navigate to <webroot>/admin/view/template/extension/theme
   1. Copy default.twig and rename it to <yourtheme>.twig
   1. Find and replace all “default” with <yourtheme>
4. Create a controller for the theme
   1. Navigate to <webroot>/admin/controller/extension/theme
   1. Copy default.php and rename it to <yourtheme>.php
   1. Find and replace all “default” with <yourtheme>
   1. Make sure to remove any underscore in the name of your theme if it has any while changing the name of controller.
5. Go to opencart admin panel and open Extensions tab
6. Choose Theme from the drop down. Your theme will be listed.
7. Go ahead and install your theme. After installation, your theme will show “disabled” status against your current store. To enable it, click on the edit icon and select “enable” from the drop down.
8. Navigate to System>Settings>General. From the Theme dropdown you can now select your theme.

You can now go ahead and modify this theme to suit your needs and save lot of money.

Cheers !