1. Start
  2. Introduction
  3. Installation
    1. 1. Upload eCart files into your server
    2. 2. Install VQMOD engine
    3. 3. Install eCart Control Panel
    4. 4. Perform theme customization
  4. Theme Features
  5. eCart Theme Anatomy
  6. JavaScripts
  7. PSDs
  8. Changelog
  9. Credits
  10. Finality

eCart - OpenCart Premium Theme

Touch Code No More - Every Option in Admin Area


Thank you for choosing eCart theme. eCart is an extremely powerful feature-rich and flexible OpenCart theme that serves your online business the best. It is built with the user in mind, such that it doesn't allow you to touch any HTML, CSS or PHP codes whatsoever. Everything can be modified from the admin panel using eCart Control Panel which has 100+ options to choose from and more features are coming soon.

Support: Our client base is increasing too fast and we have decided to develop a support forum. Currently you can contact us through ThemeForest - http://themeforest.net/user/Sokopedian.

Introduction


This Documentation was last updated on April 2nd 2012.

eCart is easy to install and if you follow the instructions given here step by step, then in 10 minutes, your site will be ready.

This documentation is ready for use at this moment and I will be updating it frequently whenever there is an update to the eCart theme or an addition that may be necessary for the customers.

For Support:  Contact us through ThemeForest - http://themeforest.net/user/Sokopedian

About eCart Theme

eCart theme is a flexible, feature-rich, unique & modern general purpose OpenCart theme. It comes fully built with a new module called the eCart Control Panel which you can use to manage the features of the theme such as Colors (for texts, links, hovers and backgrounds), fonts (for headers, body text, menu links etc), Background textures, Payment icons, Trust (Security) seals as well as the Custom Footer.

Requirements
Support

We are currently developing a support forum for our clients. Thus we will request all our clients to contact us through ThemeForest - http://themeforest.net/user/Sokopedian

Installation


BACK UP!        BACK UP!        BACK UP!        BACK UP!        BACK UP!        BACK UP!        BACK UP!
eCart containes files which have been modified by adding extra code and lines to make the theme feature rich.

Modified Files 
No files have been modified from eCart version 1.0.5. In fact eCart uses no core files at all. This means that you use eCart theme without breaking other modules or themes in your OpenCart powered website.
Moreover, this makes it easier for you to update eCart theme or OpenCart versions upgrades without any errors. That's why eCart is great. 

1. Upload eCart files into your server

You will find the following folders when you purchase eCart theme. The folder name is eCart_Theme. Inside it, you will find two folders as shown in the image below. Each belong to a different version of OpenCart. Please make sure you upload the files to their correspondng OpenCart versions. 

Folder Structure

Download FileZilla FTP client here or you can use any other FTP client at your disposal. Open FileZilla, login to your server and do as shown in the image illustration below.

FTP Upload

You will then be prompted with the following dialog box from the FTP Client. Please select overwrite. See files that will be overwritten. Illustration below:

Select Overwrite

Every time you perform an upgrade to your OpenCart powered website, you are supposed to upgrade eCart theme too.

2. Install VQMOD engine

eCart theme requires VQMOD to work effectively. If you have VQMOD installed already, then you just need to upgrade it to the latest version 2.6.1

To install VQMOD, use the following URL:

http://www.yourwebsite.com/vqmod/install/index.php 

VQMOD is a very quick mode parser that prevents alteration of OpenCart core files. 

3. Install eCart Control Panel

eCart comes with a module for options management;  100+ options and more coming soon on upgrades.

I) Watch eCart installation video below:



II) Follow the following steps. Login to your store's admin area and click:

Extensions >> Modules     ::     And do as shown in the image below.

eCart Installation

Click [ Install ] and then click [ Edit ]  and you will proceed to eCart features and options management.

 

4. Perform theme customization

(i) Main settings

Go to: System >> Settings >> Edit >> Store and then select eCart template and click "save" button as shown in the image below:

Select eCart OpenCart Template

Go to: System >> Settings >> Edit >> Image and then enter the image dimensions shown in the image below and click "save" button:

Image Settings


(ii) Module Settings

Go to: Extensions >> Modules and enter the settings as shown in the images below.

eCart Slideshow Settings

Slideshow dimension need to be exactly as shown in the image above. Otherwise the thme will lack consistency. Also for all the images that will be uploaded need to have the same dimemsions.

Images that are smaller than the dimensions of the slideshow usually become blurred.


eCart Featured Module Settings

Featured products need to be added in multiples of 4. i.e, 4, 8, 12, 16, 20 etc.

Adding products in numbers that are not multiples of 4 will produce lots of whitespace in your theme.

eCart Latest Module Settings

Latest products need to be added in multiples of 4. i.e, 4, 8, 12, 16, 20 etc.

