SuperStar - The Premium Responsive OpenCart Template

Created: October 2015
OpenCart Themes by ThemeGlobal.com

Manual Installation

Before installing the SuperStar theme, it is assumed that you have a working OpenCart installation.

We recommend to use this theme on a clean installation or existing shops without custom modifications.

IMPORTANT! Although SuperStar doesn't overwrite any core files is a good practice to backup your files and sql database before making any upgrades or changes.

1Install VQMOD

This template requires VQMOD.

If you already have VQMOD skip this step. Otherwise, get the latest release here Download VQMOD.

Follow the instructions how to install VQMOD on OpenCart.

2Upload theme files

Unzip the "tg_superstar_x.x.x.x_version_x.x.zip " you have downloaded from ThemeGlobal.com to a local folder on your computer. Enter the tg_superstar_x.x.x.x_version_x.x folder.

Select the folder that matches to your OpenCart version and upload all the files from "OpenCart x.x.x.x" to the directory you have installed OpenCart in.

Setup The Template

The instruction how to configures the template to look like the DEMO SITE

We recommend to use this theme on a clean installation or existing shops without custom modifications.

IMPORTANT! Although SuperStar doesn't overwrite any core files is a good practice to backup your files and sql database before making any upgrades or changes.

1Enable TG SUPERSTAR SETTINGS

Go to Admin > Extensions > Modules

Find a module name TG SUPERSTAR SETTINGS click on Install.

2 IMPORTANT! Install Template System Files

After installing the TG SUPERSTAR SETTINGS go to front page of your store or to this link http://yourdomain.com/themeinstall/index.php

You should see the message: "TEMPLATE HAS BEEN INSTALLED ON YOUR SYSTEM!" Otherwise please contact our support staff to get help.

3Activate default Skin and Install Sample Data

Go to Admin > Extensions > Modules > TG SUPERSTAR SETTINGS > Edit

You should see the image presented below:

Image Setting

From the list choose the skin superstar_default and press the button Active skin.

After activating the skin you should see the image presented below:

Image Setting

Go to Install Data tab and Press install button for the module you want with the sample data or click install for All TG SuperStar Modules to install all modules at once. After that click Save Button.

Congratulations! Installation is complete. Go back to your main store front to view the template installed on your site.

Layout

Image Setting

Modules

Image Setting

M1Welcome Text

You can change the text from Admin > Extensions > Modules > TG SUPERSTAR SETTINGS > Edit > tab General & Translations > Insert Header Welcome Text: > Save

M2Hotline Text

You can change the text from Admin > Extensions > Modules > TG SUPERSTAR SETTINGS > Edit > tab General & Translations > Insert Header Hotline Text: > Save

M3Logo Image

You can change the image from Admin > System > Settings > Edit your Store > tab Image > Click on Store Logo image > Upload your logo > Save

M4TG Superstar MegaMenu

This module allows you to manage your own header menu instead of the default menu very easily without coding knowlege required. When this module is disabled the Default Menu will show.

Here is the example how to create the category FASHION like in our demo site.

1. Go to Admin > Extensions > Modules > TG Superstar MegaMenu > Edit > Create new item

Item setting

Name - Category name
Description - Small text under Category name
Icon - You can upload icon for category. Icon will be displayed before category name
Link - url to category
Link in new window - enable if you want to open url in new window.
Position - Select where you want to have edited category should show. On left or right side.
Submenu width - Width of submenu. You can use % of "px".
Display menu on:
- Hover - Default hover
- Hover intent - Opened for few seconds after hover over
- Click - Click to open submenu

Content item

This fields are only for Subcategories.

Content width - width of edited subcategory. 12 is full width 3/12 = 1/4
Content type - choose what kind of content will be in this subcategory.

2. Creating a parent category FASHION. Add informations as below and click save.

Name - FASHION
Link - index.php?route=product/category&path;=20
Status - enabled
Position - Left
Submenu width - 100%
Display submenu on - Hover

3. Creating a submenu S1 Fashion (Sale) . Add informations as below and click save.

Name - S1 Fashion
Status - enabled
Position - Left
Submenu width - 100%
Display submenu on - Hover
Content width - 2/12
Content type - HTML
You can also add Products or Categories. In this case we go with HTML.
Change the HTML filed to code view mode and add the information below:

