Metronic - eCommerce Theme

Documentation v3.6

Thank You For Purchasing Metronic, One of Our Premium Items!

If you have any questions that are beyond the scope of this help file, please email our support support@keenthemes.com.

Table of Contents:

2. Template Structure

To top

All template files have fixed structure consisting of pre-header, header-navigation, page-slider, main and pre-footer as shown below:

Beginning of Page

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions. 

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

Page Head

Page head contains metadata, javascript and css files: 

<!-- Head BEGIN -->
<head>
  <meta charset="utf-8">
  <title>Metronic Shop UI</title>

  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta content="Metronic Shop UI description" name="description">
  <meta content="Metronic Shop UI keywords" name="keywords">
  <meta content="keenthemes" name="author">

  <meta property="og:site_name" content="-CUSTOMER VALUE-">
  <meta property="og:title" content="-CUSTOMER VALUE-">
  <meta property="og:description" content="-CUSTOMER VALUE-">
  <meta property="og:type" content="website">
  <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
  <meta property="og:url" content="-CUSTOMER VALUE-">

  <link rel="shortcut icon" href="favicon.ico">
  <link href="/favicon.ico" rel="SHORTCUT ICON" type="image/ico">

  <!-- Fonts START -->
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|PT+Sans+Narrow|Source+Sans+Pro:200,300,400,600,700,900&amp;subset=all" rel="stylesheet" type="text/css">
  <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900&amp;subset=all" rel="stylesheet" type="text/css"><!--- fonts for slider on the index page -->  
  <!-- Fonts END -->

  <!-- Global styles START -->          
  <link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="../../assets/global/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
  <!-- Global styles END --> 
   
  <!-- Page level plugin styles START -->
  <link href="../../assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
  <link href="../../assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.css" rel="stylesheet">
  <link href="../../assets/global/plugins/slider-layer-slider/css/layerslider.css" rel="stylesheet">
  <!-- Page level plugin styles END -->

  <!-- Theme styles START -->
  <link href="../../assets/global/css/components.css" rel="stylesheet">
  <link href="../../assets/frontend/layout/css/style.css" rel="stylesheet">
  <link href="../../assets/frontend/pages/css/style-shop.css" rel="stylesheet" type="text/css">
  <link href="../../assets/frontend/pages/css/style-layer-slider.css" rel="stylesheet"><!-- metronic layer slider styles -->
  <link href="../../assets/frontend/layout/css/style-responsive.css" rel="stylesheet">
  <link href="../../assets/frontend/layout/css/custom.css" rel="stylesheet">
  <!-- Theme styles END -->
</head>
<!-- Head END -->

Topbar

Header contains of logo and top menu bar and it used in all pages. HTML code of header container shown below: 

    <div class="pre-header">
        <div class="container">
            <div class="row">
                <!-- BEGIN TOP BAR LEFT PART -->
                <div class="col-md-6 col-sm-6 additional-shop-info">
                    <ul class="list-unstyled list-inline">
                    </ul>
                </div>
                <!-- END TOP BAR LEFT PART -->
                <!-- BEGIN TOP BAR MENU -->
                <div class="col-md-6 col-sm-6 additional-nav">
                    <ul class="list-unstyled list-inline pull-right">
                    </ul>
                </div>
                <!-- END TOP BAR MENU -->
            </div>
        </div>        
    </div>

Navigation

Header contains of logo and top menu bar and it used in all pages. HTML code of header container shown below: 

        <!-- BEGIN NAVIGATION -->
        <div class="header-navigation">
          <ul>
            <li class="dropdown">
            </li>
            <li class="dropdown dropdown-megamenu">
            </li>
            <!-- BEGIN TOP SEARCH -->
            <li class="menu-search">
            </li>
            <!-- END TOP SEARCH -->
          </ul>
        </div>
        <!-- END NAVIGATION -->

Slider

