## So ClickBoom

View demoMore detail
This guide will help you install SO ClickBoom Template step by step.

1SYSTEM REQUIREMENTS – Back to top

System Requirements: here

2INSTALLATION – Back to top

### 2.1 Install Theme

1 Install default Opencart

You can download Opencart here.

2 Install Theme

> Feel free to check the detailed VIDEO TUTORIAL

Use the new Extension Installer featured in OpenCart 2.0

1 : Please type the following link: https://www.opencart.com/index.php?route=extension/extension/info&extension_id=19862. Extension allows to upload extensions without using FTP

2: Go to Extensions > Extension Installer > Click Upload and select the “no_ftp.ocmod.XML” file to upload. Then You should see the message Success: You have installed your extension!
3: Go to Extensions > Extension Installer > Click Upload and select the “so_revo_template_oc2.3.0_v1.0.0.ocmod” file to upload. Then You should see the message Success: You have installed your extension!
4: Go to System > User > User-Group > Click “Edit” button > Then you click “Select All” button
6: Go to Extensions > Modifications > Click “Refresh” button to run “ocmod.xml” file
7: Go to Extensions > Theme Control Panel and edit your store: General Tab, Layout Tab, Page Tab…
8: Go to Extensions >> Modifications >> Click “Refresh” button
8: Refresh your site and you got it

### 2.2 Select Layout

> Feel free to check the detailed VIDEO TUTORIAL

### 2.3 CreateColor Theme Control

> Feel free to check the detailed VIDEO TUTORIAL

### 2.4 Install Language and Override Language

1. Install Laguage

> You can read more information: Here

2. Override Language

1: Extracting
Extract the archive file of the language pack you have downloaded into your PC: “patch_language_v2.3.x”
2: Renaming
The folders are need to be changed:

patch_language_v.2.3.x\admin\language\%locale% patch_language_v.2.3.x\catalog\language\%locale% &nbsp; patch_language_v.2.3.x\admin\language\%locale%\%locale%.php patch_language_v.2.3.x\catalog\language\%locale%\%locale%.php &nbsp;

1 2 3 4 5 6 | patch_language_v.2.3.x\admin\language\%locale% patch_language_v.2.3.x\catalog\language\%locale% &nbsp; patch_language_v.2.3.x\admin\language\%locale%\%locale%.php patch_language_v.2.3.x\catalog\language\%locale%\%locale%.php &nbsp;

Rename both of these folders to the language of your choice: replace “%locale%” with the name of the language (English, German…).
3:Uploading
Upload the admin and catalog folders you have replaced into your folder upload theme
4: Translating
Then please go to Catalog > language > extension > choose 1 of 5 files PHP >> translate the text to your preference

3CONFIGURATION – Back to top

### 3.1 Template Configuration

##### 1. Template Configuration

Go to Extensions > Modules > Theme Control Panel >> Click “Edit” Button. All of parameters of this theme are divided into the following groups, in which they are explained themselves:

Screenshot Backend Settings

General: General/ Header/ Footer/ Banner Effect

Layout: Layout

Pages: Product Listings/ Product Labels/ Product Page

Fonts: Fonts

Social Widgets Accounts: Social Widgets Accounts

Custom Code: CSS Input/ CSS File/ JS Input/ JS File

Advanced: Advanced

### 3.2 Menu Configuration

3.2.1 Mega Menu Configuration

Frontend Appearance

##### 1. Create New Megamenu

Go to Extensions >> Modules >> Find module “SO Mega Menu” >> Click “Create new item” button >> Enter a menu’s name: “SO Mega Menu” >> Then Click “Save” button >> Create New Megamenu Here

##### 2. Electronic Menu Configuration

Frontend Appearance

Check the menu item in the boxes in the left column, click “Createnew Item” to add Submenus to the menu and drag/drop to arrange them.

To configure Electronic Menu, click on “pencil” symbol to configure its backend settings

Screenshot: Backend settings

To configure Banner 1 – Submenu, click on “pencil” symbol to configure its backend settings

Screenshot: Backend settings

Banner 2, Banner 3, Banner 4 are created in the same way you do with Banner 1

To configure Sub category1 – Submenu, click on “pencil” symbol to configure its backend settings

Backend settings

Sub category2, Sub category3, Sub category4 are created in the same way you do with Sub category1

##### 3. Accessories Menu Configuration

Frontend Appearance

Check the menu item in the boxes in the left column, click “Createnew Item” to add Submenus to the menu and drag/drop to arrange them.

To configure Accessories Menu, click on “pencil” symbol to configure its backend settings

Screenshot: Backend settings

To configure Automotive – Submenu, click on “pencil” symbol to configure its backend settings

Screenshot: Backend settings

To configure Banner – Submenu, click on “pencil” symbol to configure its backend settings

Screenshot: Backend settings
Copy and paste the Code into editor:

<div class="img-banner"><a href="#"><img src="image/catalog/banner/hori-menu-banner1.jpg" alt="banner"></a></div>

1 | <div class="img-banner"><a href="#"><img src="image/catalog/banner/hori-menu-banner1.jpg" alt="banner"></a></div>

To configure HTML Quick links – Submenu, click on “pencil” symbol to configure its backend settings

Screenshot: Backend settings
Copy and paste the Code into editor:

