Techstore - The Premium Responsive OpenCart Template

Created: December 2015
OpenCart Themes by ThemeGlobal.com

Manual Installation

Before installing the Techstore 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 Techstore 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_techstore_x.x.x.x_version_x.x.zip " you have downloaded from ThemeGlobal.com to a local folder on your computer. Enter the tg_techstore_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 Techstore 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 TECHSTORE SETTINGS

Go to Admin > Extensions > Modules

Find a module name TG TECHSTORE SETTINGS click on Install.

2 IMPORTANT! Install Template System Files

After installing the TG TECHSTORE 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 TECHSTORE SETTINGS > Edit

You should see the image presented below:

Image Setting

From the list choose the skin techstore_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 Techstore 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

M1Hotline Text

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

M2Logo Image

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

M3TG Techstore 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 ALL PRODUCTS like in our demo site.

1. Go to Admin > Extensions > Modules > TG Techstore 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 ALL PRODUCTS. Add informations as below and click save.

3. Creating a submenu Headphones . Add informations as below and click save.

Name - Headphones
Status - enabled
Position - Left
Submenu width - 100%
Display submenu on - Hover
Content width - 3/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 - <div style="text-align:center;"><p><a href="/index.html" onclick='product/category&path=59";"'></a></p><p><a href="/index.html" onclick='product/category&path=59";"' style="font-size: 14px; font-weight: 400;" target="_self">Headphones</a></p></div>

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

HTML -

5. Doing the same for submenu Mice Logitech. Add informations as below and click save.

HTML -

Mice Logitech

6. Doing the same for submenu Tablet Keyboards. Add informations as below and click save.

HTML - <div style="text-align:center;"><p style="text-align"><a href="/index.html" onclick='product/category&path=61";"'></a></p> <p><a href="/index.html" onclick='product/category&path=61";"' style="font-size: 14px; font-weight: 400;" target="_self">Tablet Keyboards</a></p> </div>

7. Doing the same for submenu Keyboards. Add informations as below and click save.

HTML - <div style="text-align:center;"><p style="text-align"><a href="/index.html" onclick='product/category&path=62";"'></a></p> <p><a href="/index.html" onclick='product/category&path=62";"' style="font-size: 14px; font-weight: 400;" target="_self">Keyboards</a></p> </div>

8. Doing the same for submenu Projectors. Add informations as below and click save.

HTML - <div style="text-align:center;"><p style="text-align"><a href="/index.html" onclick='product/category&path=63";"'></a></p> <p><a href="/index.html" onclick='product/category&path=63";"' style="font-size: 14px; font-weight: 400;" target="_self">Projectors</a></p> </div>

9. Doing the same for submenu Mobile Phones & Tablets. Add informations as below and click save.

HTML - <div style="text-align:center;"><p style="text-align"><a href="/index.html" onclick='product/category&path=64";"'></a></p> <p><a href="/index.html" onclick='product/category&path=64";"' style="font-size: 14px; font-weight: 400;" target="_self">Mobile Phones & Tablets</a></p> </div>

10. Doing the same for submenu PlayStation. Add informations as below and click save.

HTML - <div style="text-align:center;"><p style="text-align"><a href="/index.html" onclick='product/category&path=65";"'></a></p> <p><a href="/index.html" onclick='product/category&path=65";"' style="font-size: 14px; font-weight: 400;" target="_self">PlayStation</a></p> </div>

11. Doing the same for submenu Business Solutions. Add informations as below and click save.

HTML - <div style="text-align:center;"><p style="text-align"><a href="/index.html" onclick='product/category&path=66";"'></a></p> <p><a href="/index.html" onclick='product/category&path=66";"' style="font-size: 14px; font-weight: 400;" target="_self">Business Solutions</a></p> </div>

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

M4TG Techstore Revolution Slider

TG Techstore 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 Techstore Revolution Slider > Edit > tab Existing Modules > Create new slider

2. In general options set:

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

Recommended size for the slider is 1200(w) and 600(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 Techstore Revolution Slider > Edit > tab Module placement > Add item

Adjust the settings with the following values and click Save.

M5 M6TG Techstore 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 Techstore 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.

M7News/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.

M11Custom Footer Block

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

M13Social Media

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

M14Payment

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

M15Brainy 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