Layer Slider 

    <div class="page-slider margin-bottom-35">
      <!--LayerSlider begin-->
      <div id="layerslider" style="width: 100%; height: 494px; margin: 0 auto;">
      </div>
      <!--LayerSlider end-->
    </div>

Content

Content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below: 

    <div class="main">
      <div class="container">
      </div>
    </div>

Footer

    <!-- BEGIN PRE-FOOTER -->
    <div class="pre-footer">
      <div class="container">
      </div>
    </div>
    <!-- END PRE-FOOTER -->

    <!-- BEGIN FOOTER -->
    <div class="footer padding-top-15">
      <div class="container">
     </div>
    </div>
    <!-- END FOOTER -->

End Of Page(Javascripts)

Javascript files loaded in the end of page. This will reduce page load time.

    <!-- Load javascripts at bottom, this will reduce page load time -->
    <!-- BEGIN CORE PLUGINS (REQUIRED FOR ALL PAGES) -->
    <!--[if lt IE 9]>
    <script src="assets/plugins/respond.min.js"></script>  
    <![endif]-->
    <script src="../../assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="../../assets/global/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>      
    <script src="../../assets/frontend/layout/scripts/back-to-top.js" type="text/javascript"></script>
    <script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <!-- END CORE PLUGINS -->

    <!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
    <script src="../../assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script><!-- pop up -->
    <script src="../../assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.min.js" type="text/javascript"></script><!-- slider for products -->
    <script src='../../assets/global/plugins/zoom/jquery.zoom.min.js' type="text/javascript"></script><!-- product zoom -->
    <script src="../../assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script><!-- Quantity -->

    <!-- BEGIN LayerSlider -->
    <script src="../../assets/global/plugins/slider-layer-slider/js/greensock.js" type="text/javascript"></script><!-- External libraries: GreenSock -->
    <script src="../../assets/global/plugins/slider-layer-slider/js/layerslider.transitions.js" type="text/javascript"></script><!-- LayerSlider script files -->
    <script src="../../assets/global/plugins/slider-layer-slider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script><!-- LayerSlider script files -->
    <script src="../../assets/frontend/pages/scripts/layerslider-init.js" type="text/javascript"></script>
    <!-- END LayerSlider -->

    <script src="../../assets/frontend/layout/scripts/layout.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            Layout.init();    
            Layout.initOWL();
            LayersliderInit.initLayerSlider();
            Layout.initImageZoom();
            Layout.initTouchspin();
            Layout.initTwitter();
        });
    </script>
    <!-- END PAGE LEVEL JAVASCRIPTS -->

HTML Code Comment Sample

All the html, css and javascript file contents have easy to refer and meaningful comments:

<!-- BEGIN TOP BAR MENU -->
<div class="col-md-6 col-sm-6 additional-nav">
     <ul class="list-unstyled list-inline pull-right">
     </ul>
</div>
<!-- END TOP BAR MENU -->

CSS Code Comment Sample

/*********************
 GENERAL RESET & SETUP 
*********************/

/***
General typography 
***/
h1, h2, h3, h4, h5, h6 {
  font: 23px 'PT Sans Narrow', sans-serif;
  text-transform: uppercase;
  margin-bottom: 10px;
  margin-top: 0;
}

3. Font

To top

Metronic uses Open Sans font from google fonts. The font imported in main css file: assets/css/style.css

Open Sans Font load code

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=all" rel="stylesheet" type="text/css">

PT Sans Narrow load code

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=all' rel='stylesheet' type='text/css'>

Source Sans Pro load code

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900&subset=all" rel="stylesheet" type="text/css">

5. Javascript Initialization

To top

Core javascript initialization implemented in assets/frontend/layout/scripts/layout.js thorugh Layout object as shown below. This approach enables an easy modular implementation to initialize jquery plugins and other application logics. 

