Beniko - Premium OpenCart Theme


Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much! Contact: http://themeforest.net/user/emirates7

Before you install our template, make sure you have installed and running the correct version of OpenCart.

Before you start uploading theme always backup all your files.

Upload files using your FTP Client (we recommend FileZilla) from our download package.

In Files to Upload is folder with version of OpenCart. Open it and there are six folders: "Admin", "Catalog", "Data_sample", "Image", "System", "Themeinstall", like in your installation directory:

 

You will be asked if you want to overwrite some of the files from your current installation. Overwrite all files.

 

Theme activation

Go to OpenCart admin panel and activate the theme: System › Settings › Edit Store settings › Store tab › Template dropdown.

 

Theme install

After activating the Beniko template, you will enter the main webpage of your shop and will be automatically redirected to the address:
themeinstall/index.php

You will be informed about the correct installation of the template and at this point you will be able to come back to the main page of your shop. However, if you are redirected to the address themeinstall/index.php every time or if strange mistakes appear on your page, you will have to add few lines of your code manually to your file index.php located in the main folder of the template.

How to do it:

Open the file index.php and find the 76th line of the code. Add the following code to that line:

//Unlimited colors theme
$theme = $config->get( $config->get('config_template') . '_skin'  );
$store = 'default';
if($config->get( 'config_store_id' ) == 0) {
        $store = 'default';
} else {
        $store = $config->get( 'config_store_id' );
}

require_once($vqmod->modCheck(DIR_SYSTEM . 'library/themeoptions.php'));
$theme_options = new ThemeOptions($config->get('config_template'), $store, $theme);
$registry->set('theme_options', $theme_options);

Save and upload the changed file index.php onto the server.

Images size

With this theme you can set your own images size from admin panel. You don't need to edit CSS files.

If you wan to change them go to OpenCart admin panel and set image size in: System › Settings › Edit Store settings › Image tab

For the best look we recommend size in demo admin panel.

 

Sizes images in modules: Bestsellers, Filter Products, Specials, Features, Latest, you must set in the module settings!

Extra skins it is one skin Default created by using the module Beniko Theme Options.

In download package there are 4 folders. Go into Extra skins folder. You find there another folder. This folder to need to upload to your server. We recommend to use FileZilla. You just need to drag and drop file to your OpenCart root folder:

If you want your webpage to look exactly like the demo version, then this bookmark is made just for you. Make sure you have completed all steps described in Extra skins in documentation properly. Now log in to your administrative panel opencart. After valid log in you should see Dashboard. Go to the bookmark  Extensions -> Modules. You will notice few names in bold. They are the following modules:
- Camera slider
- Carousel item
- Custom Module
- Filter product
- MegaMenu
- Product tabs
- Revolution slider
- Beniko theme options

There should be a sign Install next to every modul and you have to click on it to install the accessories. After installing the module go to the editing of the module Beniko Theme Options. You should see the image presented below:

From the list choose the skin you are interested in and press the button Active skin.

On the left at the very end there is a bookmark Install data. Go there.

You have to Press all Install buttons to install exemplary data. After completing all these steps your webpage should look almost identical as the demo version.

If you want to add banners to your site go to OpenCart admin panel and go to edit the module Custom Module: System › Extensions › Modules › Custom Module. Click the add button Module. Set type module to HTML, layout to home, position to preface fullwidth and status to enabled. In HTML add text:

<div class="row banners hidden-xs">
 <div class="col-sm-3"><a href="#"><img src="image/data/banner-01.png" alt="Image"></a></div>
 <div class="col-sm-3"><a href="#"><img src="image/data/banner-02.png" alt="Image"></a></div>
 <div class="col-sm-3"><a href="#"><img src="image/data/banner-03.png" alt="Image"></a></div>
 <div class="col-sm-3"><a href="#"><img src="image/data/banner-04.png" alt="Image"></a></div>
</div>

<div class="row banners hidden-xs">
 <div class="col-sm-12"><a href="#" style="margin: 0px -18px;position:relative;display: block"><img src="image/data/banner-05.png" alt="Image"></a></div>
 </div>

You notice that elements div have class of col-sm-4. Number 4 is the width of banner. You can change the width of the number from 1 to 12. The total sum of the width must be equal to 12. For example:

<div class="row banners hidden-xs">
 <div class="col-sm-4"><a href="#"><img src="image/data/banner-01.png" alt="Image"></a></div>
 <div class="col-sm-8"><a href="#"><img src="image/data/banner-02.png" alt="Image"></a></div>
</div>

Slider operates on the basis of the same rule as a standard opencart. You can add unlimited number of  sliders, insert unlimited number of photo there and place every slider at any place on the webpage. To add a slider go to the bookmark Existing modules. Then in the same bookmark press Create new slider button.

Complete the name, width and height of the slider and then decide whether slider is to be displayed within the whole width of the page or with the content of the page. Then press Add Slider button and upload the Picture. When you have a completed slider, press the save button.  

In the Module placement bookmark you can place the sliders you have created at any part of the webpage. Press Add item and then choose slider, layout and the place you want the slider to be visible at. In sort order you have to type in a number higher or equal 0. The greater the number, the lower the slider will be displayed regarding the number of modules.

