1. Start
  2. Installation
  3. Image size adjustment
  4. Theme Features
  5. CSS Structure
  6. JavaScript
  7. Sources and Credits
  8. Theme support

MetroCart - Premium OpenCart theme


I'm happy to help you but before you contact me, please make sure that you followed the whole specification very carefully, because it cover whole process to install theme.

Installation


MetroCart - Premium OpenCart theme is very easy to setup just follow these steps

1
Copy theme files
  • Copy files from "FILES TO MetroCart" folder from your relevant version of OpenCart
  • Overwrite in to your working OpenCart folder
  • Go to admin and select theme template from ==> System » Settings Store tab
Read more...
2
Setup image sizes
  • Go to Admin - System » Settings Images tab
  • Upload your logo, icon and set image sizes of theme given in Image size adjustment section
  • Set image sizes for other modules of theme given in Image size adjustment section
Read more...
3
Setup slideshow
  • Upload slideshow images from admin - System » Design » Banners
  • Go to Extensions » Modules » Banner and set preferable size parameters
Read more...
4
Explore other features
Read more...

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Copy theme files

Theme activation

 

 

 

 

 

 

Image size adjustment


General Image size adjustment

We strongly recommended set all preferred image size parameters as display in below image

Other preferred image size parameters

slideshow - Home page W: 940 x H: 145
Carousel – Manufacturers W: 80 x H: 80

 

 

 

 

 

 

 

Theme Features


MetroCart Theme provides many configuration options, Read carefully the descriptions and instructions below to manage theme easily.

MetroCart Theme module

This theme included custom module call MetroCart Theme which you can find from module list as display in below image 

Custom Content

There are 4 tabs in this section to manage custom content of MetroCart Theme

1 - Main Slider

From here you can set size of slideshow and modules to display on home page main slide show, see below image

Login to your Admin Area
Go to System > Design > Banner
Click on Insert button. Pick a name for your banner Home Slider for example, make sure it is enabled and click on "Add Banner". Pick a title and link for the first slider image then choose the image itself (Browse Files). Make sure your images are the appropriate size: 962x356 Repeat this step for as many slider Items you want to have then click SAVE

Go to Extensions > Modules > Slideshow > Edit and from the banner dropdown select the previously created "Home Slider" banner.
Put in the following values for slider size shown on the image below to make sure your slider fills up the appropriate space: 962x356.
For Layout select Home (you want it showing on the Home page), Position - Content Top.

 

 

2 - Category Accordion Menu

This section allows you to setup a Product Categories. You can display Product Categories in product & categories page

 

 

3 - Product Tab

Go to Extensions > Modules > Product Tab > Edit .

 

 

4 - MetroCart Theme Custom Options

Go to Extensions > Modules > MetroCart Theme Custom Options > Edit .

This section allows you to edit theme Fonts color, Title color, Heading Color


This section allows you to change Body background color or can change pre defined patterns, add your own custom patterns as background of the theme.


This section allows you to change Top Menu background color, link color, sub-menu background color and borders color of the top menu section.


This section allows you to change Footer Menu background color, Title color, Links color and hove color, text-color border color of the footer.


This section allows you to change color of New Price, old price, tax amount color of the price Section.


This section allows you to manage color of buttons color, hover color, text color of the button and its hover color.


This section allows you to manage header top menu style, icons, custom links, informatic links, custom blocks etc...


This section allows you to add custom column in the footer and add content to it.


This section allows you to add twitter account id to display the tweets.


This section allows you to add facebook account id to display the facebook likes.


This section allows you to edit social link's id


This section allows you to add your contact details.


This section allows you to display the payment details card to display.


This section allows you to display the customer support details.


This section allows you to display your company name.


This section allows you to change fonts of the theme.


This section allows you to add custom css.

 

 

6 - Price Filter Slider

7 - Shop By Color

 

 

 

 

 

 

CSS Structure


Here is the list of css files that MetroCart OpenCart theme uses:

The best practice for css customizations is to always put new styles at the bottom of the main stylesheet. This will help you to easily transfer all the changes, when you upgrade Theme.

 

 

 

 

 

 

JavaScript


This theme imports below javascripts

There are few other javascript files as well which are default included by OpenCart source you can find all javascript from below path

 

 

 

 

 

 

 

Sources and Credits


We have used the following images & other files as listed.

 

 

 

 

 

 

Theme Support


I'm happy to help you but before you contact me, please make sure that you followed the whole specification very carefully, because it cover whole process to install theme.

If you have any question please contact me via contact form on themeforest profile.

Thank You