1. Start
  2. Installation
  3. Import sample data
  4. Configuration
  5. Modules
    1. Custom products
    2. Sequence slider
    3. Mega menu setup
    4. Grid module setup
    5. Blog Latest Articles
    6. Social Auth
    7. Filter
    8. Product Tabs
    9. Side Block
    10. Login Popup
    11. Image Gallery
    12. Parallax
    13. Banner
    14. Background Slider
    15. Camera Slider
    16. Flexslider
    17. Floating cart
    18. Newsletter
    19. Testimonials
    20. Text Slider
    21. Custom html
  6. Module grid configuration
  7. Module filter
  8. Speed cache
  9. Social band
  10. One page checkout
  11. Image patch (1.5.6)
  12. FAQ
    1. How to update theme?
    2. How to get twitter id?
    3. How to hide
      customize theme panel?
    4. Saving modules in
      opencart admin
      gives 40x error
    5. I found a theme bug,
      what can I do?
  13. Theme support
  14. Theme rating

Opencart Theme


Installation


Unzip the contents of the archive and upload the folders called admin, catalog, image and system and nico_speed_cache.inc file to the root folder of your opencart store.
You will know if you selected the root folder of your opencart store if you already see two folders named admin and catalog there like in the picture below

To use the theme after upload go to admin > settings > edit > store > template and choose

Installation

Opencart 1 Install


Opencart 2 Install

Import sample data


The sample data tool will import product images and module configuration from my demo stores making your freshly installed theme look identical to the demo store with just one click

You can access import tool from customize theme button located at the bottom of your store front end, customize theme button is enabled only after opencart admin login.



The tool requires theme purchase code, you can find the purchase code in your license certificate in your account


After upload make sure that the the css/ and js/ folders located in catalog/view/theme// are writable by php to be able to use css and js concatenation feature to speed up page loading, if unsure you can set 0766 permission flag

Note: If you use the import tool then the following theme configuration steps are no longer necessary, the import tool will configure all your modules and product image size automatically

Theme configuration


Set your image settings

Go to system / settings/ image and make sure that you use the values given below:

Installation

Custom products


You can use this modules to display products in different ways such as

from multiple sources like

270
335

Sequence slider


Sequence slider has two image types, the standard background image (that can also be video) that can be used after selecting background type = image and slide image (optional) that is a small image that can be displayed above the background

1024
550

Megamenu


By default no menu is visible without megamenu configuration, in order to add a menu you need to add megamenu for layout = all pages and position = menu in opencart admin > system > design > layouts, if all pages layout is missing you need to use import tool to add it

Menu items can be reorderd by drag and drop

Full width means megamenu display, if set to false menu items are shown as default menu items

Highlight changes menu text color

You can use Font icon to add a fontawesome icon in front of menu item, for example to add diamond icon you need to enter fa-diamond, you can find complete fontawesome list here http://fontawesome.io/icons/

Grid


Grid module has a visual configuration interface and can be set up by drag and droping grid boxes


Blog


To use the blog features on your store you need to install one of the free blog modules supported by theme pavblog (oc 1.5.6), simpleblog (oc 1.5.6, oc 2.0.0.0) and easy blog (2.0.x only) module, the installation instructions are included in each blog package.

After you install the blog module by uploading module files, you can use the included theme blog module Nico Blog Latest Articles to display a feed of blog articles on homepage or other pages, you can also edit blog content directly from module

Socialauth


Social auth module is used to add login with social providers such as facebook, google etc, when a new provider is added in the module a new icon is displayed on customer login page and in login popup module that when clicked automatically creates a new account on your store using the provider data

Facebook configuration

For facebook configuration go to https://developers.facebook.com/
  1. my apps > add new app
  2. choose www website
  3. enter a name for your app
  4. create new facebook app id
  5. use your store url for website url
  6. Finish app creation and use app id for key and secret for secret field
https://developers.facebook.com/docs/apps/register

Google configuration

Go to https://console.developers.google.com/ And follow the instructions from here https://developers.google.com/identity/sign-in/web/devconsole-project use client id as key and secret for secret

for Authorized JavaScript origins use your store url, for redirect uri use this url http://www.yourstore.com/index.php?route=module/nicosocialauth/process&hauth.done=Google


Filter


Filter module adds faceted search, you can choose what sections to activate and in what order (usually added to category pages (category layout) but can also filter homepage modules in this case is recommened to only have one module added to homepage to avoid confusion)

Product tabs


This module allows you to add new tabs on product page after description and rating tabs, using the filter option you can add certain tabs only for a certain product, without a filter the tab will be shown for all products

The module needs to be added to layout = product and position = products tab

Side block


You can use this module to add side blocks that open on hover, supported blocks are Youtube, Vimeo, Facebook, Twitter, Image, Product and Text

You can add any custom widget by using block type = text and then from the html editor click source button and paste the widget code, for example for instagram widget you can use http://snapwidget.com/ http://www.intagme.com/ http://websta.me/tools

Login popup


Login popup module is used to show the small login form from top header, the module needs to be added to position = top links and layout = all pages, additionally you can hide the default opencart login link from top header from customize theme > options > header

Image gallery


You can use this module to have a list of images displayed in a grid that when clicked opens a magnific popup instance with the images

Parallax


By default no menu is visible without megamenu configuration, in order to add a menu you need to add megamenu for layout = all pages and position = menu like in the image below

Background slider


By default no menu is visible without megamenu configuration, in order to add a menu you need to add megamenu for layout = all pages and position = menu like in the image below

Camera slider


Slider module based on camera slider

Flex slider


Slider module based on flex slider

Floating cart