var Layout = function () {

    var localVariable; //local variable

    var sampleFunction = function() {
       //sample function code
    }

    return {

        //main method to initiate template pages
        init: function () {           
            sampleFunction() // call local function
        },

        //sample method declaration
        sampleMethod: function (test) 
        {
          alert(test);
      }

    };

}();

Core Handler Functions defined in assets/frontend/layout/scripts/layout.js

Below will be listed all handler functons implemented in layout object:

handleIEFixes

Fix html5 placeholder attribute for ie7 & ie8.

handleBootstrap

Bootstrap plugins initialization.

handleMisc

Handle Scroller

handleSearch

Show/hide ssearchbar

handleTheme

Set Theme Color

6. Coding & Extending

To top

CSS

To overide the theme CSS styles you can use assets/frontend/layout/css/custom.css for your own customization. This will make the future updates easier if you keep your own CSS code seperate.

7. Javascript Plugins & Resources

To top

Select Plugin Or Resource:

Bootstrap

Metronic eCommerce Frontend based on Twitter Bootstrap

CSS Files

<link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

JS Files

<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

Official Documentation

http://getbootstrap.com

Bootstrap Touchspin

A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.

JS Files

<script src="assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>

Official Documentation

http://www.virtuosoft.eu/code/bootstrap-touchspin/

OWL Carousel

Fully loaded, responsive content slider

CSS Files

<link href="../../assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.css" rel="stylesheet">

JS Files

<script src="../../assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.min.js" type="text/javascript"></script><!-- slider for products -->

Official Documentation

OWL Carousel

Fancybox

FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages.

CSS Files

<link href="assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" />

JS Files

<script type="text/javascript" src="assets/global/plugins/fancybox/source/jquery.fancybox.pack.js"></script>

Official Documentation

http://www.fancyapps.com/fancybox/

Font Awesome 4.0.3

The iconic font designed for use with Twitter Bootstrap

CSS Files

<link href="assets/global/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" />

Official Documentation

http://fortawesome.github.com/Font-Awesome/

Font Awesome 4.0.3

GMaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

CSS Files

No CSS file

JS Files

<script src="assets/global/plugins/gmaps/gmaps.js" type="text/javascript"></script>

Official Documentation

http://hpneo.github.com/gmaps/

Layer Slider

LayerSlider is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects

CSS Files

  <link rel="stylesheet" href="assets/global/plugins/layerslider/css/layerslider.css" type="text/css">

JS Files

    <script src="assets/global/plugins/layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
    <script src="assets/global/plugins/layerslider/jQuery/jquery-transit-modified.js" type="text/javascript"></script>
    <script src="assets/global/plugins/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
    <script src="assets/global/plugins/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>

Official Documentation

Please kindly find documentation for Layer Slider in downloaded pack

Rateit

Rating plugin for jQuery.

CSS Files

  <link href="assets/global/plugins/rateit/src/rateit.css" rel="stylesheet" type="text/css">

JS Files

<script src="assets/global/plugins/rateit/src/jquery.rateit.js" type="text/javascript"></script>

Official Documentation

http://rateit.codeplex.com/

Slider Range

Set the range option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.

CSS Files

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

JS Files

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Official Documentation

http://jqueryui.com/slider/#range

Uniform

Minimalistic form elements with jQuery

CSS Files

<link href="assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>

JS Files

<link href="assets/global/plugins/uniform/jquery.uniform.min.js" rel="stylesheet" type="text/css"/>

Official Documentation

http://uniformjs.com/

Zoom

A plugin to enlarge images on touch, click, or mouseover.

JS Files

<script type="text/javascript" src='assets/global/plugins/zoom/jquery.zoom.min.js'></script>

Official Documentation

http://www.jacklmoore.com/zoom/

Open Sans

Metornic uses Open Sans web font from google fonts: http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700

CSS Load

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=all" rel="stylesheet" type="text/css">

Official Documentation

http://www.google.com/webfonts

PT Sans Narrow

Metornic uses Open Sans web font from google fonts: http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700

CSS Load

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=all' rel='stylesheet' type='text/css'>

