HoDeCo - The Responsive Furniture OpenCart Template

Created: September 2015
OpenCart Templates by ThemeGlobal.com

Manual Installation

Before installing the HoDeCo 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 HoDeCo 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_hodeco_x.x.x.x_version_x.x.zip " you have downloaded from ThemeGlobal.com to a local folder on your computer. Enter the tg_hodeco_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 HoDeCo 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 HODECO SETTINGS

Go to Admin > Extensions > Modules

Find a module name TG HODECO SETTINGS click on Install.

2 IMPORTANT! Install Template System Files

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

You should see the image presented below:

Image Setting

From the list choose the skin hodeco_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 HoDeCo 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

M1Logo Image

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

M2Custom Text

You can change the text from Admin > Extensions > Modules > TG HODECO SETTINGS > Edit > tab Custom Header > Insert text for each block: > Save

M3TG HoDeCo 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 KITCHEN like in our demo site.

Image Setting

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

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

3. Creating a submenu Kitchen Submenu1 (Find your dream kitchen) . Add informations as below and click save.

Name - Kitchen Submenu1
Status - enabled
Position - Left
Submenu width - 100%
Display submenu on - Hover
Content width - 8/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 - Find your dream kitchen<img src="/images/hodeco/oc_subdomain/menu4.jpg">

4. Doing the same for submenu Kitchen Submenu2 (Kitchen Faucets), only with Content width - 2/12. Add informations as below and click save.

HTML - Kitchen Faucets<a onclick="#" href="/#">Touchless</a> <a onclick="#" href="/#">Single-Handle</a> <a onclick="#" href="/#">Two-Handle</a> <a onclick="#" href="/#">Pull-Down</a> <a onclick="#" href="/#">Pull-Out</a> Standard Spout Bridge Pot Fillers Water Filtration Faucet Families Bar SinksBar Faucets <a onclick="#" href="/#">Top-Mount</a> <a onclick="#" href="/#">Acrylic</a>

5. Doing the same for submenu Kitchen Submenu3 (Kitchen Sinks) . Add informations as below and click save.

HTML - Kitchen Sinks<a onclick="#" href="/#">Apron-Front</a> <a onclick="#" href="/#">Under-Mount</a> <a onclick="#" href="/#">Top-Mount</a> <a onclick="#" href="/#">Cast Iron</a> <a onclick="#" href="/#">Stainless Steel</a> Fireclay Utility Sinks<a onclick="#" href="/#">Under-Mount</a> <a onclick="#" href="/#">Top-Mount</a> <a onclick="#" href="/#">Enameled Cast</a> <a onclick="#" href="/#">Stainless Steel</a> <a onclick="#" href="/#">Utility Faucets</a> Fireclay Accessories

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

M4TG HoDeCo Revolution Slider

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

2. In general options set:

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

Recommended size for the slider is 1300(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 HoDeCo Revolution Slider > Edit > tab Module placement > Add item

Adjust the settings with the following values and click Save.

M7 M11TG HoDeCo 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 HoDeCo 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 3 items: Bestseller, User Choice and News Arrival. 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.

M6 M7 M8 M9 M10 M12HTML Content

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

HOW TO ADD:

M6This is the example how to add the HTML Content Middle Left. Recommended size for the banner is 600(w) and 547(h).

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

Adjust the settings with the following values and click Save.

Module Name - Middle Left Banner.

Description - <img src="/images/hodeco/oc_subdomain/banner1.jpg">

Status - Enabled

M7 For HTML Content Middle Right. Recommended size for the banner is 600(w) and 260(h).

Module Name - Middle Right Banner

Description - <img src="/images/hodeco/oc_subdomain/banner2.jpg">

Status - Enabled

M8 For HTML Content Middle Bottom Left. Recommended size for the banner is 578(w) and 520(h).

Module Name - Middle Bottom Banner 1

Description - <img src="/images/hodeco/oc_subdomain/banner3.jpg">

Status - Enabled

M9 For HTML Content Middle Bottom Right. Recommended size for the banner is 578(w) and 520(h).

Module Name - Middle Bottom Banner 2

Description - <img src="/images/hodeco/oc_subdomain/banner4.jpg">

Status - Enabled

M10 For HTML Content Column Right. Recommended size for the banner is 578(w) and 780(h).

Module Name - Column Right Banner

Description - <img src="/images/hodeco/oc_subdomain/banner5.jpg">

Status - Enabled

M12 For HTML Content Content Bottom. Recommended size for the banner is 1200(w) and 164(h).

Module Name - Home Bottom Banner

Description - <img src="/images/hodeco/oc_subdomain/banner6.jpg">

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.

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

M16Custom Footer Block

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

M18Social Media

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

M19Payment

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