HTML - <a onclick="index.php?route=product/special" href="/index.html" style="color:#e70c0c;font-weight: 700;">Sale</a> <a onclick="#" href="/#" style="font-weight: 700;">New</a> <a onclick="#" href="/#" style="font-weight: 700;">New Collection</a> <a onclick="#" href="/#" style="font-weight: 700;">Casual</a> <a onclick="#" href="/#" style="font-weight: 700;">Suits</a> <a onclick="#" href="/#" style="font-weight: 700;">Blacksmith</a> <a onclick="#" href="/#" style="font-weight: 700;">Sport</a>

4. Doing the same for submenu S2 Fashion (Clothing). Add informations as below and click save.

HTML - Clothing <a onclick="#" href="/#">Coats</a> <a onclick="#" href="/#">Outerwear</a> <a onclick="#" href="/#">Blazers</a> <a onclick="#" href="/#">Leather</a> <a onclick="#" href="/#">Cardigans and sweaters</a> <a onclick="#" href="/#">Shirt</a> <a onclick="#" href="/#">T-shirts</a> <a onclick="#" href="/#">Polo shirts</a> <a onclick="#" href="/#">Pants</a> <a onclick="#" href="/#">Jeans</a> <a onclick="#" href="/#">Shorts</a> <a onclick="#" href="/#">Pyjamas</a>

5. Doing the same for submenu S3 Fashion (Accessories). Add informations as below and click save.

HTML - Accessories <a onclick="#" href="/#">Shoes</a> <a onclick="#" href="/#">Bags</a> <a onclick="#" href="/#">Belts</a> <a onclick="#" href="/#">Leather goods</a> <a onclick="#" href="/#">Bracelets</a> <a onclick="#" href="/#">Gloves</a> <a onclick="#" href="/#">Ties</a> <a onclick="#" href="/#">Sunglasses</a> <a onclick="#" href="/#">Hats and caps</a> <a onclick="#" href="/#">Other accessories</a>

6. Doing the same for submenu S4 Fashion (Catalogue). Add informations as below and click save.

HTML - Catalogue<a onclick="#" href="/#">Winter 2015</a> <a onclick="#" href="/#">2015 Autumn</a> Lookbooks<a onclick="#" href="/#">2014 December</a> <a onclick="#" href="/#">2014 November</a> <a onclick="#" href="/#">2014 August</a> The Post

7. Doing the same for submenu S5 Fashion (Image), only with Content width - 4/12. Add informations as below and click save.

HTML - <a onclick="index.php?route=product/special" href="/index.html"><img src="/images/superstar/oc_subdomain/sale.jpg"></a>

8. Drag each submenu below the parent category like in the image below:

M5TG Superstar Revolution Slider

TG Superstar Revolution Slider is an all-purpose slide displaying solution that allows for showing almost any kind of content with highly customizable, transitions, effects and custom animations.

HOW TO SET SLIDERS:

1. Go to Admin > Extensions > Modules > TG Superstar Revolution Slider > Edit > tab Existing Modules > Create new slider

2. In general options set:

Slider name - New Slider
Width slider (px) - 1920
Height slider (px) - 520
Slideshow speed - 9000
Layout Type - Full width

Recommended size for the slider is 1920(w) and 520(h).

3. Than click on plus icon to add slide.

4. Upload your image, set status to enabled, select transition effect and add your link.

You should see the image presented below:

Add as many sliders as you want.

ELEMENTS SETTINGS:

For each Slider you can add a sub text or image elements.

Element type - Choose type of content in your element then add text/code in TEXT/HTML field or upload image.
Element class - Class name for edited element.
Element style(css) - Your own style for created class.
Animation class - Your own style for created class.
- lft - Long from Top
- lfb - Long from Bottom
- lfr - Long from Right
- lfl - Long from Left
- fade - fading
- sft - Short from Top
- sfb - Short from Bottom
- sfr - Short from Right
- sfl - Short from Left
Animation Easing - special easing effect of the animation.
Animation Endeasing - special endeasing effect of the animation.
Speed - Animation speed.
Delay - Animation start time.
X - Horizontal position of the element. For example if X=100, it means left: 100px;
Y - Vertical position of the element. For example if Y=50, it means top: 50px;

MODULE PLACEMENT:

After setting up Slider you need to add it in module placement.

1. Go to Admin > Extensions > Modules > TG Superstar Revolution Slider > Edit > tab Module placement > Add item