Official Documentation

http://www.google.com/webfonts

PT Sans Narrow

Metornic uses Open Sans web font from google fonts: http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700

CSS Load

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900&subset=all" rel="stylesheet" type="text/css">

Official Documentation

http://www.google.com/webfonts

8. References

To top

Below is the list of all plugins and external resources used to power this template.

Name Description URL
jQuery 1.11.0 Core Javascript library http://www.jquery.com
Twitter Bootstrap v3.1.1 Sleek, intuitive, and powerful front-end framework for faster and easier web development http://getbootstrap.com
Bootstrap Touchspin A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys. http://www.virtuosoft.eu/code/bootstrap-touchspin/
Bxslider Fully loaded, responsive content slider http://bxslider.com
FancyBox FancyBox is a tool for displaying images, html content and multi-media http://fancybox.net/
gmaps.js gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code http://hpneo.github.com/gmaps/
Layer Slider LayerSlider is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects Layer Slider on CodeCanyon
Rateit Rating plugin for jQuery. http://rateit.codeplex.com/
Slider Range Set the range option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected. http://jqueryui.com/slider/#range
Uniform Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility http://uniformjs.com/
Zoom A plugin to enlarge images on touch, click, or mouseover. http://www.jacklmoore.com/zoom/
Font Awesome The iconic font designed for use with Twitter Bootstrap http://fortawesome.github.com/Font-Awesome/
Open Sans Metornic Frontend uses Open Sans web font from google fonts: http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700 http://www.google.com/webfonts
PT Sans Narrow Metornic Frontend uses PT Sans Narrow web font from google fonts: http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=all http://www.google.com/webfonts
Source Sans Pr Metornic Frontend uses Source Sans Pr web font from google fonts: http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900&subset=all http://www.google.com/webfonts

9. Change Log

To top

Version 3.6 – 11 December 2014(Both LTR and RTL versions)

  • No changes

Version 3.5.2 – 8 December 2014(Both LTR and RTL versions)

  • IMPROVEMENT: Some Improvements
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css
    • Modified css file: assets/frontend/pages/css/style-shop.css
  • FIX: Minor Bug Fixes
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css
    • Modified css file: assets/frontend/pages/css/style-shop.css

Version 3.5.1 – 25 November 2014(Both LTR and RTL versions)

  • UPDATED: Bootstrap 3.3.1
    • Updated folder: assets/global/plugins/bootstrap/

Version 3.5 – 11 November 2014(Both LTR and RTL versions)

  • UPDATED: Bootstrap 3.3.0
    • Updated folder: assets/global/plugins/bootstrap/

Version 3.4 – 4 November 2014(Both LTR and RTL versions)

  • No changes

Version 3.3.1 – 14 October 2014(Both LTR and RTL versions)

  • UPDATE: Latest LayerSlider Plugin
    • Updated plugin folder: assets/global/plugins/slider-layer-slider/
  • UPGRADE: jQuery 1.11.1
    • Updated plugin file: assets/global/plugins/jquery.min.js
    • Updated plugin file: assets/global/plugins/jquery.min.map
    • Updated plugin file: assets/global/plugins/jquery-migrate.min
  • UPGRADE: Fontawesome v4.2.0
    • Updated plugin folder: assets/global/plugins/font-awesome/

Version 3.3.0 – 24 September 2014(Both LTR and RTL versions)

  • IMPROVEMENT: Some Improvements
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css
    • Modified css file: assets/frontend/pages/css/style-shop.css
  • FIX: Minor Bug Fixes
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css
    • Modified css file: assets/frontend/pages/css/style-shop.css

Version 3.2.0 – 03 September 2014(Both LTR and RTL versions)

  • No changes.

Version 3.1.3 – 01 July 2014(Both LTR and RTL versions)

  • UPDATE: Latest LayerSlider Plugin
    • Updated plugin folder: assets/global/plugins/slider-layer-slider/

