Example

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

 

1SYSTEM REQUIREMENTS – Back to top

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

1.1 System Requirements

Software

  • Software: PHP 5.2.4+ (5.4+ recommended)
  • MySQL: 5.0.4+

Web Sever

  • Apache: 2.x+
  • Microsoft: IIS 7
  • Nginx: 1.0 (1.1 recommended)

1.3 Browser Requirements

The requirements are the same with Opencart 2.0.x

  • Firefox 4+
  • IE (Internet Explorer) 9+
  • Google Chrome 10+
  • Opera 10+
  • Safari 5+

1.4 Development Environment

The requirements are the same with Opencart 2.0.x

During the development process, Localhost is preferred. You can use the following servers on your PC to develop your site.

Windows

  • WAMPSEVER
  • XAMPP for Windows

Linux

  • LAMP Bubdle
  • XAMPP for Linux

Mac OS

  • MAMP & MAMP Pro
  • XAMPP for Mac OS

1.5 Note: You can read more document below

  • Opencart Installation:
  • OPencart Help
    • User Guide: here.
    • Popular topics
      • Managing Images
      • Adding Product Category
      • Managing Customers
      • Managing Orders
      • Managing Modules
      • Managing Theme
      • Localization: adding language, currency…
      • vQmod
    • Opencart forum: here.

2INSTALLATION – Back to top

There are two ways to install a SO Template:

  • 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.

2.1 Install with Quickstart Package:

2.1.1 Create new database

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

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

 

2.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-Maxshop: Https://Opencart/SO-Maxshop/upload/install/index.php then click “install” button

2.1.4 Enter the username and password for the administration


 

2.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 Extension >> Modules >> Theme Control Panel(Click “edit” button) >> Choose Sample Data >> Click “Install data” button

2.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

2.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

2.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_market_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 System > Settings > Edit (your store)

    • Click on the Store tab. From the drop down listing of available themes select SO Maxshop

  • 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 opencart_maxshop.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 3 folders (admin, catalog, image) & 2 files xml 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 Maxshop

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

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

2.3 Install Vqmod

SO Maxshop 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.

3CONFIGURATION – Back to top

3.1 Layout Position

3.1.1 Layout1

3.1.2 Layout2

3.1.2 Layout3

https://s3.amazonaws.com/Open-cart-theme/so-maxshop-update/add/Position_SJ_Maxshop_3.jpg

3.1.2 Layout4

https://s3.amazonaws.com/Open-cart-theme/so-maxshop-update/add/Position_SJ_Maxshop_4.jpg

3.1.2 Layout5

3.1.2 Layout6

3.1.2 Layout7

3.2 Theme Configuration

