1. Start
  2. Installation
  3. CSS Files and Structure
  4. JavaScript
  5. PSD Files
  6. Sources and Credits
  7. Language version (other than English)
  8. Installation and customisation services
get shopcart now!

ShopCart - Premium OpenCart theme

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much! Contact: http://themeforest.net/user/tomsky

If you haven't already bought a license, you can do so by visiting this website: http://themeforest.net/item/shopcart-opencart-theme-with-powerful-options/532072?ref=tomsky



PLEASE NOTE: If you are going to install ShopCart theme on modified Opencart installation, make sure you backed up your files before proceeding. ShopCart theme makes some changes to Opencart core files and built-in modules (category.php), so if you have modified them before, these changes can be lost!


All the files needed to be uploaded can be found inside ‘FILES TO UPLOAD’ folder. You will find three folders there: 'admin''catalog' and 'image'. In this point you should notice that the structure of the FILES TO UPLOAD folder matches your installation structure exactly (see the screenshot)


Drag and drop (or select those 3 folders, right click and select Upload) the admin, catalog and image folders into your site using your favourite FTP client (If you don’t have one, we recommend Filezilla).


You will be asked if you want to replace some of the files from your current installation:

Do so only if you have clean installation or have backed up your modified installation.

After successful upload, you should go to your admin panel (http://yourdomain.com/admin) and activate ShopcCart theme by choosing it from themes panel. Remember to choose an image for your logo, to do so, go to System / Settings/ Image/ and select your Store Logo.



Set your image settings

Go to system / settings/ image and make sure that you use the values given below: 

You may want to slightly adjust the image sizes, but it's highly recommended to use the above settings. 


Home page modules


Also, set this image size settings to any modules you want to display on the homepage (such as Featured, Lates, Bestsellers etc)

Also, do not set any module positions (except for the slideshow) to Content - Top. Only slideshow modules should have its position set to Content Top, the rest of the modules should have content - bottom. You can select their position by choosing appriopriate sort order number. 


Additional modules



This template comes with two, additional custom modules. In order to make sure that everything works ok, you should install them.


Those two modules are:

ShopCart Custom Footer


This module will only work with ShopCart theme and no other theme, so before you switch to any other theme, you need to uninstall it first!


This one allows you create custom footer (about us column, facebook column, contact column, custom html column, twitter, categories). 


Decide if you want to use custom footer module at all (Custom Footer Module Status)

Select ‘disabled’ and click save and custom footer module will not be displayed at all.


Custom footer module is divided into six sections:

  1. About Usallows you to place short text about your stor
  2. Contactallows you to add some contact information
  3. Facebookdisplays your store’s facebook fan page
  4. Customallows you to add any HTML
  5. Twitter displays your latest tweets (no surprise here!)
  6. Categories can display your store’s categories



You can use one, two, three, four or six columns in the custom footer. The columns will be resized automatically. You cannot display 5 columns (trying to do so will break the layout), and because of the theme’s layout we recommend to display 4 or fewer columns.


Edit About Us column. Choose whether you want to display it (About Us Column status), write down your header name and short description.



Edit Contact column options.

Choose its status (Custom column status), column header name and your contact details.

If you don’t want some of the details to be displayed, just leave this field empty.




Select your facebook fan box status. If you want to display facebook fan box on your page, you need to add your Facebook page ID. How to get it?

Find out here




Edit header column and write some custom html in the content text area.  HTMLtags will be translated and displayed in the footer.




You can display up to 3 recent tweets from your twitter account. Just type in the header name you want to be displayed in your store’s front end, number of recent tweets and your Twitter username.




Simply select whether you want the categories to be displayed in your footer.


ShopCart theme options module


This module lets you customise and change virtually every aspect of theme’s colour scheme.

In this section, you can change the way your store looks like. To change the colour of corresponding element, just click inside text field and this will bring up colour picker. Then just choose the colour you like, click little circled icon (bottom right of the colour picker). When you're happy with your choices, don't forget to click 'Save' on top right of this page. 

Remember, that changes will be applied only if you select 'enabled' from the first drop-down below. 

If you are not happy with your colour choices you made and want them to be reverted to default value, just remove the hex value from this text field (leave it empty) and click 'Save'.

You may find it useful, to use a tool such as http://www.colorzilla.com/gradient-editor/ which allows you to preview your gradients. Have a play using this website and then just copy hex values into relevant text fields.



With this theme, you can use built into OpenCart 1.5 slideshow module. For best results, use slideshow width of 960 px (it will then fit nicely into design)



You can also use built-in banners module (as shown in the demo page).

You can use:

3 images (each 313px wide)

2 images (each 468px wide)

1 image (940px wide).


For further information about using OpenCart features, please visit their website: http://opencart.com


How to have built-in banners module (as shown in the demo page)?

First, login to your store admin panel (http://yourstore.com/admin/) and navigate to system / design / banners/ From there, click 'Insert' (top right of the page) and you will be transferred to the page where you can add your banner.

Type in your banner name, make sure that its status is set to 'enabled'. Then, click at the button 'Add banner below'. This will create one row, where you need to insert: your banner title, Link (optional) and image (just click on the icon and this will show up image manager, then select / upload an iamge you want to show). After that, click save and you're done with first banner. Repeat this twise so that you have 3 banners.

Then go to extensions / modules/ Banner (click edit). From there click 'Add module' and as a banner, select one of the three banners you just created, Dimensions (as on the demo store): 313 x 149px, Layout: Home, Position: content bottom, Status: enabled, sort order: depending on other modules you want to display. To make sure that your banners are displayed inline next to each other, give them a sort order number that increases by one (the one with the smallest number will be on the left). Repeat this for your three banners and click 'Save'.

CSS Files and Structure


This theme uses highly modifies stylesheet.css file which can be found inside catalog / view / theme / shopcart/ folder.


If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file (use Firefox extension called 'Firebug' to do that), and then scroll down until you find the appropriate style that needs to be edited.


The structure of the css file is marked by comments, which indicate the webstore sections they apply to. 



This theme imports four Javascript files.

1.  jQuery

3.  custom.js



1.  jQuery is a Javascript library that greatly reduces the amount of code that you must write.

3.  custom.js carries out the jQuery enhanced features that can be found in this theme, like changing images opacity on mouse hover, header switcher animations and top menu drop down. 


PSD Files


We've included FOUR psd file with this theme:

1. Index page

2. Category Page (List view)

3. Category page (Grid view)

4. Product page


All .psd files are correctly layered, grouped and named, so you should have no problems finding relevant elements



Sources and Credits

ShopCartwould not have been so beautiful and advanced without those excellent resources, listed below:

Language version (other than English)


This theme has been created in English, and can be used for English stores without any modifications.


However, if you need to run your store in different language, you will need to copy customFooter.php and shopcart.php files inside catalog/ language/ YOURLANGUAGE/modules/ folder. Open up customFooter.php and shopcart.php language file and you will see what needs to be translated into your own language. Just copy the file into your language file and make required translations.

Installation and customisation services



I'm happy to help you with the installation. But before you contact me, please make sure that you followed the above specification as close as possible, because it is proved that most of the problems come from not reading the specification carefully.

If you contact us with support question, please include your website URL, installed version of Opencart and detailed description of your problem and screenshots (if applicable) showing the issues you experience. We may also ask you for temporary access to your ftp account.

Please note that we will only provide the support if you contact us via themeforest contact form. This is the only way we can verify you as our customer!

If you want to save yourself a hassle, we can do the whole process of installation for you, for a charge of USD 30. This will normally be done within 24 - 48 hours after receiving payment via paypal. Contact me if you need my assistance.



We specialise in creating bespoke designs and custom OpenCart developments. Should you require any customisation to your theme, whether it is changing theme’s layout, adding new modules or creating new custom theme from scratch, we are the right people for the job.

Contact us with details of what needs to be done, and we’ll give you a free, no obligation quote.


Contact via TF:




Thanks again for purchasing our theme!