Adjust the settings with the following values and click Save.

M6 M11 M13 M15TG SuperStar Filter Product

Allows you to create your own custom product sections and name them whatever you want. You can add any number of products to any of them and place unlimited modules with different sets of products on different pages.

HOW TO ADD:

1.Go to Admin > Extensions > Modules > TG SuperStar Filter Product > Install or Edit > Add Module

MODULE TAB

2. Now you can add item as tab. For example in the demo site we added 6 items: Women, Men Baby, Girl, Cosmetic and New Collection. For each item you can choose where do you want to get product from: Latest Products, Special Products, Bestsellers Products, Manually choose any products or category with autocomplete suggestion

MODULE SETTING

Carousel - turn on or off product scrolling.
Dimension (W x H) and Resize Type - you can set the size of product pictures
Max Items - Max Columns - Limit Items In Carousel - you can set the number of products in one row, the number of rows as well as the number of all products in a module.
Layout - subpage on which the module is to be displayed.
Position - position, in which place the module is to be displayed.
Status - you can decide if the module is to be visible or not.
Sort Order - here you type in the numbers. The greater number you type in, the lower the module is to be displayed regarding other modules.

M8 M10 M12 M14 M16 HTML Content

HTML Content is used to add any content (HTML) at any place on the webpage.

HOW TO ADD:

M8This is the example how to add the HTML Content > Top Left. Recommended size for the banner is 500(w) and 475(h).

Go to Admin > Extensions > Modules > HTML Content > Install or Edit

Adjust the settings with the following values and click Save.

Module Name - Top Left

Description - <a href="/index.html"><img src="/images/hodeco/oc_subdomain/banner1.jpg"></a>

Status - Enabled

M10 For HTML Content > Column Left. Recommended size for the banner is 600(w) and 778(h).

Module Name - Column Left

Heading Title - Fashion

Description - <a href="/index.html"><img src="/images/hodeco/oc_subdomain/banner2.jpg"></a>

Status - Enabled

M12 For HTML Content > Middle Top Left. Recommended size for the banner is 600(w) and 778(h).

Module Name - Middle Top Left

Heading Title - Technology

Description - <a href="/index.html"><img src="/images/hodeco/oc_subdomain/banner3.jpg"></a>

Status - Enabled

M14 For HTML Content > Middle Center Left. Recommended size for the banner is 600(w) and 778(h).

Module Name - Middle Center Left

Heading Title - Home & Life

Description - <a href="/index.html"><img src="/images/hodeco/oc_subdomain/banner4.jpg"></a>

Status - Enabled

M16 For HTML Content > Middle Bottom Left. Recommended size for the banner is 600(w) and 795(h).

Module Name - Middle Bottom Left

Heading Title - Hot Trends

Description - <a href="/index.html"><img src="/images/hodeco/oc_subdomain/banner5.jpg"></a>

Status - Enabled

Add HTML MODULES to Home Layout

Go to Admin > System > Design > Layouts > Edit Home

Adjust the settings with the following values and click Save.

M17News/Blog

The news/blog module is not included in the template. If you want to use it on your webpage, you need to purchase the module below. It is just $12 and is one of the best blog module on the market.

http://shopencart.com/opencart-2.x-modules/news-blog-opencart-1.5

You don't have to modify the module to fit the template. Just follow the installation instruction included in the module and your blog will look exactly the same as in demo version.

M19Custom Footer Block

You can change the content from Admin > Extensions > Modules > TG SUPERSTAR SETTINGS > Edit > tab Custom Footer > Add information for Custom Footer 1 Block or Custom Footer 2 Block > Save

M21Social Media

You can change the content from Admin > Extensions > Modules > TG SUPERSTAR SETTINGS > Edit > tab Social Media > Add information and set status to ON > Save

M22Payment

You can change the content from Admin > Extensions > Modules > TG SUPERSTAR SETTINGS > Edit > tab Payment > Add item > Upload your payment image > Save

M23Brainy Filter

The Brainy Filter module is not included in the template, just integrated with the theme. If you want to use it on your webpage, you need to purchase the module below. It is one of the most advanced & elegant Filter module on the market.

Brainy Filter

You don't have to modify the module to fit the template. Just follow the installation instruction included in the module and your module will look exactly the same as in demo version. Or contact our support staff to get help.

Image Setting