Describing the files and folders of the default theme

Before starting to create a new theme, first you need to know the file and folder structure of the default theme. The OpenCart directory consists of mainly two interface styles: one is the frontend, and the other is admin. The frontend style is represented by the top level of the OpenCart installation folder named catalog, and the admin folder is admin. There are many other folders, such as the system folder, which contains classes and methods used by both the admin and the catalog.

The system folder consists of a library folder, which consists of many classes and method files such as cart, customer, affiliate, and more. The cache folder contains cache files. The database folder consists of database drivers meant for supporting different types of database engines, and the logs folder contains the error log files. Similarly, the root image folder contains all the uploaded images and the downloads folder contains all the downloadable files. The default theme files and folders are located at catalog/view/theme/default/ and are structured as shown in the following screenshot:

The view folder contains all the files necessary for changing the style and appearance of the presentation layer of the site. The default theme is at catalog/view/theme/default. The default/ folder contains three folders:

• image: This contains all the image files used in the theme or template file. It consists of images of buttons, reviews, menu background, payment logos, notifications (such as warning image or success image), as well as many other images that are used in the theme design.
• stylesheet: This folder consists of customized CSS files. In the default theme, it consists of stylesheet.css. The stylesheet.css file is the customized style sheet used in OpenCart. The bootstrap files are the main CSS files, located at catalog/view/javascript/bootstrap/css. The Font Awesome toolkit is also used, which is located at catalog/view/javascript/font-awesome/css. The stylesheet.css extends only the bootstrap CSS file and part of the theme folder. Other style sheets help in the presentation of the site, so any style sheet for the frontend are placed in the theme's stylesheet folder.
• template: The template folder contains multiple folders and each folder contains many template files (.tpl). Each folder is meant for creating a collection of related files. For example, the product folder contains all template files related to the products, such as category.tpl, product.tpl, compare.tpl, manufacturer_info.tpl, manufacturer_list.tpl, review.tpl, search.tpl, and special.tpl. The default template folder contains the following folders and each folder contains related files:
  • Account
  • Affiliate
  • Checkout
  • Common
  • Error
  • Information
  • Mail
  • Module
  • Payment
  • Product

Sometimes, we need to add our own JavaScript functionality. In that case, we can create extra folders here and insert those files. Default JavaScript files are not stored in the theme location but are in the catalog/view/javascript folder.