Version 3.1.2 – 17 July 2014(Both LTR and RTL versions)

  • No changes

Version 3.1.1 – 01 July 2014(Both LTR and RTL versions)

  • UPDATE: Bootstrap 3.2.0
    • Updated plugin folder: assets/global/plugins/bootstrap/
    • Modified html files: all html files
  • NEW: Auto Closable Header Search Box
    • Modified javascript file: assets/frontend/layout/scripts/layout.js
  • FIX: Minor Bug Fixes
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css
    • Modified css file: assets/frontend/pages/css/style-shop.css

Version 3.1 – 10 May 2014(Both LTR and RTL versions)

  • UPDATE: Fontawesome 4.1.0
    • Updated plugin folder: assets/globals/plugins/font-awesome/
    • Modified html file: feature-buttons.html
  • FIXED: Fixed Header Issue on IE11
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css
  • FIXED: Fixed Header Z-index Issue
    • Modified css file: assets/frontend/layout/css/style.css
    • Modified css file: assets/frontend/layout/css/style-responsive.css
  • FIXED: Bootstrap Button Size Issue
    • Modified css file: assets/frontend/layout/css/style.css
  • IMPROVEMENT: Minor code improments

Version 3.0.2 – 30 May 2014(Both LTR and RTL versions)

  • No changes.

Version 3.0.1 – 10 May 2014(Both LTR and RTL versions)

  • NEW: Added 6 Color Themes
  • FIXED: Sub Menu Click Issue on Mobile Devices
  • FIXED: Menu Link’s Padding Issue on Mobile Devices
  • FIXED: Content Left & Right Margin Issue on Mobile Devices
  • FIXED: Horizontal Scroll Appeared On Mobile Devices
  • IMPROVEMENT: Other minor improments

Version 3.0 – 2 May 2014(Both LTR and RTL versions)

  • NEW: Corporate and eCommerce themes merged into one theme
  • NEW: My Account Page
  • NEW: My Wish List Page
  • NEW: Product Comparison Page
  • NEW: OWL Carousel
    • Instead of BX Slider
  • UPDATE: Upgraded Revolution & Layer Sliders
  • IMPROVEMENT: Mega Menu Improved. Now It's fully responsive
  • IMPROVEMENT: Fixed header improved.
    • Now it's more smooth on scrolling.
    • If you are using Header with Top Bar and you wish to make Header fixed, then in the end of page you will need uncomment following JS inits: Layout.initFixHeaderWithPreHeader(); Layout.initNavScrolling();
  • IMPROVEMENT: Latest Tweets in footer now showing real tweets

Version 2.0.2 – 20 February 2014(Both LTR and RTL versions)

  • FIX: Fix Google Fonts Load Issue
    • Modified html files: all html files

Version 2.0.1 - 19 February 2014(Both LTR and RTL versions)

  • NEW: Scrollable Item List In Shoping Cart Dropdown On Header
    • Modified html page: all html pages
    • Modified javascript file: assets/frontend/layout/scripts/layout.js
  • UPGRADE: Latest Bootstrap 3.2.0
    • Updated folder: assets/global/plugins/bootstrap/
  • FIX: Quantity Input Spinner Issue On Shopping Cart Page
    • Modified html page: shopping-cart.html
  • FIX: Missing Icons in Fontawesome 4.0.3 & Glypicons Examples
    • Modified html file: feature-icons.html

Version 2.0 – 12 February 2014

  • eCommerce initial release

10. Upgrade

To top

Upgrade from v3.1 to v3.3.x

Just replace the assets folder and refer to the above changelog.

Upgrade from v3.0.x to v3.1

Just replace the assets folder and refer to the above changelog.

Upgrade to v3.0.1

Just replace the assets folder with the latest one(merge back your own changes if you have done any) and update html code according to the changelog.

11. End Of Documentation

To top

Once again, thanks for purchasing Metronic. We hope you will enjoy using it for your next project.