So ShoppyStore

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

 

1SYSTEM REQUIREMENTS – Back to top

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

  • Please go to here. to read more information

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

  • Please go to here to view ” Install 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-Shoppystore: Https://Opencart/SO-Shoppystore/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

    Feel free to check the detailed VIDEO TUTORIAL

    You can try install via FTP by following these steps:

    Step1: Upload theme package to your Root folder (Example: upload the file so_shoppystore_template_oc2.3.0_v1.0.0.ocmod.zip

    Step2: Use Cpanel to unzip this file

    Step3: Move all folders into ‘upload’ folder to Root folder

    Step 4: Go to Admin => Extensions => Modification => Click Refresh button

    Step 5: Go to Admin => Extensions => Extensions => Filter: Modules => Click to install Theme control panel module

    Step 6: Go to Admin => Systems => Users => User groups => Edit Administrator => Select All in all permissions => Save

    2.2.3 Extension Installer

    You to use the new Extension Installer featured in OpenCart 2.0

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

    • Step 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!

    • Step 3: Go to Extensions > Extension Installer > Click Upload and select the “so23_shoppystore_template_oc2.3.0_v1.2.0.zip” file to upload. Then You should see the message Success: You have installed your extension!

    • Step 4: Go to System > User > User-Group > Click “Edit” button > Then you click “Select All” button

    • Step 6: Go to Extensions > Modifications > Click “Refresh” button to run “ocmod.xml” file

    • Step 7: Go to Extensions > Theme Control Panel and edit your store: General Tab, Layout Tab, Page Tab…

    • Step 8: Go to Extensions >> Modifications >> Click “Refresh” button

      •  

       

    • Step 9: Refresh your site and you got it

    2.3 Select Layout

    Feel free to check the detailed VIDEO TUTORIAL

    2.4 CreateColor Theme Control

    Feel free to check the detailed VIDEO TUTORIAL

    2.5 Install Language and Override Language

    2.5.1 Install Laguage

    You can read more information: Here

    2.5.2 Override Language

     
    Step1: Extracting
     
    Extract the archive file of the language pack you have downloaded into your PC: “patch_language_v2.3.x”
     
    Step 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%
     
    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…).
     
    Step3:Uploading
     
    Upload the admin and catalog folders you have replaced into your folder upload theme
     

     
    Step4: 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 Layout Position

    3.1.1 Layout1

    3.1.2 Layout2

    3.1.3 Layout3

    3.1.4 Layout4

    3.1.5 Layout5

    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
  • Banner-Effect: backend settings

    • Layout

    Pages

  • Product Listing : backend settings
  • Product Label: 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 Categories 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 Categories Menu, 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:

     

    To configure Jewelry & Watches – Submenu, click on “pencil” symbol to configure its backend settings

  • Backend settings

    • To configure Electronic – Submenu, 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
    • 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 Electronic – Submenu, click on “pencil” symbol to configure its backend settings

  • Backend settings

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

  • Backend settings

    • To configure Sports & Outdoors – 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 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:

     

    To configure HTML2 – 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 and 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 Camera & Photo 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 Camera & Photo Menu, click on “pencil” symbol to configure its backend settings

  • Backend settings

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

  • Backend settings
    • 3.3.2.6 Toys & Hobbies 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 Toys & Hobbies 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.4 SO Page Builder Configuration

    To configure SO Page Builder, please go to Administrator >> Magentech >> SO Page Builder >> SO Page Builder (Home1 or Home2…)

  • Please go to here. to read more information

    • 3.5 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 ShoppyStore 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-SearchPro
        • Position: Content-Search
        • Frontend Appearance

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

        • Backend of SO-Megamenu: Click Here
    III. SO Home Slider, SO-Deal, HTML
        • Position: Content-top
        • Frontend Appearance

        • 1. SO Home Slider

          • Backend of Module Options: Click Here
          Backend of Slider Options: Click Here

    • 3. HTML-Content

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

       

    IV. SO-Basic-Product, SO-Latest-Block
        • Position: Column-left
        • Frontend Appearance

        • 1. SO Basic Product

          • Backend of SO Basic Product: Click Here
           

    • 2. SO-Latest-Block

      • Backend of SO-Latest-Block: Click Here

      V. SO Extraslider, HTML, SO Extraslider
          • Position: Content-block1
          • Frontend Appearance

          • 1. SO Extraslider

            • Backend of SO Extraslider: Click Here

    • 2. HTML-Content

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

       

    • 3. SO-Extraslider

      • Backend of SO-Extraslider: Click Here

      VI. HTML, SO-Extraslider, SO-Listing Tabs, Manufacturers
          • Position: Content-block3
          • Frontend Appearance

        • 1. HTML-Content

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

           

        • 2. SO-Extraslider

          • Backend of SO-Extraslider: Click Here

        • 4. Manufacturers

          • Backend of Manufacturers: Click Here

      VIII. Newsletter
      • Position: footer-block1
      • Frontend Appearance

      • Backend of Newsletter: Click Here
      IX. HTML
      • Position: footer-block2
      • Frontend Appearance

          • Backend of HTML: Click Here

            • Copy and paste the Code into editor:

             

      XI. SO-Popular-Tags
          • Position: footer-block3
          • Frontend Appearance

      3.6 Extension Configuration – Layout2

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

       

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

        • 1. SO Home Slider

          • Backend of Module Options: Click Here
          Backend of Slider Options: Click Here

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

          • Backend of HTML: Click Here

            • Copy and paste the Code into editor:

             

       

      III. SO Megamenu, Newsletter, SO Deals, HTML
          • Position: Column-left
          • Frontend Appearance

      • 3. SO-Deals

        • Backend of SO-Deals: Click Here

      • 4. Backend of HTML: Click Here

        • Copy and paste the Code into editor:

         

      IV. SO-Listing-Tabs, HTML
          • Position: Content-block2
          • Frontend Appearance

      • 2. HTML-Content

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

         

      • 3. SO-Listing-Tabs – Special Products – Home Layout 2

        • Backend of SO-Listing-Tabs: Click Here

      V. HTML, SO-Latest-Blog
          • Position: Content-block3
          • Frontend Appearance

      • 1. SO-Latest-Blog

        • Backend of SO-Latest-Blog: Click Here

    • 2. HTML-Content

      • 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.7 Extension Configuration – Layout3

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

      I. So Home Slider, HTML-Content, SO-Deals, SO-Category-Slider, Manufacturers
          • Position: Content-top
          • Frontend Appearance

        • 1. SO Home Slider

          • Backend of Module Options: Click Here
          Backend of Slider Options: Click Here

        • 2. HTML-Content

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

           

        • 4. SO-Category-Slider – Sports & Outdoors

          • Backend of SO-Category-Slider: Click Here

      • 5. SO-Category-Slider – Sport Shoes

        • Backend of SO-Category-Slider: Click Here

    II. HTML-Content, SO-Latest-Blog
        • Position: Content-block3
        • Frontend Appearance

      • 1. HTML1 – So HTML Content 2 Home 3

        • Backend of HTML1: Click Here
        Copy and paste the Code into editor:

         

      • 2. HTML2 – So HTML Content 3 Home 3

        • Backend of HTML2: Click Here
        Copy and paste the Code into editor:

         

      • 3. So-Latest-Blog

        • Backend of So-Latest-Blog: Click Here

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

       

      3.8 Extension Configuration – Layout4

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

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

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

          • Backend of Module Options: Click Here
          • Backend of Slider Options: Click Here
      II. SO-Deals
          • Position: Content-top
          • Frontend Appearance

      III. SO Extra Slider, SO Extra Slider
          • Position: Content-block2
          • Frontend Appearance

      • 1. SO Extra Slider – Electronic
      • Backend of SO-Extraslider: Click Here
      • 2. SO Extra Slider – Furniture
      • Backend of SO-Extraslider: Click Here
      IV. HTML, SO Latest Blog, HTML
          • Position: Column-right
          • Frontend Appearance

          • 1. SO HTML

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

             

      • 2. SO-Latest-Blog

        • Backend of SO-Latest-Blog: Click Here

          • 3. SO HTML

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

             

      V. SO-Listing-Tabs
          • Position: Content-block4
          • Frontend Appearance

      VI. Newsletter
          • Position: Footer-block1
          • Frontend Appearance

          Backend of Newsletter: Click Here

            General Options: Click Here
            Content Options: Click Here
            Newsletter Subscribers Options: Click Here

            HTML Email Template: Click Here

            Advanced Options: Click Here

      3.9 Extension Configuration – Layout5

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

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

      I. HTML Content
          • Position: Header-top1
          • Frontend Appearance

            Backend of SO HTML: Click Here
             
            Copy and paste the Code into editor:
             
      II. SO Home Slider 4
          • Position: Content-top
          • Frontend Appearance

          • Backend of Module Options: Click Here
          • Backend of Slider Options: Click Here
      III. HTML Content
          • Position: Column-block1
          • Frontend Appearance

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

      IV. HTML, SO Deals, HTML, SO Extra Slider, SO Extra Slider
          • Position: Content-block4
          • Frontend Appearance

          • 1. SO HTML

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

             

          • 3. SO HTML

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

             

      • 4. SO Extra Slider – New Arrivals
      • Backend of SO-Extraslider: Click Here
      • 5. SO Extra Slider – Best sellers
      • Backend of SO-Extraslider: Click 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!