SO Megashop (2Layout)

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

 

1SYSTEM REQUIREMENTS – Back to top

SO Megashop is compatible with Opencart 2.0.x. Please make sure your system meets the following requirements:

  • Please go to here. to read more information

    • 3INSTALLATION – Back to top

    There are two ways to install a SO Theme:

    • Install Quickstart: By using this package, you will set the template exactly as our Demo with sample data.
    • Install Template : If you exist a opencart website you can install only template.

    3.1 Install with Quickstart Package:

  • Please go to here. to view ” Install quickstart package”
    • 3.1.1 Create new database

     
    Step 1: Open your Browser and type : localhost/phpmyadmin or yourdomain/phpmyadmin
     
    Step 2: Then create database
     

    3.1.2 Extract and Upload the whole quickstart package (admin, catalog, image … in tt_cygnus_quickstart folder ) to your server

     

    3.1.3 Open browser and navigate to your site (where the quickstart uploaded) to load default Opencart installer with the database you just created.

     
    As an example, name of opencart is SO-Megashop: Https://Opencart/SO-Megashop/upload/install/index.php then click “install” button

    3.1.4 Enter the username and password for the administration


     

    3.1.5 Installation Complete


    You need to delete install folder

     

    Note:

    After installing quickstart package and choosing Layout you want. To retrieve sample data for theme default, please go to Theme Control Panel >> Choose Sample Data >> Click “Install data” button

    3.1.6 Login your opencart admin
    • Go to System -> Settings
    • At tab Store Name , choose your default store, click Edit button
    • Choose tab Store

    2.2 Install Theme

    3.2.1 Install default Opencart

    You can download Opencart here.

    You can install default Opencart the same as part 2.1 Install with Quickstart Package

    3.2.2 Install Theme

    There are two ways to install Theme

    Option1: you to use the new Extension Installer featured in OpenCart 2.0

    • Step 1 : Click FTP Accounts from your cPanel

    • Step 2: Create username and password

    • Step 3: Enable FTP. please go to System >> Settings >> Click Edit next to your store >> Click FTP tab and enter the FTP username & password, which you just created from the cPanel

    • Step 4: Go to Extensions > Extension Installer > Click Upload and select the “so_megashop_template.ocmod.zip” file to upload. Then You should see the message Success: You have installed your extension!

      • Then You should see the message Success: You have installed your extension!

    • Step 5: You run the vqmod on your Frontend. Please type the following link: http://www.yoursite.com/vqmod/install. Then you should see the message Success: You have installes your Vqmod !. Refresh your site
    • Step 6: Go to Extensions > Themes > Edit (your store)

      • Click on the “Theme Directory” tab. From the drop down listing of available themes select SO Megashop

    • Step 7: Go to Extension > Modules > SO Theme Control Panel and click on the ‘install’ link

      • Then click on the ‘edit’ button to cofigure this module.

    • Step 8: To retrieve sample data for theme default, please go to Theme Control Panel >> Choose Sample Data >> Click “Install data” button

    Option2: Just copy your files to your webserver

    • Extract the so_megashop_template.ocmod.zip from the archive you downloaded from Themeforest.
    • Open the folder that corresponds to your OpenCart version and upload all the files from “FILES_TO_UPLOAD” to the root directory you have installed OpenCart in. Drag the 5 folders (admin, catalog, image, system, ocmod) over to your OpenCart installation

    • Login your opencart admin
    • Go to System > Settings > Edit (your store)
    • Click on the Store tab. From the drop down listing of available themes select SO Megashop

      • Go to Extension > Modules > SO Theme Control Panel and click on the ‘install’ link

      Then click on the ‘edit’ button to cofigure this module.

    3.3 Install Vqmod

    SO Megashop makes use of plugins to add custom features. These plugins need Vqmod installed on your site.

    Download the lastest vqmod-x.x.x-opencart.zip file: here.

    Please type the following link: http://www.yoursite.com/vqmod/install. Then you should see the message Success: You have installes your Vqmod !. Refresh your site.

    4CONFIGURATION – Back to top

    4.1 Layout Position

    4.1.1 Layout1

    4.1.2 Layout2

    4.2 Template Configuration

    4.2.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:

    General

  • General: backend settings
  • Header: backend settings
  • Performace: backend settings
  • Footer: backend settings
  • Some Language variables: backend settings

    • Layout

    Pages

  • Product Listings: backend settings
  • Product Labels: backend settings
  • Product Page: backend settings
  • Other Page: backend settings

    • Custom Code

  • CSS Input: backend settings
  • CSS File: backend settings
  • JS Input: backend settings
  • JS File: backend settings
    • 4.3.1 Mega Menu Configuration

    Frontend Appearance

    4.3.1.1 Create New Megamenu

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

    4.3.1.2 Features Menu Configuration

    Frontend Appearance

    To create this menu, please go to Extensions >> Modules >> ” SO Megamenu > SO Megamenu” >> Click “Edit” button >> Click “Creat new Item” >> Creat new item Here

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

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

  • Backend settings

    • To configure Theme Colors – Submenu, click on “pencil” symbol to configure its backend settings

  • Backend settings

    • Copy and paste the Code into editor:

     

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

  • Backend settings

    • Copy and paste the Code into editor:

     

    4.3.1.3 Living Rooms Menu Configuration

    Frontend Appearance

    To create this menu, please go to Extensions >> Modules >> ” SO Megamenu > SO Megamenu” >> Click “Edit” button >> Click “Creat new Item” >> Creat new item Here

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

  • Backend settings

    • To configure Chais & Sofas – Submenu, click on “pencil” symbol to configure its backend settings

  • Backend settings

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

  • Backend settings

    • Copy and paste the Code into editor:

     

    4.3.1.4 Accessories Menu Configuration

    Frontend Appearance

    To create this menu, please go to Extensions >> Modules >> ” SO Megamenu > SO Megamenu” >> Click “Edit” button >> Click “Creat new Item” >> Creat new item Here

    Check the menu item in the boxes in the left column, click “Creat new 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

  • Backend settings

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

  • Backend settings

    • To configure Bestseller- Submenu, click on “pencil” symbol to configure its backend settings

  • Backend settings

    • 4.4 Extension Configuration – Layout1

    The SO Megashop front-page has been integrated with extensions in the Theme as following list:

    I. SO-Mega-Menu
        • Position: Content-Menu
        • Frontend Appearance

        • Backend of SO-Mega-Menu: Click Here
    II. SO-SearchPro
        • Position: Content-Search
        • Frontend Appearance

        • Backend of SO-SearchPro: Click Here
    III. SO-Home-Slider
        • Position: Contentop
        • Frontend Appearance


    Backend of SO-Home-Slider:

    • Backend of Module Options: Click Here
    • Backend of Slider Options: Click Here
      • Slider 1: Please click Here to view
      • Slider 2: Please click Here to view
      • Slider 3: Please click Here to view

     

    IV. Content-block2
        • Position: Content-block2
        • Frontend Appearance

    • 1. Return Ship Cash Phone – Home Layout 1,2

      • Backend of Return Ship Cash Phone – Home Layout 1,2: Click Here
      Copy and paste the Code into editor:

       

    • 2. Html 2 – Content Block 2 – Home Layout 1

      • Backend of Html 2 – Content Block 2 – Home Layout 1: Click Here
      Copy and paste the Code into editor:

       

    V. Content-block3
        • Position: Contentblock3
        • Frontend Appearance

    • SO-Listings-Tabs

      • Backend of SO-Listings-Tabs: Click Here

      • Backend of General Options: Click Here
      • Backend of Source Options: Click Here
      • Backend of Tabs Options: Click Here
      • Backend of Items Options: Click Here
      • Backend of Image Options: Click Here
      • Backend of Effect Options: Click Here
      • Backend of Advanced Options: Click Here

       

    VI. Content-block4 – Newsletter
        • Position: Content-block4
        • Frontend Appearance

        • Backend of Newsletter: Click Here
        • Backend of General Options: Click Here
        • Backend of Content Options: Click Here
        • Backend of Newsletter Subcribers: Click Here
        • Backend of HTML Email Template: Click Here
        • Backend of Advanced Options: Click Here
    VII. Content-block5
        • Position: Content-block5
        • Frontend Appearance

    • 1. SO-Deals

      • Backend of SO-Deals: Click Here

      • Backend of General Options: Click Here
      • Backend of Source Options: Click Here
      • Backend of Items Options: Click Here
      • Backend of Image Options: Click Here
      • Backend of Effect Options: Click Here
      • Backend of Advanced Options: Click Here

       

    • 2. Manufacturers

      • Backend of Manufacturers: Click Here

    VIII. Content-block6
        • Position: Content-block6
        • Frontend Appearance

          Backend of SO-Video-Box: Click Here

          • Backend of General Options: Click Here
          • Backend of Video Options: Click Here
          • Backend of Items Options: Click Here
          • Backend of Effect Options: Click Here
          • Backend of Advanced Options: Click Here
    IX. Content-block7
        • Position: Content-block7
        • Frontend Appearance

    • 1. SO-Latest-Blog

      • Backend of SO-Latest-Blog: Click Here

      • Backend of General Options: Click Here
      • Backend of Category Options: Click Here
      • Backend of Blogs Options: Click Here
      • Backend of Image Options: Click Here
      • Backend of Effect Options: Click Here
      • Backend of Advanced Options: Click Here

       

    X. Content-block8 – Content Block 9 – Google maps
        • Position: Content-block8
        • Frontend Appearance

        • Backend of Content Block 9 – Google maps: Click Here

          • Copy and paste the Code into editor:

           

    XI. Content-block9 – Socical Link – Footer Lyaout 1
    • Position: Content-block9
    • Frontend Appearance

      Backend of Socical Link – Footer Lyaout 1: Click Here
      Copy and paste the Code into editor:

       

    4.5 Extension Configuration – Layout2

    The SO Megashop front-page has been integrated with extensions in the Theme as following list:

     

    I. SO-Home-Slider
        • Position: Content-top
        • Frontend Appearance

          Backend of SO-Home-Slider:

          • Backend of Module Options: Click Here
          • Backend of Slider Options: Click Here
            • Slider 1: Please click Here to view
            • Slider 2: Please click Here to view
            • Slider 3: Please click Here to view

     

    II. Content-top
        • Position: Content-top
        • Frontend Appearance

          Backend of Content Top – Home Layout 2: Click Here
          Copy and paste the Code into editor:
           

     

    III. Content-Block1
        • Position: Content-block1
        • Frontend Appearance

          Backend of SO-Category-Slider:

          • Backend of General Options: Click Here
          • Backend of Source Options: Click Here
          • Backend of Category Options: Click Here
          • Backend of Products Options: Click Here
          • Backend of Effect Options: Click Here
          • Backend of Advanced Options: Click Here
    IV. Content-Block3
        • Position: Content-Block3
        • Frontend Appearance

    • 1. SO-Extra-Slider

      • Backend of SO-Extra-Slider: Click Here

      • Backend of General Options: Click Here
      • Backend of Source Options: Click Here
      • Backend of Products Options: Click Here
      • Backend of Image Options: Click Here
      • Backend of Effect Options: Click Here
      • Backend of Advanced Options: Click Here

       

    • 2. SO-Categories

      • Backend of SO-Categories: Click Here

      • Backend of General Options: Click Here
      • Backend of Source Options: Click Here
      • Backend of Category Options: Click Here
      • Backend of Image Options: Click Here
      • Backend of Advanced Options: Click Here

       

    V. Content-Block4
        • Position: Content-block4
        • Frontend Appearance

          Backend of SO-Twitter-Slider:

          • Backend of General Options: Click Here
          • Backend of Other Options: Click Here
          • Backend of Effect Options: Click Here
          • Backend of Advanced Options: Click Here
    VI. Content-Block5
        • Position: Content-Block5
        • Frontend Appearance

    • 1. SO-Latest-Blog

      • Backend of SO-Latest-Blog: Click Here

      • Backend of General Options: Click Here
      • Backend of Category Options: Click Here
      • Backend of Blogs Options: Click Here
      • Backend of Image Options: Click Here
      • Backend of Effect Options: Click Here
      • Backend of Advanced Options: Click Here

       

    • 2. SO-HTML-Content

      • Backend of SO-HTML-Content: Click Here
      Copy and paste the Code into editor:

       
    • Other extensions in Layout2 are configured the same as above extensions in Layout1.

     

    Note: You can read other extensions here:

    5SUPPORT – 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!