Zerone - Premium Responsive Opencart 2.x Theme

Overview

Zerone - Premium Responsive Opencart 2.x Theme is an advanced opencart theme with custom THEME ADMIN PANEL.

Before we start, lets take a look on the folder structure of the theme. All theme files are placed in the Upload folder. The files to upload folder consists of 3 more folders for different types of theme assets:

  1. Admin - containing all custom admin features
  2. catalog -containing all theme files, custom controller, language files and the theme specific CSS and JS files
  3. Image - containing the theme thumbnail
  4. There is an extra file zerone.ocmod xml file which is used for modification

Uploading and Installing the Theme

Note: No Core files has been changed so no files will be replaced. Zerone uses default ocmod modification setup.
 

There are two ways to Uploading the Zerone Theme .

First Way

Second Way

Activating the Theme:

For Opencart 2.3.0.2:

When the theme files are uploaded you would need to activate your theme in Extensions->Extensions->Themes. Choose the extension type "Theme" in the dropdown. In Theme List click on edit and then change the Template directory value default to Zerone and click save.

For Opencart 2.2.0.0:

When the theme files are uploaded you would need to activate your theme in Extensions->Themes. In Theme List click on edit and then change the Template directory value default to Zerone and click save.

Image Settings:

Before you start using your store with the Zerone Opencart Theme , Image settings must be edited with the following values:

You can change the image settings in Extensions->Themes in that you have to click on edit. In that you have to change the values according to the images shown below.

 

For Opencart 2.1.0.2:

When the theme files are uploaded you would need to activate your theme in System->Settings. In Settings click on edit and then goto General tab in that change the Template value default to Zerone and click save.

Image Settings:

Before you start using your store with the Zerone Opencart Theme , Image settings must be edited with the following values:

You can change the image settings in System->settings in that you have to click on edit. In that goto image tab here you have to change the values according to the images shown below.

 

Theme Settings

This is the module where you control the different aspects of your theme like Theme Color, Google Fonts, Social Icons, Custom content, Payment Images, Facebook fanbox, Twitter timeline, youtube, Custom footer with icons .

For using the theme settings you have to install the LT Theme Settings from Extensions->Module . In module install the LT Theme Settings. After installing it click on edit of the LT Theme Settings .

There are 6 menus under the theme settings.

General Settings:

It contains 3 options.
1) You can set Full width or boxed layout for your store .
2) Powereby Text - You can change the footer poweredby text - eg:

Powered By <a href="http://www.opencart.com">OpenCart</a><br> Your Store © 2014.
3) Top Header Text - It is a small text that is displayed next to logo on header

Color Settings:

In color settings you can change color code for all most all the fields in your store .

Font Settings:

In this tab you can set the required font for your store . Font can be set for different fields . You can select the your fonts from 500+ google fonts . And also you can set the Font size. To check your preferred font goto Google Fonts

Custom Footer:

In this tab you can set custom footer text bar with icons . It supports multi-language. In Custom footer text you can give two text part one is top text and another is bottom text which you can see from the theme demo . And for the Field Custom Footer Icon 1 you have give the font value from Font Awesome which you can get from the link Font awesome

Payment Icons:

In this tab you can select the payment icons and also you can upload your own payment images . You can upload upto 3 payment images . The uploaded image size should be width 38px and height 24px .

Social Networks:

In this tab you can set social icons, custom content, Facebook fanbox, twitter timeline and youtube video.

For Facebook fanbox you have to give your page url in the field(Not the profile url).

For twitter you have to give your twitter widget id which you can get it from your twitter account. Login to your twitter account.goto settings->widget. in that create new widget. In this you will see an html code in a box . in that copy the data-widget-id value and paste it in twitter-widget-id.

For Youtube you have to give iframe code of the youtube video . For Youtube video the width and height should be 420 and 315 respectively.

 

Latest,Featured,Special and Bestseller Module Settings:

As you can see there are two types you can set the width and height . As seen in store example demo fashion demo uses the width 262 and height as 387 and for other two demo the width is 262 and height is 299.

 

Custom Banner Module Settings:

To use custom banner you need to install module LT Banner module in extension. In Banner module you can set upto four images in a single banner . For column left and column right you can only use a single image and the width of the image should be 262 px and height can vary . For content top and content bottom you can set upto 4 images in a single banner . From the below image you can see for fashion banner width is set as 560px as it has 2 images . Depending upon the image count you have to set the width.

 

HTML Structure

The main HTML structure of the template consists of 6 main containers containing all page ellements:

  1. Nav Top
  2. Header
  3. container
  4. footer
  5. powered

Header

The header div contains -

  1. Logo
  2. Currency
  3. Language
  4. Search
  5. Cart
  6. Main menu for pages

Menu

The menu div contains navigation elements of the template

  1. Category menu
  2. Sub Category menu

The category menu is a 2 level drop-down menu powered by jQuery & CSS3 custom script. The structure of the menu is as follows:

Content

Most of the page elements are placed in a container div with class "row". The "box" container have main parts: product-layout. All important parts of every page segment is placed within the "container" div.

CSS Files and Structure

The theme comes with several CSS (stylesheet) files grouped in the stylesheet folder:

  1. stylesheet.css - the main CSS file containg the layout styling for the theme.
  2. animate.css - Styles for the default Slideshow module
  3. The theme use bootstrap

If you would like to edit or change any color, font, or style of any elements in the template, It is recommended to use the theme control module and only if it's not possible to achieve what you need there to edit the general CSS file (stylesheet.css). If you would like to change the general color for links for example, you would change the following:

	a, a:visited {
	color: #9D0043;
	text-decoration: underline;
	cursor: pointer;
	}

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

e.g.

	#header .div5 a.toplinks {
    	color: #7C7C7C;
    	float: left;
    	font-size: 14px;
    	margin-right: 2px;
    	padding: 10px 8px;
    	text-align: center;
    	text-decoration: none;
	}

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

JavaScript

This template is heaving loaded with both custom JS functions and free jQuery plugins. All JS files are placed in a separate folder called "js". The list of files is as follows:

  1. custom.js
  2. wow.min.js

some of the jQuery plugins are heavily customized and changes in their files are not recommended.

All JS functions related to the theme content management are placed in custom.js or inline in the HTML files if required. The custom.js file is responsible for the main functions sliding effects, image fading effects

Sources and Credits

I've used the following images, icons or other files as listed.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme.Contact me throught support@latestthemes.net

Latest Themes