Cart module displayed on the bottom of the screen that supports adding products with drag and drop

Newsletter


The newsletter module included with the theme works with mailchimp, in order to use it you need to enter your mailchimp api key, app name and mail list id like in the image below

Testimonials


Show customer testimonials

Textslider


Headline rotator

Custom html


Add custom content, anything from raw html to youtube video embedded

Module grid configuration


By default most modules take up an entire row when added to a page, by using grid columns to occupy you can make the module take less space, the theme uses a 12 columns grid, setting 6 for example will take half a row

You can have two or more modules side by side by setting grid columns = 6 (or different values so that both/all have a total of 12) and then add them on the same layout and set sorting order in increasing order so they can be next to each other

You can also use grid left offset to leave an empty space arround on the left of the module or grid elements spacing so that the module has no padding added arround itself

Module filter


All theme modules have filter ability that you can use it to show the module on one layout only for a certain page

For example if you want to show one module only on about page, you can add the module on information layout (about us is shown using information layout)
and then set filter = information page and page id = 4 (about us has id 4, you can get page id from page url, about us url is index.php?route=information/information&information_id=4)

This feature is mostly useful for image gallery, custom html, and custom products module

Speed cache


Speed cache module caches store pages bypassing all opencart code and database initialization making the page load instantly (page can be also slowed down from loading too many images/3rd party widgets)

You can install speed cache from customize theme > sample data import > speed cache, this is checked by default so if you already used import tool then speed cache is already installed.

Note: automatic install requires that index.php from opencart root folder is writable by php.

If you make changes to your store and the changes don't show on your store then this is probably caused by speed cache, you can clear speed cache page caching from opencart admin > extensions > module control panel module > speed cache

Social band


Social band has 3 columns, about, twitter feed column and facebook widget column, if one column has no content or facebook/twitter id configured then the column is hidden, you can use this to show only one of the columns.

You can configure social band from opencart admin > extensions > module control panel module > social band

One page checkout


One page checkout can be configured to hide certain checkout fields and avoid second click for order confirmation for payment modules without additional input, you can find checkout configuration options in opencart admin > extensions > module control panel module > checkout

Image patch (1.5.6)


For 2.0.x this is no longer necessary, ocmod is used to patch opencart code instead

By default opencart adds a white band to images if the aspect ratio is different than image size set in the admin,

if you don't want the white padding you can either install http://www.opencart.com/index.php?route=extension/extension/info&extension_id=7985 or you can patch opencart using the patch included in the download package.

To patch opencart choose the right folder for the opencart version you are using in image_patch folder from the zip archive and upload the two folders catalog and system to the root opencart folder like in the image below

Installation

Faq


How to update theme?

First you need to redownload the theme from themeforest, downloading the theme will always give you the most recent update, you can view theme changelog on the bottom of product description.

There is no special process to update theme just overwrite old theme files, if you made changes to theme files you can use http://meldmerge.org/ to compare your theme folder with the latest update theme folder and merge the changes with a few clicks

How to get twitter id for social band and side block?

Go to www.twitter.com and sign in as normal, go to your settings page. Go to "Widgets" on the left hand side.

Create a new widget for what you need eg "user timeline" or "search" etc. Feel free to check "exclude replies" if you dont want replies in results. Now go back to settings page, and then go back to widgets page, you should see the widget you just created. Click edit.

Now look at the URL in your web browser, you will see a long number like this: 345735908357048478 Use this as your twitter ID!

How to hide customize theme panel?

Customize theme is shown only for opencart admin users, your customers never see it, if you want to also hide it for admin users edit nico_theme_editor/editor.inc and replace

define('HAS_PERMISSION', $user->hasPermission('modify', 'design/layout'));
with
define('HAS_PERMISSION', false);

Saving theme modules like megamenu in opencart admin gives 40x error

This can be caused by apache modsec module, megamenu uses large encoded strings on POST requests that triggers modsec. You can disable modsec by adding
<IfModule mod_security.c> SecFilterEngine Off SecFilterScanPOST Off </IfModule>
in .htaccess in opencart admin folder, more info http://stackoverflow.com/questions/12928360/how-can-i-disable-mod-security-in-htaccess-file , depending on your hosting provided there might be other ways to disable modsec for opencart admin.

I found a theme bug, what can I do?

Check if running latest update First thing to do is to make sure that you are using the latest theme update, go to theme page on theme forest and check Last update section to see if you downloaded the theme after the last update date if not then redownload the theme and update the files on your server.

Check if the bug is not present also on opencart default theme If the bug is still present after the update then make sure that is a theme bug by temporarily switching the theme to opencart default theme and check if the bug is still present after the change.

Send bug report only after checking last update and opencart default theme If the bug is not showing for opencart default theme then this is either a misconfiguration or a theme bug, you can then post a comment on theme page comments section or send me a message using the contact page on themeforest.

Detailed bug description required You will need to include the bug url and detailed steps to reproduce the bug along with opencart, php and browser version, if the bug is shown in the admin backend also temporary opencart admin access is required.

Support


Themeforest support is provided only on item comments, to post your question please go to item page and click comments tab, comments section also has a search feature that can be used to search previous comments asked by other users.

Please note that free support is only provided for theme bugs and theme features questions , customization requests are ignored, before submitting a new bug report please check that you are using the latest theme update and that the bug is indeed a theme bug by temporarily switching to opencart default theme to confirm that is not an opencart issue.

You can check if you are using the latest theme update by checking last update section on item page on themeforest, if the date is after you downloaded the theme you need to redownload the theme and update the files on your server How to update theme?

Rating


If you like the theme, don't forget to rate it.
Thanks.