<div class="quicklinks-menu"> <ul> <li><span>Quicklinks: </span></li> <li><a href="#">Sony,</a></li> <li><a href="#">Iphone,</a></li> <li><a href="#">Electronics,</a></li> <li><a href="#">Bag,</a></li> <li><a href="#">Fashion,</a></li> <li><a href="#">Hot Sale,</a></li> <li><a href="#">Featured,</a></li> <li><a href="#">Game</a></li> </ul> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="quicklinks-menu"> <ul> <li><span>Quicklinks: </span></li> <li><a href="#">Sony,</a></li> <li><a href="#">Iphone,</a></li> <li><a href="#">Electronics,</a></li> <li><a href="#">Bag,</a></li> <li><a href="#">Fashion,</a></li> <li><a href="#">Hot Sale,</a></li> <li><a href="#">Featured,</a></li> <li><a href="#">Game</a></li> </ul> </div>

3.2.2 Vertical Menu Configuration

Frontend Appearance

##### 1. Create New Vertical Menu

Go to Extensions >> Modules >> Find module “SO Mega Menu” >> Click “Create new item” button >> Enter a menu’s name: “SO Vertical Menu” >> Then Click “Save” button >> Create New Vertical Here

##### 2. Smartphone Menu Configuration

Frontend Appearance

Check the menu item in the boxes in the left column, click “Createnew Item” to add Submenus to the menu and drag/drop to arrange them.

To configure Smartphone & Tablets Menu, click on “pencil” symbol to configure its backend settings

Screenshot: Backend settings

To configure Sub category – Submenu, click on “pencil” symbol to configure its backend settings

Screenshot: Backend settings

To configure HTML Content – Submenu, click on “pencil” symbol to configure its backend settings

Screenshot: Backend settings
Copy and paste the Code into editor:

<div class="row img-banner"><a href="#"><img src="image/catalog/banner/ver-menu-banner1.jpg" alt="banner"></a></div>

1 | <div class="row img-banner"><a href="#"><img src="image/catalog/banner/ver-menu-banner1.jpg" alt="banner"></a></div>

To configure HTML Content Bottom (HTML Quick links) – Submenu, click on “pencil” symbol to configure its backend settings

Screenshot: Backend settings
Copy and paste the Code into editor:

<div class="quicklinks-menu"> <ul> <li><span>Quicklinks: </span></li> <li><a href="#">Sony,</a></li> <li><a href="#">Iphone,</a></li> <li><a href="#">Electronics,</a></li> <li><a href="#">Bag,</a></li> <li><a href="#">Fashion,</a></li> <li><a href="#">Hot Sale,</a></li> <li><a href="#">Featured,</a></li> <li><a href="#">Game</a></li> </ul> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="quicklinks-menu"> <ul> <li><span>Quicklinks: </span></li> <li><a href="#">Sony,</a></li> <li><a href="#">Iphone,</a></li> <li><a href="#">Electronics,</a></li> <li><a href="#">Bag,</a></li> <li><a href="#">Fashion,</a></li> <li><a href="#">Hot Sale,</a></li> <li><a href="#">Featured,</a></li> <li><a href="#">Game</a></li> </ul> </div>

##### 3. Computer Menu Configuration

Frontend Appearance

Check the menu item in the boxes in the left column, click “Createnew Item” to add Submenus to the menu and drag/drop to arrange them.

To configure Fashion Menu, click on “pencil” symbol to configure its backend settings

Screenshot: Backend settings

To configure Sub category – Submenu, click on “pencil” symbol to configure its backend settings

Screenshot: Backend settings

To configure HTML Content – Submenu, click on “pencil” symbol to configure its backend settings

Screenshot: Backend settings
Copy and paste the Code into editor:

<div class="row banner"><a href="#"><img src="image/catalog/banner/ver-menu-banner2.jpg" alt="banner2"></a></div>

1 | <div class="row banner"><a href="#"><img src="image/catalog/banner/ver-menu-banner2.jpg" alt="banner2"></a></div>

### 3.3 Extension Configuration

Please click: here to find out how to configure SO Page Builder

There are two ways to configure Extensions of this Theme:

Options1: Go to Admin Control Panel >> Extensions >> And choose the module you want.

Module: Social Login Configuration

Frontend Appearance

Please click: here to read more about SO Social Login

Options2: Go to Admin Control Panel >> Magentech >> SO Page Builder >> Select the Layout you want.

1. Layout1.
Positon of Layout1: here

To configure Layout1, please go to Admin Control Panel >> Magentech >> SO Page Builder >> Select “Layout1″ and click “Edit” button .

Screenshot Backend Settings: here

2. Layout2.
Positon of Layout2: here

To configure this Layout, please go to Admin Control Panel >> Magentech >> SO Page Builder >> Select “Layout2″ and click “Edit” button .

Screenshot Backend Settings:here

3. Layout3.
Positon of Layout3: here

To configure this Layout, please go to Admin Control Panel >> Magentech >>SO Page Builder >> Select “Layout3″ and click “Edit” button .

Screenshot Backend Settings: here

4. Layout4
Positon of Layout4: here

To configure this Layout, please go to Admin Control Panel >> Magentech >> SO Page Builder >> Select “layout4″ and click “Edit” button .

Screenshot Backend Settings:here

5. Layout5
Positon of Layout5: here

To configure this Layout, please go to Admin Control Panel >> Magentech >> SO Page Builder >> Select “layout5″ and click “Edit” button .

Screenshot Backend Settings:here

> Note: You can read other extensions here:

> Simple blog: here.

4SUPPORT – Back to top

Thank you so much for purchasing this template. If you have any questions that are beyond the scope of this help file, please send us via: Submit a Ticket

Thanks so much!