3.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
  • Footer: backend settings
  • Some Language variables: backend settings

    • Layout

    Pages

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

    • Custom Code

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

    Frontend Appearance

    3.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

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

     

    3.3.1.3 Electronic 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 Electronic Menu, click on “pencil” symbol to configure its backend settings

  • Backend settings

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

  • Backend settings

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

  • Backend settings

    • To configure Product types – 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:

     

    3.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 Best sellers- Submenu, click on “pencil” symbol to configure its backend settings

  • Backend settings
    • 3.3.1.5 Blog 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

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

  • Backend settings
    • 3.3.2 Verticalmen Menu Configuration

    Frontend Appearance

    3.3.2.1 Create New Verticalmenu

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

    3.3.2.2 Automotive & Motocrycle Menu Configuration

    Frontend Appearance

    To create this menu, please go to Extensions >> Modules >> ” SO Megamenu > SO Verticalmenu” >> 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 and drop to arrange them.

    To configure Automotive & Motocrycle Menu, click on “pencil” symbol to configure its backend settings

  • Backend settings

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

  • Backend settings

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

  • Backend settings

    • Copy and paste the Code into editor:

     

    3.3.2.3 Sports & Outdoors Menu Configuration

    Frontend Appearance

    To create this menu, please go to Extensions >> Modules >> ” SO Megamenu > SO Verticalmenu” >> 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 and drop to arrange them.

    To configure Sports & Outdoors Menu, click on “pencil” symbol to configure its backend settings

  • Backend settings

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

  • Backend settings

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

  • Backend settings

    • Copy and paste the Code into editor:

     

    3.3.2.4 Health & Beauty Menu Configuration

    Frontend Appearance

    To create this menu, please go to Extensions >> Modules >> ” SO Megamenu > SO Verticalmenu” >> 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 Health & Beauty Menu, click on “pencil” symbol to configure its backend settings

  • Backend settings

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

  • Backend settings
    • 3.3.2.5 Smartphone & Tablets Menu Configuration

    Frontend Appearance

    To create this menu, please go to Extensions >> Modules >> ” SO Megamenu > SO Verticalmenu” >> 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 Smartphone & Tablets Menu, click on “pencil” symbol to configure its backend settings

  • Backend settings

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

  • Backend settings

    • 3.4 Extension Configuration – Layout1

    Note: To view the Module Positions you can go to Design >> Layouts >> Choose Layout you want then click “Edit” button

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

    I. SO-Megamenu
        • Position: Content-menu
        • Frontend Appearance

        • Backend of SO-Megamenu: Click Here
    II. SO-Megamenu
        • Position: Content-block1
        • Frontend Appearance

        • Backend of SO-Megamenu: Click Here
    III. SO-SearchPro
        • Position: Content-Search
        • Frontend Appearance

        • Backend of SO-SearchPro: Click Here
    IV. Banner Slider Opencart, HTML
    • Position: Content-top
    • 1. Banner Slider Opencart
    • Frontend Appearance


      • Backend of Banner Slider Opencart: Click Here

    • 2. HTML-Content
    • Frontend Appearance


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

       

    V. SO Deals
        • Position: Content-block2
        • Frontend Appearance

    VI. SO Extraslider
        • Position: Column-right
        • Frontend Appearance

    VII. SO Supper Category, HTML1, SO Super Category, HTML2, SO Super Category, HTML3
    • Position: Content-block3
    • 2. HTML1-Content
    • Frontend Appearance


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

       

    • 3. HTML2-Content
    • Frontend Appearance


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

       

    • 4. HTML3-Content
    • Frontend Appearance


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

       

    VIII. SO Latest Blog, Bestseller, HTML, Mannufature
    • Position: Content-block5
    • 2. Bestsellers
    • Frontend Appearance


      • Backend of Bestsellers: Click Here

    • 3. HTML3-Content – Testimonial – Home Layout 1
    • Frontend Appearance


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

       

    • 4. Bestsellers
    • Frontend Appearance


      • Backend of Bestsellers: Click Here

    IX. HTML-Content, Newsletter
        • Position: Content-block4
        • 1. HTML-Content
        • Frontend Appearance


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

           

    • 2. Newsletter
    • Frontend Appearance


      • Backend of Newsletter: Click Here

    3.5 Extension Configuration – Layout2

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

    I. Banner Slider Opencart, HTML
    • Position: Content-top
    • 1. Banner Slider Opencart
    • Frontend Appearance


      • Backend of Banner Slider Opencart: Click Here

    • 2. HTML-Content
    • Frontend Appearance


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

       

    II. SO Supper Category, HTML1, SO Super Category, HTML2, SO Super Category, HTML3
    • Position: Content-block1
    III. SO Extraslider, SO Latest Blog, HTML, Manufactures, SO Extraslider
    • Position: Coulmn-left
    • 3. HTML1-Content
    • Frontend Appearance


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

       

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


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

       

     

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

     

    3.6 Extension Configuration – Layout3

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

    I. SO Mega Slider, SO Extra Slider, SO Latest Post, HTML Content, Manufactures
    • Position: Content-left
    • Frontend Appearance

    • 3. HTML-Content – FAQ

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

       

    • 4. HTML3-Content – Testimonial

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

       

    • 5. Manufactures

      • Backend of Manufactures: Click Here

    II. Banner, SO Deals, SO Category Slider
    • Position: Content-top3
    • Frontend Appearance

    • 1. Banner Slider Opencart

      • Backend of Banner Slider Opencart: Click Here

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


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

       

      IV. HTML-Content, Newsletter
          • Position: Content-block4
          • 1. HTML-Content
          • Frontend Appearance


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

      • 2. Newsletter
      • Frontend Appearance


        • Backend of Newsletter: Click Here

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

       

      3.7 Extension Configuration – Layout4

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

      I. Banner, HTML Content
      • Position: Content-top
      • Frontend Appearance

      • 1. Banner Slider Opencart

        • Backend of Banner Slider Opencart: Click Here

      • 3. HTML-Content

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

         

      II. SO Extra Slider, SO Latest Post, HTML Content, Manufactures
      • Position: Content-left
      • Frontend Appearance

      • 3. HTML-Content – FAQ

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

         

      • 4. HTML3-Content – Testimonial

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

         

      • 5. Manufactures

        • Backend of Manufactures: Click Here

      III. SO Deals, SO Category Slider
      • Position: Content-block1
      • Frontend Appearance

      IV. HTML Content
      • Position: Content-block1
      • Frontend Appearance


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

         

        V. HTML-Content, Newsletter
            • Position: Content-block4
            • 1. HTML-Content
            • Frontend Appearance


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

        • 2. Newsletter
        • Frontend Appearance


          • Backend of Newsletter: Click Here

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

         

        3.8 Extension Configuration – Layout5

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

        I. Banner, HTML Content
        • Position: Content-top
        • Frontend Appearance

        • 1. Banner Slider Opencart

          • Backend of Banner Slider Opencart: Click Here

        • 2. HTML-Content – Banner right

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

           

        II. SO Deals, SO Category Slider
        • Position: Content-block1
        • Frontend Appearance

        III. SO Extra Slider, SO Latest Post, HTML Content
        • Position: Content-left
        • Frontend Appearance

        • 3. HTML-Content – FAQ

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

           

        • 4. HTML3-Content – Testimonial

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

           

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


          • Backend of Manufactures: Click Here

          V. HTML-Content, Newsletter
              • Position: Content-block4
              • 1. HTML-Content
              • Frontend Appearance


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

          • 2. Newsletter
          • Frontend Appearance


            • Backend of Newsletter: Click Here

          • Other extensions in Layout2 are configured the same as above extension in Layout1, Layout2, Layout3, Layout4.

          3.9 Extension Configuration – Layout5

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

          I. Banner, HTML Content
          • Position: Content-top
          • Frontend Appearance

          • 1. Banner Slider Opencart

            • Backend of Banner Slider Opencart: Click Here

          • 2. HTML-Content – Banner right

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

             

          II. SO Deals, SO Category Slider
          • Position: Content-block1
          • Frontend Appearance

          III. SO Extra Slider, SO Latest Post, HTML Content
          • Position: Content-left
          • Frontend Appearance

          • 3. HTML-Content – FAQ

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

             

          • 4. HTML3-Content – Testimonial

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

             

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


            • Backend of Manufactures: Click Here

            V. HTML-Content, Newsletter
                • Position: Content-block4
                • 1. HTML-Content
                • Frontend Appearance


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

            • 2. Newsletter
            • Frontend Appearance


              • Backend of Newsletter: Click Here

            • Other extensions in Layout2 are configured the same as above extension in Layout1, Layout2, Layout3, Layout4.

    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!