OpenCart 2 Documentation

Introduction What can be found in this package and what it can be used for

Thank you for purchasing an OpenCart template. This documentation consists of several parts and shows you the entire process of how to set up and administer an OpenCart Web store from scratch. We did our best to make this manual as clear and easy to follow as possible.

What is OpenCart?

OpenCart - is an Open Source e-commerce application. OpenCart provides easy customizations of your online store. OpenCart community includes a number of users starting from the experienced web developers looking for the user-friendly interface, ending with shopkeepers that start their online business for the first time. OpenCart provides a great amount of features that allow you to control your store. Using OpenCart tools you can easily uncover the store potential. More details

File structure

The template package you have downloaded consists of several folders. Let's see what each folder contains:

  • documentation - includes detailed quick-start guide on the engine and template installation;
    • documentation.html - main documentation file. You are reading it at the moment
  • screenshots - contains template screenshots;
  • themeXXX - contains the following folders/files:
    • themeXXX(full).zip - OpenCart engine archive, template file and sample data files (for the complete installation from scratch);
    • themeXXX(update).zip - template archive without sample data files (for the installation over existing store);
    • themeXXX(extensions).zip - archive with the xml-files;
  • info.txt - contains instructions on how to extract source files;
  • sources_XXXXXXXX.zip - archive with the source files. It includes the following folders/files:
    • psd - Adobe Photoshop source files (.psd);
    • SCSS - source files with the template CSS styles created with the help of SCSS

Prepare What do you need to make this work

Before you proceed to setting up your OpenCart Web site, please make sure you are fully prepared.

Editing software

To feel comfortable working with the OpenCart template, we recommend downloading all the applications required. You can see the list of required software at the template live demo page. The requirements may vary for different templates, so we'll tell you here what is needed in general:

  1. You may need the Adobe Photoshop application. It is used to edit .PSD source files and it is necessary if you want to edit template design graphics and images.
  2. To edit template source code files, you need some code editor like Adobe Dreamweaver, Notepad++, Sublime Text, etc.
  3. To upload files to the hosting server, you may need an FTP Manager like Total Commander, FileZilla, CuteFTP, etc.
  4. Proceed with the following guide to unzip the archives, using WinZip(PC) and StuffitExpander(MAC).

Hosting

As OpenCart engine is a PHP/MySQL based application, you need to prepare a hosting environment.

If you have live hosting, please make sure it matches OpenCart system requirements and is ready to be used for OpenCart websites.

Alternatively, you can run OpenCart locally on your computer using the local server. To create a local hosting server, please use the localhost applications such as WAMP, AppServ, MAMP, etc. Any of those can be easily installed as any other program and used to run OpenCart.

Please check the tutorials below on how to configure the local development environment:

Getting started Where do we click it make it work

Complete installation

This kind of installation can be used in case you do not have a ready to use OpenCart store. The 'themeXXX(full).zip' archive contains OpenCart engine files and theme files including sample data, so you do not need to install an OpenCart engine separately. Template sample data will make your site look just like our demo template including all the sample products, modules and site configuration.

 

Installing the template over existing store

In case you already have a ready OpenCart store and you just need to change its appearance with the help of the theme, use the following installation method.

 

Complete installation

Complete installation can be used when you need to set up an OpenCart store from scratch. Make sure to complete all the preparation steps and check if you have the required software available.

Creating a database

When all the files are uploaded to the server, you need to prepare a newly created database for you OpenCart website. It can be created using a database management tool in your hosting cPanel (usually it is PhpMyAdmin).

You can create a new database in phpMyAdmin following the simple 3 steps listed below (check the next slides):

  1. In order to get to the database list, click Databases button in the top navigation menu .
  2. Enter a new database name in the "Create new database" field.
  3. On the right side click the Create button.

You should see the newly created database in the list. In order to get the access to the database, click its name:

 

  • 1. Open the "Databases" tab, in order to get to the list of databases.

  • 2. Enter a database name.
    3. Click "Create".

  • 4. The newly created database appears in the list. Click the database name to get the access to the database.

 

Feel free to check the detailed video guide How to create a database.

In case of any issues, please contact your hosting provider for further support.

Uploading the template

