Custom OpenCart 2.3.0.2 theme


I was looking to customize the default theme in OpenCart 2.3.0.2 and realized that I will probably need to do quite a bit of work given there was no immediate “help” related on the subject.
In essence it turned out to be a lot less painful than I thought.
Here is what I did. Assuming new theme name “mytheme” and title “My Theme”.
Make copies…
  1. To start with copy the default folder found in
    upload/catalog/view/theme/default
    to a new folder in the same directory. Name it “mytheme“.
  2. Then copy the theme_default.php file in
    upload/admin/controller/extension/theme
    and place it in same directory. Name it “mytheme.php“.
    + Rename the class to (line 2):
    ControllerExtensionThemeMyTheme
    + Replace all “theme_default” text to “mytheme“. Yes there are a lot (197).
  3. Copy the theme_default.tpl in
    upload/admin/view/template/extension/theme
    and place it in the same directory. Name it “mytheme.tpl“.
    + Replace all “theme_default” text to “mytheme“. (48)
  4. Copy theme_default.php in
    upload/admin/language/en-gb/extension/theme
    and place it in the same directory. Name it “mytheme.php“.
    + Set the new theme’s title in heading_title (line 3) to “My Theme”.
  5. Finally for the thumnail image to show correctly in store settings rename default.png to mytheme.png in
    upload/catalog/view/theme/mytheme/image
Now go into your Administration > Extensions > Extensions and select Themes in “Choose the extension type”. You should be seeing your new theme. Install it with the green (+) button and edit it to enable it. Also ensure you set the correct theme directory whilst editing the theme!
Then in System > Settings edit your store to use your new theme.
That should do it. You can now go ahead and start chopping and changing the default theme.

Comments

Post a Comment

Popular posts from this blog

HTML5 video loop src change on end play function

1. HTML <video id="homevideo" width="100%" autoplay onended="run()">     <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> </video> <ul>     <li>http://www.w3schools.com/html/mov_bbb.mp4</li>     <li>http://www.w3schools.com/html/movie.mp4</li> </ul> 2. CSS <style type='text/css'>     ul {         display:none;     }   </style> 3. jQuery <script type="text/javascript"> video_count = 0; videoPlayer = document.getElementById("homevideo"); function run(){    video_count++;     var countVideo = $('li').length;         if (video_count == countVideo) video_count = 0;        var nextVideo = $('li').eq(video_count).text();         videoPlayer.sr...
Read more

Set limit wp_nav_menu

<?php $pages = wp_nav_menu( array( 'container_class' => 'menu1' ,'menu'=> 'Main Navigation','theme_location' => 'menu1', 'menu_class' => 'dropdown', 'echo' =>false,'container' => false ) );?> <ul class="dropdown"> <?php $limit = 5; $pages_list = preg_replace(array('#^ ]*>#','#$#'), '', $pages); $pages_arr = explode("\n", $pages_list); for($i=0;$i<$limit;$i++){     echo $pages_arr[$i]; } ?> </ul>
Read more

Calculate percentage of a specific element has been scrolled into visible on the screen

Image
HTML <div class='info-container flex-layout'>   <span>Scroll down</span>   <span class='percent'>0%</span> </div> <div class='block'></div> <div class='element flex-layout'>   <span>Start</span>   <span>End</span> </div> <div class='block'></div> CSS body {   margin: 0;   padding: 0;   color: white; } .flex-layout {   display: flex;   flex-direction: column;   justify-content: space-between; } .info-container {   position: fixed;   z-index: 1;   font-size: 2em;   height: 100%;   width: 100%;   align-items: flex-end;   color: white; } .block {   height: 1000px;   background: #333; } .element {   align-items: center;   background: #000;   height: 450px; } JavaScript $(document).ready(function() {   $(window).scroll(function() {     var windowBottom = $(this).scro...
Read more