1. Start
  2. Installation
  3. Menu
  4. Adjust your image sizes
  5. FullScreen Background Slider
  6. Modules Settings
  7. Moderns Control Panel
  8. Extra Color Skins
  9. Demos
  10. Language
  11. Theme Support

Moderns - Fullscreen Background OpenCart Theme

For OpenCart Versions - 2.2.0.0 / 2.3.0.2 / 3.x

For Future Updates Follow Me @themeforest or @facebook or @google+ or @twitter

Please read this guide thoroughly to get started with Moderns. This documentation is strictly theme related and does not cover general OpenCart functionality. For any general OpenCart info please refer to their official Opencart Documentation and Opencart Forum.

Installation


Installation for OpenCart 2.2.0.0
  • 1Make sure you have installed and running the correct version of OpenCart
  • 2It is a good practice to backup your system
  • 3Unzip your downloaded "moderns_opencart_theme_3.1.zip". There are subfolders structure:
  • 4Open 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. See example.
  • 5 Go to Extensions > Modifications and click on the blue Refresh button (top right corner) for update the system. See example.
  • 6 Theme Activation
    • Go to Extensions > Themes > Edit and choose moderns from the Theme Directory selector. See example.
  • 7 Theme Module Installation
    • Go to Extensions > Modules > Moderns Theme Control Panel and click on the 'install' link.
    • Click on the 'edit' > Colors and Style > General > and Select the color skin you interesting. and > also please set 90% Opacity for Header, Content and Footer background. and click 'Save' module. See example.
Installation for OpenCart 2.3.0.2 / 3.x
  • 1Make sure you have installed and running the correct version of OpenCart
  • 2It is a good practice to backup your system
  • 3Unzip your downloaded "moderns_opencart_theme_3.1.zip". There are subfolders structure:
  • 4Open 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. See example.
  • 5 Go to Extensions > Modifications and click on the blue Refresh button (top right corner) for update the system. See example.
  • 6 Theme Activation
    • Go to Extensions > Extensions, choose Themes from the Choose the extension type selector and then Edit to finally select moderns from the Theme Directory selector. See example.
  • 7 Theme Module Installation
    • Within the same page, Go to Extensions > Extensions, choose Modules from the Choose the extension type selector and install the Moderns Theme Control Panel extension.
    • Click on the 'edit' > Colors and Style > General > and Select the color skin you interesting. and > also please set 90% Opacity for Header, Content and Footer background. and click 'Save' module. See example.

Adjust your image sizes


Before you start using your store with the moderns theme, image settings must be edited with the following values:

Images don't have to be vertical, you can use square dimesions and proportions. for example 200x200.

FullScreen Background Slider


FullScreen Background Image Slider

if, You want to set FullScreen Image Slider. So, You will need to use Revolutions Slider for that.

  • 1Install & Setup Revolutions Slider:
    Go to your Moderns theme Download Pack. Open Extensions folder > revolution-slider > and then follow Documentaion for install & setup Revolution Slider.
  • 2Revolutions Slider set in Layout:
    Go to Design > Layout > Home (If the module needs to be included on multiple pages, you must individually "Add Module" for each page.) > and then add Revolutions Slider module in "FullScreen" Position.

  • 3Only Fullscreen Slider OR With Content:

    Go to Extensions > Extensions > Modules > Moderns - Theme Control Panel > General Options > General > Fullscreen Slideshow > and From the drop down listing of available option select "Only Fullscreen Slideshow in Homepage" OR "Fullscreen SlideShow with Content in Homepage" according to following image.

    If You want Only Fullscreen backgroud Slider in Homepage. So, Should not have any modules inserted on Homepage. please remove/disabled them from homepage.

FullScreen Background Image (Only one image as Body background)

if, You want to set only one image as body background. So, You can set from Moderns - Theme Control Panel.

  • 1Go to Extensions > Extensions, choose Modules from the Choose the extension type selector and Moderns - Theme Control Panel > Colors and Style > Body > and then You can set Background image.
  • 2Go to Extensions > Extensions > Modules > Moderns - Theme Control Panel > General Options > General > Fullscreen Slideshow > and From the drop down listing of available option select "Only Fullscreen Slideshow in Homepage" OR "Fullscreen SlideShow with Content in Homepage" according to following image.

    If You want Only Fullscreen backgroud in Homepage. So, Should not have any modules inserted on Homepage. please remove/disabled them from homepage.

