So ClickBoom

View demo More 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

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;

patch_language_v.2.3.x\admin\language\%locale%

patch_language_v.2.3.x\catalog\language\%locale%

patch_language_v.2.3.x\admin\language\%locale%\%locale%.php

patch_language_v.2.3.x\catalog\language\%locale%\%locale%.php

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

Layout

Pages

Fonts

Social Widgets Accounts

Social Widgets Accounts

Custom Code

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>

<ul>

<li><span>Quicklinks: </span></li>

<li><a href="#">Iphone,</a></li>

<li><a href="#">Electronics,</a></li>

<li><a href="#">Fashion,</a></li>

<li><a href="#">Featured,</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>

<ul>

<li><span>Quicklinks: </span></li>

<li><a href="#">Iphone,</a></li>

<li><a href="#">Electronics,</a></li>

<li><a href="#">Fashion,</a></li>

<li><a href="#">Featured,</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!