In this recipe, we will see the steps to create a new theme for OpenCart. There are some rules to create OpenCart themes.
1. Getting started
Let’s get started with the steps to create a new theme with OpenCart.
2. How to do it
Following are the steps for creating a new theme for OpenCart:
- First of all, we need to create a new folder under catalog\view\theme. For example, we will name it shop for this
- Now, we need to copy some files from the default theme folder to our new theme folder. The files are the following:
-
- catalog\view\theme\default\stylesheet\*.*
- catalog\view\theme\default\image\*.*
- catalog\view\theme\default\template\common\header.tpl
- We have to edit some values in the header.tpl file for our new theme. We will replace all default keywords with our new theme name shop. Actually, there are six places where we need to replace the new theme name. The lines are the following:
<link rel=”stylesheet” type=”text/css”
href=”catalog/view/theme/shop/stylesheet/stylesheet.css”
/>
?>”
// other lines …
<link rel=”stylesheet” type=”text/css” href=”catalog/view/theme/shop/stylesheet/ie6.css” />
//other lines …
<div class=”div3″>
<a href=”<?php echo str_replace(‘&’, ‘&’, $special);
style=”background-image: url(‘catalog/view/theme/shop/image/special.png’);”>
<?php echo $text_special; ?></a>
<a onclick=”bookmark(document.location, ‘<?php echo addslashes($title); ?>’);” style=”background-image: url(‘catalog/ view/theme/shop/image/bookmark.png’);”>
<?php echo $text_bookmark; ?></a><a href=”<?php echo str_ replace(‘&’, ‘&’, $contact); ?>” style=”background-image: url(‘catalog/view/theme/shop/image/contact.png’);”><?php echo
$text_contact; ?></a><a href=”<?php echo str_replace(‘&’, ‘&’,
$sitemap); ?>” style=”background-image: url(‘catalog/view/theme/ shop/image/sitemap.png’);”><?php echo $text_sitemap; ?></a></div>
//other lines …
- And now, save
- Now, we will go to the admin First log in with our stored admin credentials.
- Go to System | Settings in the admin panel:
- We will go to the Store We will change the theme from default to shop, our new theme from a select list.
- You can make changes on your theme’s CSS file.
Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.