Modules Settings


Read official OpenCart documentation for install, Editing and Setup a module.
  For Official Documentation - Click Here
  For Tutorials - Click Here

and also, See & follow following module information.

  1. Slider
  2. Featured, Latest, Bestsellers, Specials Products Modules
  3. Moderns Product Tab
  4. Category Accordion
  5. Moderns Banner
  6. Html Content
  7. Carousel (Manufacturers)

Slider

Revolution Slider

Go to your Moderns theme Download Pack. Open Extensions folder > revolution-slider > and then follow Documentaion for install & setup Revolution Slider.

For Import Modern Demo Data Slider:
Go to admin > Revolution Slider > click the Import Slider option > Click Browse the file > navigate to the folder named example-zips(It will be located inside the Moderns theme package > Extensions > revolution-slider > example-zips) > then Select"full_screen_moderns_theme.zip" file.

 

Featured, Latest, Bestsellers, Specials Modules

Featured, Latest, Bestsellers, Specials modules, etc. adjust the image settings with the following recommended values:

For modules positioned Content Top or Bottom set the dimensions to 200x300
For modules positioned Column Left or Right set the dimensions to 50x75

Images don't have to be vertical dimesions, you can use square dimesions and proportions. For Example:

For modules positioned Content Top or Bottom - 200x200
For modules positioned Column Left or Right - 50x50

 

Moderns - Product Tab

If you want to save space and show more products to your customers, install and enable the module “Product Tab”. It can display Featured, Latest, Bestseller and Special products.

Product Tab module Only for Content Top or Bottom Position. don't Enabled in left or Right Positioned.

For modules positioned Content Top or Bottom set the dimensions to 200x300

 

Category Accordion

When use "Category Accordion" Module. So don't use "Category" default Module. Uninstall "Category" default Module

To display the whole list of categories in accordion format, install and enable the module “Category Accordion”.
It works the same way as the default Category module.

 


Moderns Banner


Html Content

This module allows you to place any contents to any store pages.

Go to Extensions > Extensions > choose Modules from the Choose the extension type selector and Html Content > and then add your content.

 

Carousel (Manufacturers)

Moderns Theme Control Panel


Moderns Control Panel is where you maintain your various theme settings. Many options have Help icons ? which explain what they do.
Go to Extensions > Modules > Moderns Theme Control Panel.
For Opencart 2.3.0.2 / 3.x Go to Extensions > Extensions, choose Modules from the Choose the extension type selector and > Moderns Theme Control Panel.

Extra Color Skins


Go to Moderns Theme Control Panel > Colors and Style > General > Select the color skin you interesting and click "Save".

Demos


Open the sections below to see what modules have been used in each demo.

Demo 1
  • 1Revolution Slider Install & setup then, Add in "Position: FullScreen"(Go to Design > Layout > Home >)
    also Please read FullScreen Background Slider point for more information.
Demo 2
  • 1Revolution Slider Install & setup then, Add in Position: FullScreen(Go to Design > Layout > Home >)
    also Please read FullScreen Background Slider point for more information.
  • 2Slideshow, Add in Position: Content Top
  • 3Moderns - Product Tab, Add in Position: Content Top
  • 4Moderns Banner (Set 3 banner per row), Add in Position: Content Top
  • 5Moderns - Latest Products By Category (Display tabs for each subcategory and its products for Subcategory Settings), Add in Position: Content Top
  • 6Moderns - Latest Products By Brand, Add in Position: Content Top
  • 7Carousel, Add in Position: Content Bottom
  • 8Category Accordion, Add in Position: Column Left
  • 9Specials, Add in Position: Column Left
  • 10Html, Add in Position: Column Left
  • 11Latest, Add in Position: Column Left
  • 12Banner, Add in Position: Column Left

Language


Moderns has multi-language support but languages are not part of the theme, they are part of the Opencart system and install separately.

Opencart language packs can be found here: Opencart Extensions Page
Language installation instructions can be found here: Opencart Language Documentation


Please follow following 2 steps after install new language.

Theme Support


If this documentation and official OpenCart documentation doesn't answer your questions, So Send me Email via support item page. Otherwise comment item page. Our response time is within 24 to 48h.

Important: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our theme like bugs and errors. Custom modifications or third party module implementations are not included.

 

 

 

For Future Updates Follow Me @themeforest or @facebook or @google+ or @twitter


Thank You so much for purchasing this theme.
Don’t forget to rate it