Adding products in numbers that are not multiples of 4 will produce lots of whitespace in your theme.

Categories

As uou can see in th image above, the product page should not have category because eCart theme product page is designed to be full-wide. Please take that into consideration.

eCart Carousel Module Settings

Some of the modules you might want to use may share similar "Image (W x H)" settings e.g. Latest, Featured, Bestsellers and Specials modules may share the "Image (W x H)" of 185W x 185H. Any other size can be entered, provided its a square i.e. equal length and with.

Theme Features


eCart theme has a lot of features that will blow your mind away. No need to touch a line of code. See the screen shots show below first and then proceed to eCart theme anatomy.

To access these features. Go to:  Extensions >> Modules >> eCart Control Panel >> Edit

eCart General Settings eCart Fonts Selection OptionseCart Theme Colors Options

For Facebook handle, please iput your Facebook page ID. Find how to get your Facebook page ID here.

eCart Facebook Options

For Twitter handle, please iput your Twitter profile username.

eCart Twitter SettingseCart Social Profiles SettingseCart Security and Trust Seals OptionseCart Theme Payment Icons Settings

eCart Theme Anatomy


Here I will just explain where every setting in eCart Control Panel is found on the theme frontend. Simply, I want all the customers to know what goes where in their eCart theme. This part is long but very necessary.

View the video first

Top Bar Menu

eCart Top Bar Menu

 

HeaderSpace

eCart HeaderSpace

HeaderSpace, Header Notifications, Language Icons, Social Profiles, Currency Icons

eCart HeaderSpace Items

Main Menu

eCart Main Menu

Breadcrumbs

eCart Breadcrumbs Location

Price Box, Price Ribbon

eCart Price Box Settings

Price Box (Grid)

Products Grid

Price (List)

eCart Products List

Product Page and Social Media Sharing Integration

Produc Page and Social Media Integration

Custom Footer, Security / Trust Seals, Payment Icons

Custom Footer, Trust Seals and Payment Icons

eCart browser compatibility notification - Tells the user to upgrade their bowser in the event of Ineternet Explorer 6 and Internet Explorer 7. See the image below.

Browser Compatibility Notification

NOTE: Browser compatibility will not be displayed to IE8, IE9 and IE10 users. Only to IE 6 and IE 7 users.

Trust Seal Providers

JavaScripts


eCart theme contains the following JavaScript files.

Actually, you don't have to edit any of these JavaScript files because everything has been taken care of in the admin area using eCart control panel.

PSDs


Our theme comes with a few PSD files which you can edit if want to.

Changelog


 
Version 1.0.6 (04/02/2012)
Added: Full compatibility for OpenCart Version 1.5.2x
Improved: Theme design and layout
Improved: Product box display incase of long names. Adds an elipsis to long names. 
Improved: Overlall aesthetics
Improved: Core files and VQMOD xml engine
Fixed: Prevealent bugs in the previous builds
Removed: Flag banner - This was a buggy feature on eCart: Was affecting product page disply
Removed: Button shadow seeting. A major bug in product display
Version 1.0.5 (12/02/2011)
Added: Option to upload your own background image
Improved: Custom footer design and layout
Improved: Made eCart theme independent of core files: No interference with your website
Improved: Easy to update eCart because it uses no core files of your website
Fixed: CSS padding and spacing errors
Version 1.0.4 (11/08/2011)
Fixed: Header notifications count issue. Now it updates instantly
Added: Option to remove "Powered by OpenCart" directly from eCart Control Panel
Added: Option to remove "Design by Sokopedia" from eCart control panel
Version 1.0.3 (11/02/2011)
Fixed: Email invoice error
Fixed: jQuery issue in admin area which was affecting photo upload
Fixed: Checkout HTML error 
Fixed: Latest Tweets jQuery issue
Updated: eCart documentation
Version 1.0.2 (10/20/2011)
Fixed: Improved the design of the product page - added description flags; blue, orange, green
Added: Normal Width header - thus the site now has both Full-Width and Normal-Width headers. Can be selected in options panel.

Version 1.0.1 (10/12/2011)
Added: Google +1, Facebook and Twitter buttons on the main products page. 
Fixed: Typography errors 
Fixed: Breadcrumb CSS issue
Fixed: Macro and micro whitespace issue 
Uplifted the design of: Custom Footer, Payment icons location, Trust Seals, and the overall outlook of the website.

Version 1.0 (10/08/2011)
Initial Release

 

Credits


I can't finish without giving thanks to the following sources that were used in the development of this theme.

Finality


Thanks a lot for purchasing eCart theme. If you haven't purchased, please do so because you are missing a lot by not having this theme.

For Support:  Contact us through ThemeForest - http://themeforest.net/user/Sokopedian