In order to start working with OpenCart, you need to upload the files to your server. You can do it via your hosting cPanel or using an alternative FTP client.

  1. Open the template folder.
  2. Go to the 'themeXXX' folder and unzip the 'themeXXX(full).zip' archive to your computer. Upload the content of the archive to your server ( How to upload files to server, How to upload files to server using cPanel (WebHost manager, WHM)).
  3. Set the correct permissions to your OpenCart folders and files:
    • system/cache/;
    • system/logs/;
    • system/download/;
    • system/upload/;
    • image/;
    • image/cache/;
    • image/catalog/;
    • config.php;
    • admin/config.php.

    The permissions should be set to CHMOD 755 or 777 depending on the server configuration. In order to do so, select all you files and folders and find the buttons "Change Permissions" if you are working in File Manager. If you are working with Linux - use command chmod -R 777 "folder_name".

OpenCart Installation

Open any browser and enter the OpenCart directory path in the browser address bar (for example http://your_domain_name/opencart). You will see the OpenCart installation page:

 

1 installation step License

 

Img 1. OpenCart installation. Step 1. License

Check an OpenCart license agreement and click the Continue button if you agree.

 

2 step Preliminary stage

 

Img 2. OpenCart installation. Step 2. Preliminary stage

At the second step OpenCart is going to check if your hosting settings match the required ones and if the files and folders permissions are correct.

 

3 step Configuration

 

Img 3. OpenCart Installation. Step 3. Configuration

At the Configuration step you need to input your database details. The MySQL database was created on the preparation step, now you need to enter the details you have used:

  • database server;
  • database name;
  • database username;
  • password.

If there are any issues with the database details, contact your hosting provider.

You need to create the administrator user for your store. Enter the name, password and administrators e-mail address. The details you enter will be used to log into your store backend.

 

4 step Ready!

 

Img 4. OpenCart installation. Step 4. Ready!

This is the last OpenCart installation step. You will see 2 options: you can be redirected to your OpenCart website or to the OpenCart admin panel.

You can use the following installation instructions: OpenCart. How to install OpenCart engine and template (using “fullpackage”).

Remove the "install" folder from your server. You will not be able to enter the store until the folder remains on the server.

In order to set access restrictions, change the permissions to 644 and 444 for the following files:

  • config.php;
  • index.php;
  • admin/config.php;
  • admin/index.php;
  • system/startup.php.

The installation is complete. In order to open the store page, enter domain name in the browser address bar. In order to access OpenCart admin panel, enter domain_name/admin.

Installation over existing store

Make sure your OpenCart version is corresponding to the template requirements. All the OpenCart version are available at the official OpenCart website.

  1. In order to install an OpenCart template, you need to upload the files to the server. You can find the "themeXXX(update).zip" archive in the OpenCart folder, it should be unzipped to your computer.
  2. After that, upload the unzipped files to the root directory of the OpenCart installation.
    You can check the detailed video instructions on how to upload files to the server.
    the template files will not affect your store content in any way;
  3. Open your website with any browser and add /install at the end of your site URL in the browser address bar (for example, http://your_domain_name/opencart/install)
  4. Click the Continue button. It may take some time.
  5. Enter the administration panel, navigate to Extensions -> Extension Installer and upload the themeXXX(extensions) archive files. When all the files have been uploaded, navigate to Extensions -> Modifications and press refresh in the top right side of the screen;
  6. On the next step navigate to System->Settings, go to the Store tab and select themeXXX template in the Template field.

Feel free to check the detailed installation guide: OpenCart. How to install a template over the existing store using update package.

Extension configuration

Module installation

Module installation process includes several steps. Navigate to your administration panel (by adding /admin in the browser address bar - www.yoursite.com/admin). Go to Extensions and in the drop-down menu select Modules (Img.5). You will see the list of installed and ready-to-install modules. If you see the Uninstall button next to any module, it means that the module is already installed and you can modify module settings by clicking Edit. By clicking the Install button, you will start module installation process. In order to remove the module, you have to click the Uninstall button, so the module will be uninstalled.

Note that uninstalling the module means all the settings added earlier will be erased and cannot be reverted back.

Img 5. Module installation

When the installation is finished, you need to configure the module. The settings can differ depending on the specific module, but the Status field is the same for all (Img. 6) - the field allows to turn the module on/off.

Img 6. Module editing

In order to add the module to a certain page, you need to go to the list of pages. It can be done in 2 ways: (Img.7):

  1. In the side menu navigate to System -> Design -> Layout;
  2. In the nodule section click the link here.

Img 7. Selecting a page for editing

In the page list select the page where you want to place the module and click Edit (Img.8).

Img 8. Selecting a page for editing

You can see a list of the modules and module positions that are already added to the page (Img.9).

Img 9. Adding modules to a page

The following module positions are available (respectively to the display order):

  1. Header Top (after the Header section);
  2. Column-left (left side panel);
  3. Column-right (right side panel);
  4. Content-top;
  5. Content-bottom;
  6. Footer.

The Sort Order field shows the display order of the modules assigned to the same position. In order to add a module to a page, click Add Module. Select the required module and module position and click Save. The module installation is completed.

Parallax

Parallax-scroll - a specific scrolling technique used in computer graphics that shows background images appearing slower than the site content itself, thereby creating the illusion of depth and the effect of immersion in a two-dimensional video game. This module allows to add a parallax-effect to your site with no additional skills and efforts.

When the module is installed, you can configure it on the module settings page (Img.12).

Img 12. Parallax module settings

Settings:

  1. Module Name - the name of the module;
  2. Banner - select the banner from the list of earlier created banners;
  3. Width - module image width;
  4. Height - module image height;
  5. Status - module status (enabled/disabled).
Image width and height should be corresponding to the original (used by default), otherwise the effect may not meet your expectations.

TM Category

The module allows to display categories with the accordion view, it also allows to display all the subcategories (Img.13). Usually it is used in the side panel.

Img 13. TM Category module appearance

Settings:

When the module is installed, you can enable / disable it on the configuration page.

TM Facebook Box

The module allows to display Facebook like box that shows the fans who like your website and brand (Img.14).

Img 14. TM Facebook module appearance

When the module is installed, you can configure it on the module settings page. (Img.15).

Img 15. TM Facebook module configuration

Settings:

  1. Module Name - the name of the module;
  2. Facebook Page URL - Facebook page link;
  3. Color Scheme - color scheme (light, dark);
  4. Show Faces - show users faces (yes, no);
  5. Show Stream - show recent posts (yes, no);
  6. Show Header - show block titles (yes, no);
  7. Show Border - show block border (yes, no);
  8. Width - block width (px);
  9. Height - block height (px);
  10. Status - module status (enabled/disabled).

TM Twitter Box

This module allows you to display posts from Twitter (Img.16). It helps your site visitors to be aware of the latest updates and messages in Twitter social network.

Img 16. TM Twitter module appearance

When the module is installed, you can configure it on the module configuration page (Img. 17).

Img 17. Editing TM Twitter module

Settings:

  1. Module Name- the name of the module;
  2. Twitter Page URL - Twitter account link;
  3. Widget ID - you can get the Widget ID here;
  4. Tweet Limit - number of tweets;
  5. Color Scheme - color scheme (light, dark);
  6. Width - block width (px);
  7. Height - block height (px);
  8. Status - module status (enabled/disabled).

TM Pinterest

TM Pinterest module (Img.17) allows to display Pinterest gallery on your store.

Img 18. TM Pinterest module appearance

When the module is installed, you can configure it on the module configuration page (Img.19).

Img. 19. Editing TM Pinterest module

Settings:

  1. Module Name- the name of the module;
  2. Pinterest Page URL - full path to the page that display the gallery;
  3. Width - block width (px);
  4. Height - block height (px);
  5. Status - module status (enabled/disabled).

Olark Live Chat

Olark Live Chat module for OpenCart (Img.20).

Img 20. Olark Live Chat module appearance

When the module is installed, you can configure it on the module configuration page (Img. 21).

Img 21. Editing Olark Live Chat module

Settings:

  1. Module Name - the name of the module;
  2. Site id - website ID that can be found on the https://www.olark.com/install page after you register and fill the required fields;
  3. Status - module status (enabled/disabled).

TM Slideshow

This module allows you to display Camera slideshow on your website.

When the module is installed, you can configure it on the module configuration page (Img.22).

Img 22. Editing TM Slideshow module

Settings:

  1. Module Name - the name of the module;
  2. Banner - should be selected from the earlier created banner list;
  3. Width - module image width;
  4. Height - module image height;
  5. Status - module status (enabled/disabled).

TM Google Map

This module allows you to add a Google map with an unlimited number of markers to your website (Img. 23).

Img 23. TM Google Map module appearance

The center of the map and one of the markers are defined in store settings - System->Settings, in the General tab, Geocode field. Once you click on a marker, you will see the pop up window with the Address bar.

When the module is installed, you can configure it on the module configuration page. (Img.24-25).

Img 24. Editing TM Google Map module

Img 25. Editing TM Google Map module

Settings:

  1. Module Name - the name of the module;
  2. Google Map API key - API key for Google Map. You can find more details at the official website;
  3. Status - module status (enabled/disabled);
  4. Map Type - map type. There are 4 options available:
    • Roadmap - road map, the one used by default;
    • Terrain (Landscape) - topographical map based on terrain information;
    • Hybrid - a combination of a basic map and satellite images;
    • Satellite - Google Earth images taken by satellite;
  5. Map Zoom - numerical value. Initial scaling used when displaying a map. A value of 0 corresponds to the lowest level of scaling. When increasing this value, map zooms in;
  6. Sensor - indicates whether sensor that determines users location is used or not.
  7. Map Width - the width of the map. You should specify unit of measurement (% or px);
  8. Map Height - the height of the map. You should specify unit of measurement (% or px);
  9. Map Styles - sets the style of the map. The variety of styles is available at https://snazzymaps.com/;
  10. Disable UI - enables/disables user interface by default;
  11. Scrollwheel - enables/disables map scaling with the help of mouse wheel;
  12. Draggable - enables/disables the option to move the map;
  13. Marker Image - sets marker image. If you leave the field empty, it will apply default marker;
  14. Active Marker Image - sets marker image when clicking;
  15. Marker Image Width - sets marker image width;
  16. Marker Image Height - sets marker image height.

In order to add a marker, click Add New. In the Geocode field specify marker coordinates (latitude, longitude - Example: 40.6700 , -73.9400 ) and in the Address field enter the information that will show up when clicking the marker. Required coordinates can be found at http://www.mapcoordinates.net. In order to remove the marker, click Delete Marker.

TM Category Menu

This module allows to display the categories and 2 levels of the subcategories in the sidebar panel and including the images of the first level subcategories (Img.26).

Img 26. TM Google Map module appearance

Settings:

When the module is installed, you can enable/disable it on the module settings page.

TM Instagram

This module displays the Instagram social network pictures including the number of likes in a list (Img.29).

Img 29. TM Instagram module appearance

When the module is installed, you can configure it on the module configuration page (Img.30).

Img 30. TM Instagram module editing

Settings:

  1. Module Name - the name of the module;
  2. Select Get - how to get the images. There are 2 values available (user and tagged), which means either to get the images of the exact user or using hashtag;
  3. Entry TagName - tag that is used to display the images (it is used if you previously selected tagged in the "Select get" field);
  4. Entry ClientID - your API ID at instagram.com (it is used if you previously selected tagged in the "Select get" field);
  5. Entry UserId - user ID (it is used if you previously selected user in the "Select get" field);
  6. Entry accessToken - token to display custom image (it is used if you previously selected user in the "Select get" field);
  7. Entry limit - limit of entries;
  8. Status - module status (enabled/disabled).

TM Manufacturers

This module allows to display the list of the manufacturers (Img. 31). Manufacturers can be added in Catalog->Manufacturers menu.

Img 31. TM Manufacturers module appearance

Settings:

When the module is installed, you can enable/disable it on the module configuration page.

TM Module Tabs

This module allows to display 4 main modules (Bestsellers, Featured, Specials, Latest) in tabs (Img. 32).

Img 32. TM Module Tabs appearance

When the module is installed you can configure it on the module configuration page (Img.33).

Img 33. TM Module Tabs editing

Settings:

  1. Module Name - the name of the module;
  2. Specials - enables/disables module Specials;
  3. Bestsellers - enables/disables module Bestsellers;
  4. Latest - enables/disables module Latest;
  5. Featured - enables/disables module Featured;
  6. Products - selection of the product list for the Featured tab;
  7. Limit - sets the limit for the number of displayed products;
  8. Width - product image width;
  9. Height - product image height;
  10. Status - module status (enabled/disabled).

TM Newsletter

This module allows to add newsletter block with the subscription form (Img.34).

Img 34. TM Newsletter module appearance

When the module is installed, you can configure it on the module configuration page (Img.35).

Img 35. TM Newsletter module editing

Settings:

  1. Module Name - the name of the module;
  2. Description - text that will be seen just before filling in the subscription form;
  3. Status - module status (enabled/disabled).

TM Newsletter Popup

This module allows to add pop-up window with an offer to subscribe to the email newsletter when someone is viewing your site (Img.36). The window is not showing up for authorized (logged in) users and those who has already subscribed.

Img 36. TM Newsletter Popup module appearance

When the module is installed, you can configure it on the module configuration page (Img.37-38).

Img. 37. TM Newsletter Popup module editing

Img 38. TM Newsletter Popup module editing

Settings:

  1. Module Name - the name of the module;
  2. Background Image - background image set for the popup;
  3. Background image width - background image width;
  4. Background image height - background image height;
  5. Cookie Storage Time - cookie storage time;
  6. Heading Title - popup heading;
  7. Description - popup description;
  8. Status - module status (enabled/disabled).

TM Product Slideshow

This module allows to display selected products with the carousel view. (Img. 39).

Img. 39. TM Product Slideshow module appearance

When the module is installed, you can configure it on the module configuration page (Img.40).

Img. 40. TM Product Slideshow module editing

Settings:

  1. Module Name - the name of the module;
  2. Products - selection of the product list;
  3. Limit - the number of displayed products;
  4. Width - product image width;
  5. Height - product image height;
  6. Status - module status (enabled/disabled).

TM Social List

This module allows to display the list of the popular social network links.

When the module is installed, you can configure it on the module configuration page (Img. 41). If you leave the field empty, the element will not show up in the list.

Img. 41. TM Social List module editing

Settings:

  1. Youtube - YouTube page link;
  2. Facebook - Facebook page link;
  3. Google Plus - Google Plus page link;
  4. Twitter - Twitter page link;
  5. Pinterest - Pinterest page link;
  6. Instagram - Instagram page link;
  7. Vimeo - Vimeo page link;
  8. Status - module status (enabled/disabled).
In case you install "update" theme version, template sample content (the list of the social network links) will not be available. In order to configure the module properly, make sure to fill in the required information.

TM Video Background

This module allows to add a block with the video background (either uploaded from your website or the one shared from YouTube service) .

When the module is installed you can configure it on the module configuration page (Img.42-43).

Img 42. TM Video Background module editing

Img. 43. TM Video Background module editing

Settings:

  1. Module Name - the name of the module;
  2. Status - module status (enabled/disabled)
  3. Video Source - video source. There are 2 options available:
    • local - loading from your website;
    • youtube - loading from YouTube.
  4. YouTube url - YouTube video link;
  5. Mute - disabling volume;
  6. Mobile - enables/disables video on mobile device. IF 'Yes', video will be showing up on mobile;
  7. Start Video - exact time when the video starts;
  8. Mobile Image - image that will show up on mobile if the video is disabled for mobile device;
  9. Mobile Image Width - background image width;
  10. Mobile Image Height - background image height;
  11. Description - html-markup that will be showing up in from of the video.

If choosing Video Source - Local Video, set an image (banner) in ".jpg" format, that will be used for mobile devices. The folder that contains background image should also include 3 video files with the same name and using the following formats:

  • *.ogv
  • *.mp4
  • *.webm

TM Lazy load

Modification that allows to load product images at the time they appear when scrolling the website. This extension allows to speed up website performance. In order to change preloader image, you should replace the lazy_loader.gif file in the catalog/view/theme/themeXXX/image/folder.

Conclusion where to get help, support and additional information

OpenCart is a multifunctional, quick and understandable solution for the users that would like to start online business. It is a great solution for your online store. The default engine package contains all modules necessary for successful sales. Open source allows you to offer really outstanding merchant possibilities for your customers.

Useful resources:

Can't load Google Fonts:
  1. Open catalog\view\theme\themeXXX\stylesheet\stylesheet.css file.
  2. Locate the line:
    //fonts.googleapis.com/css?family=[---your_web_font_name---]
  3. Replace it with the following:
    //fonts.useso.com/css?family=[---your_web_font_name---]

Validation

Both HTML markup and CSS styles used in our templates are semantically correct and valid. However some W3C errors can still take place. Making code 100% W3C valid eliminates the usage of modern website technologies as CSS3 features and HTML5 markup. Our goal is to deliver rich user experience with high quality templates and sometimes we have to break some rules.