In the demo version this module was used to display the slider visible under Menu. If you want your webpage to look the same, go to editing Beniko Theme Options module, then to  Install data bookmark and next to sign Camera slider press the Install button.

Custom module is used to adding any content (HTML) at any place on the webpage. To add a module press  Add Module button. You can decide if the module is to be displayed in the Block form (heading + content) or in the HTML form, where you can inset any html code.

In the demo version this module was used to display banners under the slider. If you want the banners to be displayed on your webpage in the same way as in demo version, go to the editing of Beniko Theme Options module, then to Install data bookmark and next to the sign Custom module press the install button.

Filter product module is used for displaying any type of products at any place on the webpage. After clicking on Add module button in the Module tab bookmark you can add bookmarks and then choose the type of products.

In the Module setting bookmark you can:
Carousel – turn on or off product scrolling,
Dimension (W x H) and Resize Type – you can set the size of product pictures,
Max Items - Max Columns - Limit Items In Carousel – you can set the number of products in one row, the number of rows as well as the number of all products in a module,
Layout – subpage on which the module is to be displayed,
Position – position, in which place the module is to be displayed,
Status – you can decide if the module is to be visible or not,
Sort Order – here you type in the numbers. The greater number you type in, the lower the module is to be displayed regarding other modules.

This module enable the creation of unlimited number of bookmarks on the product webpage. Go to editing the module and press Add Tab button. Choose if you want the bookmark to be displayed on all products or Only on a chosen product. Start typing a product name in the Product Name field to select it from your catalogue. Proceed to add any custom html content to that particular tab.

This module enables the creation of your own menu.

In basic configuration you can set in which part of the webpage it is to be displayed in. If you turn off the module and choose a position different than menu, then instead of menu a standard opencart navigation will be displayed.

In design configuration you can set:
Orientation - horizontal/vertical,
Search bar – after choosing this option a browser will be displayed on the right side of the menu, but Only when orientation is set on horizontal,
Navigation text – you can set the title of the menu,
Expand Menu Bar Full Width? – you can choose if the menu background is to cover the whole page or end with the content,
Home item – you can turn off the Home icon or change it into text,

In Query animations you can choose the animation for displaying the submenu as well as the duration of such an animation.

To add an item press the create new item button. After clicking on button, the following fields will appear:
Name – here you have to type the name of the menu,
Description – if you want to type in a short description of the menu here, it will be displayed in small print under the name,
Icon – if you upload the icon, it will be displayed on the left by the name of the menu,
Link – here you have to type in the address onto which you are to be redirected after clicking on menu,
Link in new window – if you want the page to open in a New window after clicking on menu, choose an option called enabled,
Status – if you want the item not to be visible on the page, choose the option called disabled,
Position – if you want the item to be situated on the right side of the navigation, choose the option called right,
Submenu width – here you have to type in the width of the submenu,
Display submenu on – here you choose the way of displaying submenu,

Content item - content of these fields will only be displayed if the menu be set as submenu:
Content width – you choose the width of the item,
Content type – here you can choose if a regular html content, chosen product or selected categories are to be displayed by content,

After filling in all Fields Press the Save button. An item you created should appear on the left. If you add more item, you will be able to sort them or set as submenu on the left by clicking on the item with a mouse and moving it up, down, left and right.

If you want the megamenu to be displayed in the same way as in demo version, go to the editing of Beniko Theme Options module, then to Install data bookmark and near the sig MegaMenu press the Install data button.

With this module you can create awesome sliders with nice effects.

HOW TO SET SLIDERS:

  1. In general options set Height, Slider speed and Layout type for all sliders
  2. Than go to slide 1 and upload image select transition effect and add your link.

Now you can add ements

ELEMENTS SETTINGS

With this settings you can create your own custom classess for each element on slider.

Element type - Choose type of content in your element then add text/code in TEXT/HTML field or upload image.

Element class - Class name for edited element:
Example

new_element_1_1

Element style - Your own style for created element.
Example

.new_element_1_1 { 
width: auto; 
background: none; 
font-size: 100%; 
line-height: 1.3; 
font-family: Open Sans; 
} 

Animation class 
Options:

Animation Easing - special easing effect of the animation.
Options:

easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack easeInBounce, easeOutBounce, easeInOutBounce

Animation Endeasing - special endeasing effect of the animation.
Options:

easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack easeInBounce, easeOutBounce, easeInOutBounce

Speed - Animation speed

Delay - Animation start time

X, Y - Text position

There is a blog in the demo version. If you want to locate a blog on your webpage, you need to download the following free module:
http://www.opencart.com/index.php?route=extension/extension/info&extension_id=11287

You don’t have to worry about adjusting the module, after correct installation your blog will look exactly the same as in demo version.

We've included one psd file with this theme:

1. beniko_grid1196_homepage.psd

.psd file is correctly layered, grouped and named, so you should have no problems finding relevant elements

Hi,

One more thank you for buying our theme.
If you have any question please contact me via contact form on themeforest profile.

http://themeforest.net/user/emirates7

I usually give you answer in max 48 hours.
Thanks,
Emirates7