Last Updated: 05/August/2019
By: Sean Ngu
Email: nguoksiong@live.co.uk

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 your question to my email nguoksiong@live.co.uk. Thanks so much!

### A) HTML Structure - top

This template can be used as an fluid layout with a max of 12 columns next to each other. The general template structure is the same throughout the template. Here is the general structure.

    <!-- BEGIN #page-container -->
    <div id="page-container" class="fade">
      <!-- BEGIN #top-nav -->
      <div id="top-nav" class="top-nav">
      </div>
      <!-- END #top-nav -->

      <!-- BEGIN #header -->
      <div id="header" class="header">
      </div>
      <!-- END #header -->

      <!-- BEGIN #slider -->
      <div id="slider" class="section-container p-0 bg-black-darker">
      </div>
      <!-- END #slider -->

      <!-- BEGIN #promotions -->
      <div id="promotions" class="section-container bg-white">
      </div>
      <!-- END #promotions -->

      <!-- BEGIN #trending-items -->
      <div id="trending-items" class="section-container bg-silver">
      </div>
      <!-- END #trending-items -->

      <!-- BEGIN #mobile-list -->
      <div id="mobile-list" class="section-container bg-silver p-t-0">
      </div>
      <!-- END #mobile-list -->

      <!-- BEGIN #tablet-list -->
      <div id="tablet-list" class="section-container bg-silver p-t-0">
      </div>
      <!-- END #tablet-list -->

      <!-- BEGIN #policy -->
      <div id="policy" class="section-container p-t-30 p-b-30">
      </div>
      <!-- END #policy -->

      <!-- BEGIN #subscribe -->
      <div id="subscribe" class="section-container bg-silver p-t-30 p-b-30">
      </div>
      <!-- END #subscribe -->

      <!-- BEGIN #footer -->
      <div id="footer" class="footer">
      </div>
      <!-- END #footer -->

      <!-- BEGIN #footer-copyright -->
      <div id="footer-copyright" class="footer-copyright">
      </div>
      <!-- END #footer-copyright -->
    </div>
    <!-- END #page-container -->

### B) Beginning of Page - top

Below code is used to detect the internet explorer for browser compatibility & styling setting usage.

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

### C) Page Head - top

Page head contains metadata, javascript and css files:

    <head>
      <meta charset="utf-8" />
      <title>E-Commerce Front End Theme</title>
      <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
      <meta content="" name="description" />
      <meta content="" name="author" />

      <!-- ================== BEGIN BASE CSS STYLE ================== -->
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
      <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
      <link href="../assets/plugins/font-awesome/css/all.min.css" rel="stylesheet" />
      <link href="../assets/plugins/animate/animate.min.css" rel="stylesheet" />
      <link href="../assets/css/e-commerce/style.min.css" rel="stylesheet" />
      <link href="../assets/css/e-commerce/style-responsive.min.css" rel="stylesheet" />
      <link href="../assets/css/e-commerce/theme/default.css" id="theme" rel="stylesheet" />
      <!-- ================== END BASE CSS STYLE ================== -->

      <!-- ================== BEGIN BASE JS ================== -->
      <script src="../assets/plugins/pace/pace.min.js"></script>
      <!-- ================== END BASE JS ================== -->
    </head>

### D) Top Nav - top

    <!-- BEGIN #top-nav -->
    <div id="top-nav" class="top-nav">
      <!-- BEGIN container -->
      <div class="container">
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown dropdown-hover">
              <a href="#" data-toggle="dropdown"><img src="../assets/img/flag/flag-english.png" class="flag-img" alt="" /> English <i class="fa fa-angle-down"></i></a>
              <ul class="dropdown-menu">
                <li><a href="#"><img src="../assets/img/flag/flag-english.png" class="flag-img" alt="" /> English</a></li>
                <li><a href="#"><img src="../assets/img/flag/flag-german.png" class="flag-img" alt="" /> German</a></li>
                <li><a href="#"><img src="../assets/img/flag/flag-spanish.png" class="flag-img" alt="" /> Spanish</a></li>
                <li><a href="#"><img src="../assets/img/flag/flag-french.png" class="flag-img" alt="" /> French</a></li>
                <li><a href="#"><img src="../assets/img/flag/flag-chinese.png" class="flag-img" alt="" /> Chinese</a></li>
              </ul>
            </li>
            <li><a href="#">Customer Care</a></li>
            <li><a href="#">Order Tracker</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Career</a></li>
            <li><a href="#">Our Forum</a></li>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#"><i class="fa fa-facebook f-s-14"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter f-s-14"></i></a></li>
            <li><a href="#"><i class="fa fa-instagram f-s-14"></i></a></li>
            <li><a href="#"><i class="fa fa-dribbble f-s-14"></i></a></li>
            <li><a href="#"><i class="fa fa-google-plus f-s-14"></i></a></li>
          </ul>
        </div>
      </div>
      <!-- END container -->
    </div>
    <!-- END #top-nav -->

### E) Header - top

    <!-- BEGIN #header -->
    <div id="header" class="header">
      <!-- BEGIN container -->
      <div class="container">
        <!-- BEGIN header-container -->
        <div class="header-container">
          <!-- BEGIN navbar-header -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <div class="header-logo">
              <a href="index.html">
                <span class="brand"></span>
                <span>Color</span>Admin
                <small>e-commerce frontend theme</small>
              </a>
            </div>
          </div>
          <!-- END navbar-header -->
          <!-- BEGIN header-nav -->
          <div class="header-nav">
            <div class=" collapse navbar-collapse" id="navbar-collapse">
              <ul class="nav">
                <li class="active"><a href="index.html">Home</a></li>
                <li class="dropdown dropdown-full-width dropdown-hover">
                  <a href="#" data-toggle="dropdown">
                    Our Store
                    <i class="fa fa-angle-down"></i>
                    <span class="arrow top"></span>
                  </a>
                  <!-- BEGIN dropdown-menu -->
                  <div class="dropdown-menu p-0">
                    <!-- BEGIN dropdown-menu-container -->
                    <div class="dropdown-menu-container">
                      <!-- BEGIN dropdown-menu-sidebar -->
                      <div class="dropdown-menu-sidebar">
                        <h4 class="title">Shop By Categories</h4>
                        <ul class="dropdown-menu-list">
                          <li><a href="product.html">Mobile Phone <i class="fa fa-angle-right pull-right"></i></a></li>
                          <li><a href="product.html">Tablet <i class="fa fa-angle-right pull-right"></i></a></li>
                          <li><a href="product.html">Laptop <i class="fa fa-angle-right pull-right"></i></a></li>
                          <li><a href="product.html">Desktop <i class="fa fa-angle-right pull-right"></i></a></li>
                          <li><a href="product.html">TV <i class="fa fa-angle-right pull-right"></i></a></li>
                          <li><a href="product.html">Speaker <i class="fa fa-angle-right pull-right"></i></a></li>
                          <li><a href="product.html">Gadget <i class="fa fa-angle-right pull-right"></i></a></li>
                        </ul>
                      </div>
                      <!-- END dropdown-menu-sidebar -->
                      <!-- BEGIN dropdown-menu-content -->
                      <div class="dropdown-menu-content">
                        <h4 class="title">Shop By Popular Phone</h4>
                        <div class="row">
                          <div class="col-md-3">
                            <ul class="dropdown-menu-list">
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> iPhone 7</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> iPhone 6s</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> iPhone 6</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> iPhone 5s</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> iPhone 5</a></li>
                            </ul>
                          </div>
                          <div class="col-md-3">
                            <ul class="dropdown-menu-list">
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Galaxy S7</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Galaxy A9</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Galaxy J3</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Galaxy Note 5</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Galaxy S7</a></li>
                            </ul>
                          </div>
                          <div class="col-md-3">
                            <ul class="dropdown-menu-list">
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Lumia 730</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Lumia 735</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Lumia 830</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Lumia 820</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Lumia Icon</a></li>
                            </ul>
                          </div>
                          <div class="col-md-3">
                            <ul class="dropdown-menu-list">
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Xperia X</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Xperia Z5</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Xperia M5</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Xperia C5</a></li>
                              <li><a href="product_detail.html"><i class="fa fa-fw fa-angle-right text-muted"></i> Xperia C4</a></li>
                            </ul>
                          </div>
                        </div>
                        <h4 class="title">Shop By Brand</h4>
                        <ul class="dropdown-brand-list m-b-0">
                          <li><a href="product.html"><img src="../assets/img/brand/brand-apple.png" alt="" /></a></li>
                          <li><a href="product.html"><img src="../assets/img/brand/brand-samsung.png" alt="" /></a></li>
                          <li><a href="product.html"><img src="../assets/img/brand/brand-htc.png" alt="" /></a></li>
                          <li><a href="product.html"><img src="../assets/img/brand/brand-microsoft.png" alt="" /></a></li>
                          <li><a href="product.html"><img src="../assets/img/brand/brand-nokia.png" alt="" /></a></li>
                          <li><a href="product.html"><img src="../assets/img/brand/brand-blackberry.png" alt="" /></a></li>
                          <li><a href="product.html"><img src="../assets/img/brand/brand-sony.png" alt="" /></a></li>
                        </ul>
                      </div>
                      <!-- END dropdown-menu-content -->
                    </div>
                    <!-- END dropdown-menu-container -->
                  </div>
                  <!-- END dropdown-menu -->
                </li>
                <li class="dropdown dropdown-hover">
                  <a href="#" data-toggle="dropdown">
                    Accessories
                    <i class="fa fa-angle-down"></i>
                    <span class="arrow top"></span>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="product.html">Mobile Phone</a></li>
                    <li><a href="product.html">Tablet</a></li>
                    <li><a href="product.html">TV</a></li>
                    <li><a href="product.html">Desktop</a></li>
                    <li><a href="product.html">Laptop</a></li>
                    <li><a href="product.html">Speaker</a></li>
                    <li><a href="product.html">Gadget</a></li>
                  </ul>
                </li>
                <li><a href="product.html">New Arrival</a></li>
                <li class="dropdown dropdown-hover">
                  <a href="#" data-toggle="dropdown">
                    Pages
                    <i class="fa fa-angle-down"></i>
                    <span class="arrow top"></span>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="index.html">Home (Default)</a></li>
                    <li><a href="index_fixed_header.html">Home (Fixed Header)</a></li>
                    <li><a href="index_inverse_header.html">Home (Inverse Header)</a></li>
                    <li><a href="search_results.html">Search Results</a></li>
                    <li><a href="product.html">Product Page</a></li>
                    <li><a href="product_detail.html">Product Details Page</a></li>
                    <li><a href="checkout_cart.html">Checkout Cart</a></li>
                    <li><a href="checkout_info.html">Checkout Shipping</a></li>
                    <li><a href="checkout_payment.html">Checkout Payment</a></li>
                    <li><a href="checkout_complete.html">Checkout Complete</a></li>
                    <li><a href="my_account.html">My Account</a></li>
                    <li><a href="contact_us.html">Contact Us</a></li>
                    <li><a href="about_us.html">About Us</a></li>
                    <li><a href="faq.html">FAQ</a></li>
                  </ul>
                </li>
                <li class="dropdown dropdown-hover">
                  <a href="#" data-toggle="dropdown">
                    <i class="fa fa-search search-btn"></i>
                    <span class="arrow top"></span>
                  </a>
                  <div class="dropdown-menu p-15">
                    <form action="search_results.html" method="POST" name="search_form">
                      <div class="input-group">
                        <input type="text" placeholder="Search" class="form-control bg-silver-lighter" />
                        <span class="input-group-btn">
                          <button class="btn btn-inverse" type="submit"><i class="fa fa-search"></i></button>
                        </span>
                      </div>
                    </form>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- END header-nav -->
          <!-- BEGIN header-nav -->
          <div class="header-nav">
            <ul class="nav pull-right">
              <li class="dropdown dropdown-hover">
                <a href="#" class="header-cart" data-toggle="dropdown">
                  <i class="fa fa-shopping-bag"></i>
                  <span class="total">2</span>
                  <span class="arrow top"></span>
                </a>

                <div class="dropdown-menu dropdown-menu-cart p-0">
                  <div class="cart-header">
                    <h4 class="cart-title">Shopping Bag (1) </h4>
                  </div>
                  <div class="cart-body">
                    <ul class="cart-item">
                      <li>
                        <div class="cart-item-image"><img src="../assets/img/product/product-ipad.jpg" alt="" /></div>
                        <div class="cart-item-info">
                          <h4>iPad Pro Wi-Fi 128GB - Silver</h4>
                          <p class="price">$699.00</p>
                        </div>
                        <div class="cart-item-close">
                          <a href="#" data-toggle="tooltip" data-title="Remove">×</a>
                        </div>
                      </li>
                      <li>
                        <div class="cart-item-image"><img src="../assets/img/product/product-imac.jpg" alt="" /></div>
                        <div class="cart-item-info">
                          <h4>21.5-inch iMac</h4>
                          <p class="price">$1299.00</p>
                        </div>
                        <div class="cart-item-close">
                          <a href="#" data-toggle="tooltip" data-title="Remove">×</a>
                        </div>
                      </li>
                      <li>
                        <div class="cart-item-image"><img src="../assets/img/product/product-iphone.png" alt="" /></div>
                        <div class="cart-item-info">
                          <h4>iPhone 6s 16GB - Silver</h4>
                          <p class="price">$649.00</p>
                        </div>
                        <div class="cart-item-close">
                          <a href="#" data-toggle="tooltip" data-title="Remove">×</a>
                        </div>
                      </li>
                    </ul>
                  </div>
                  <div class="cart-footer">
                    <div class="row row-space-10">
                      <div class="col-xs-6">
                        <a href="checkout_cart.html" class="btn btn-default btn-block">View Cart</a>
                      </div>
                      <div class="col-xs-6">
                        <a href="checkout_cart.html" class="btn btn-inverse btn-block">Checkout</a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="divider"></li>
              <li>
                <a href="my_account.html">
                  <img src="../assets/img/user/user-1.jpg" class="user-img" alt="" />
                  <span class="hidden-md hidden-sm hidden-xs">Login / Register</span>
                </a>
              </li>
            </ul>
          </div>
          <!-- END header-nav -->
        </div>
        <!-- END header-container -->
      </div>
      <!-- END container -->
    </div>
    <!-- END #header -->

### F) Page Content Header - top

    <!-- BEGIN #page-header -->
    <div id="page-header" class="section-container page-header-container bg-black hide">
      <!-- BEGIN page-header-cover -->
      <div class="page-header-cover">
        <img src="../assets/img/cover/cover-1.jpg" alt="" />
      </div>
      <!-- END page-header-cover -->
      <!-- BEGIN container -->
      <div class="container">
        <h1 class="page-header"><b>Apple</b> Product</h1>
      </div>
      <!-- END container -->
    </div>
    <!-- BEGIN #page-header -->

### G) Page Content - top

There have 2 options of page content. HTML code of Content container as shown below:

#### Page Content with Background

    <!-- BEGIN #content -->
    <div id="content" class="has-bg section-container">
        <!-- BEGIN cover-bg -->
        <div class="cover-bg">
            <img src="-- content background cover link --" alt="" />
        </div>
        <!-- END cover-bg -->
        <!-- BEGIN container -->
        <div class="container">
            <!-- content here -->
        </div>
        <!-- END container -->
    </div>
    <!-- END #content -->

#### Page Content without Background

    <!-- BEGIN #content -->
    <div id="content" class="section-container">
        <!-- BEGIN container -->
        <div class="container">
            <!-- content here -->
        </div>
        <!-- END container -->
    </div>
    <!-- END #content -->

### H) Page Footer - top

    <!-- BEGIN #footer -->
    <div id="footer" class="footer">
      <!-- BEGIN container -->
      <div class="container">
        <!-- BEGIN row -->
        <div class="row">
          <!-- BEGIN col-3 -->
          <div class="col-md-3">
            <h4 class="footer-header">ABOUT US</h4>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tristique dolor, ac efficitur velit. Nulla lobortis tempus convallis. Nulla aliquam lectus eu porta pulvinar. Mauris semper justo erat.
            </p>
            <p>
              Vestibulum porttitor lorem et vestibulum pharetra. Phasellus sit amet mi congue, hendrerit mi ut, dignissim eros.
            </p>
          </div>
          <!-- END col-3 -->
          <!-- BEGIN col-3 -->
          <div class="col-md-3">
            <h4 class="footer-header">RELATED LINKS</h4>
            <ul class="fa-ul">
              <li><i class="fa fa-li fa-angle-right"></i> <a href="#">Shopping Help</a></li>
              <li><i class="fa fa-li fa-angle-right"></i> <a href="#">Terms of Use</a></li>
              <li><i class="fa fa-li fa-angle-right"></i> <a href="#">Contact Us</a></li>
              <li><i class="fa fa-li fa-angle-right"></i> <a href="#">Careers</a></li>
              <li><i class="fa fa-li fa-angle-right"></i> <a href="#">Payment Method</a></li>
              <li><i class="fa fa-li fa-angle-right"></i> <a href="#">Sales & Refund</a></li>
              <li><i class="fa fa-li fa-angle-right"></i> <a href="#">Sitemap</a></li>
              <li><i class="fa fa-li fa-angle-right"></i> <a href="#">Privacy & Policy</a></li>
            </ul>
          </div>
          <!-- END col-3 -->
          <!-- BEGIN col-3 -->
          <div class="col-md-3">
            <h4 class="footer-header">LATEST PRODUCT</h4>
            <ul class="list-unstyled list-product">
              <li>
                <div class="image">
                  <img src="../assets/img/product/product-iphone-6s.jpg" alt="" />
                </div>
                <div class="info">
                  <h4 class="info-title">Iphone 6s</h4>
                  <div class="price">$1200.00</div>
                </div>
              </li>
              <li>
                <div class="image">
                  <img src="../assets/img/product/product-galaxy-s6.jpg" alt="" />
                </div>
                <div class="info">
                  <h4 class="info-title">Samsung Galaxy s7</h4>
                  <div class="price">$850.00</div>
                </div>
              </li>

              <li>
                <div class="image">
                  <img src="../assets/img/product/product-ipad-pro.jpg" alt="" />
                </div>
                <div class="info">
                  <h4 class="info-title">Ipad Pro</h4>
                  <div class="price">$800.00</div>
                </div>
              </li>
              <li>
                <div class="image">
                  <img src="../assets/img/product/product-galaxy-note5.jpg" alt="" />
                </div>
                <div class="info">
                  <h4 class="info-title">Samsung Galaxy Note 5</h4>
                  <div class="price">$1200.00</div>
                </div>
              </li>
            </ul>
          </div>
          <!-- END col-3 -->
          <!-- BEGIN col-3 -->
          <div class="col-md-3">
            <h4 class="footer-header">OUR CONTACT</h4>
            <address>
              <strong>Twitter, Inc.</strong><br />
              1355 Market Street, Suite 900<br />
              San Francisco, CA 94103<br /><br />
              <abbr title="Phone">Phone:</abbr> (123) 456-7890<br />
              <abbr title="Fax">Fax:</abbr> (123) 456-7891<br />
              <abbr title="Email">Email:</abbr> <a href="mailto:sales@myshop.com">sales@myshop.com</a><br />
              <abbr title="Skype">Skype:</abbr> <a href="skype:myshop">myshop</a>
            </address>
          </div>
          <!-- END col-3 -->
        </div>
        <!-- END row -->
      </div>
      <!-- END container -->
    </div>
    <!-- END #footer -->

### I) Page Footer Copyright - top

    <!-- BEGIN #footer-copyright -->
    <div id="footer-copyright" class="footer-copyright">
      <!-- BEGIN container -->
      <div class="container">
        <div class="payment-method">
          <img src="../assets/img/payment/payment-method.png" alt="" />
        </div>
        <div class="copyright">
          Copyright © 2019 SeanTheme. All rights reserved.
        </div>
      </div>
      <!-- END container -->
    </div>
    <!-- END #footer-copyright -->

### J) Panel Theme - top

Panel Theme used to customize the overall layout options.

    <!-- begin theme-panel -->
    <div class="theme-panel">
      <a href="javascript:;" data-click="theme-panel-expand" class="theme-collapse-btn"><i class="fa fa-cog"></i></a>
      <div class="theme-panel-content">
        <ul class="theme-list clearfix">
          <li>
            <a href="javascript:;" class="bg-purple"
              data-theme="purple"
              data-theme-file="../assets/css/e-commerce/theme/purple.css"
              data-click="theme-selector"
              data-toggle="tooltip"
              data-trigger="hover"
              data-container="body"
              data-title="Purple"> </a>
          </li>
          ...
        </ul>
      </div>
    </div>
    <!-- end theme-panel -->

### K) End of Page (Javascript) - top

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

      <!-- ================== BEGIN BASE JS ================== -->
      <script src="../assets/plugins/jquery/jquery-3.3.1.min.js"></script>
      <script src="../assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
      <!--[if lt IE 9]>
        <script src="assets/crossbrowserjs/html5shiv.js"></script>
        <script src="assets/crossbrowserjs/respond.min.js"></script>
        <script src="assets/crossbrowserjs/excanvas.min.js"></script>
      <![endif]-->
      <script src="../assets/plugins/js-cookie/js.cookie.js"></script>
      <script src="../assets/plugins/paroller/jquery.paroller.min.js"></script>
      <script src="../assets/js/e-commerce/apps.min.js"></script>
      <!-- ================== END BASE JS ================== -->

      <script>
        $(document).ready(function() {
          App.init();
        });
      </script>
    </body>
    </html>

### L) Page Theme Options - top

Select the css theme from the `../assets/css/e-commerce/theme/` folder.

#### Available Theme Options

    <!-- DEFAULT - GREEN -->
    <link href="../assets/css/e-commerce/theme/default.css" rel="stylesheet" />
    <!-- BLUE -->
    <link href="../assets/css/e-commerce/theme/blue.css" rel="stylesheet" />
    <!-- PURPLE -->
    <link href="../assets/css/e-commerce/theme/purple.css" rel="stylesheet" />
    <!-- RED -->
    <link href="../assets/css/e-commerce/theme/red.css" rel="stylesheet" />
    <!-- ORANGE -->
    <link href="../assets/css/e-commerce/theme/orange.css" rel="stylesheet" />
    <!-- PINK -->
    <link href="../assets/css/e-commerce/theme/pink.css" rel="stylesheet" />
    <!-- YELLOW -->
    <link href="../assets/css/e-commerce/theme/yellow.css" rel="stylesheet" />
    <!-- LIME -->
    <link href="../assets/css/e-commerce/theme/lime.css" rel="stylesheet" />
    <!-- GREEN -->
    <link href="../assets/css/e-commerce/theme/green.css" rel="stylesheet" />
    <!-- AQUA -->
    <link href="../assets/css/e-commerce/theme/aqua.css" rel="stylesheet" />
    <!-- INDIGO -->
    <link href="../assets/css/e-commerce/theme/indigo.css" rel="stylesheet" />
    <!-- BLACK -->
    <link href="../assets/css/e-commerce/theme/black.css" rel="stylesheet" />

### M) Page Options - top

Here is the general structure for the each case of page options.

#### Page with fixed header

    <div id="header" class="header" data-fixed-top="true">

#### Page with inverse header

    <div id="header" class="header header-inverse">

### N) Plugins & Resources - top

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

Name | CSS Files
--- | ---
jQuery | v3.3.1 Required JS File
    <script src="../assets/plugins/jquery/jquery-3.3.1.min.js"></script>
v3.2.1 Required JS File
    <script src="../assets/plugins/jquery/jquery-3.2.1.min.js"></script>
v1.9.1 Required JS File
    <script src="../assets/plugins/jquery/jquery-1.9.1.min.js"></script>
    <script src="../assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
Official Link: http://jquery.com/
Bootstrap | Required CSS File
    <link rel="stylesheet" href="../assets/plugins/bootstrap/css/bootstrap.min.css" />
Required JS File
    <script src="../assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
Official Link: http://getbootstrap.com/
Font Awesome | Required CSS File
    <link rel="stylesheet" href="../assets/plugins/font-awesome/css/all.min.css" />
Official Link: https://fontawesome.com/
Animate.css | Required CSS File
    <link rel="stylesheet" href="../assets/plugins/animate/animate.min.css" />
Official Link: http://daneden.github.io/animate.css/
jQuery Cookie | Required JS File
    <script src="../assets/plugins/jquery-cookie/jquery.cookie.js"></script>
Official Link: https://github.com/carhartl/jquery-cookie
Pace | Required JS File
    <script src="../assets/plugins/pace/pace.min.js"></script>
Official Link: http://github.hubspot.com/pace/
JS Cookie (Added in V4.0.0) | Required JS File
    <script src="../assets/plugins/js-cookie/js.cookie.js"></script>
Official Link: https://github.com/js-cookie/js-cookie
Line Awesome (Added in V4.0.0) | Required CSS File
    <link rel="stylesheet" href="../assets/plugins/line-awesome/css/line-awesome-font-awesome.min.css" />
Official Link: https://icons8.com/line-awesome
Paroller (Added in V4.2.0) | Required JS File
    <script="../assets/plugins/paroller/jquery.paroller.min.js"></script>
Official Link: https://tgomilar.github.io/paroller.js/

### O) References - top

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

jQuery Plugins

1. jQuery:http://jquery.com/
2. Bootstrap:http://getbootstrap.com/
3. Font Awesome:http://fortawesome.github.io/Font-Awesome/
4. Animate.css:http://daneden.github.io/animate.css/
5. Pace:http://github.hubspot.com/pace/
6. jQuery Cookie:https://github.com/carhartl/jquery-cookie
7. JS Cookie:https://github.com/js-cookie/js-cookie
8. Line Awesome:https://icons8.com/line-awesome
9. Paroller:https://tgomilar.github.io/paroller.js/

### P) Change Log - top

##### Version 4.3.0 - 31 January 2019

- UPDATE: Bootstrap 4.2.1
- UPDATE: FontAwesome 5.7.0

##### Version 4.2.0 - 16 September 2018

- NEW: 7 Color Scheme (Pink / Yellow / Lime / Green / Aqua / Indigo / Black)
- NEW: Paroller Plugins Compatibility
- UPDATE: Bootstrap 4.1.3
- UPDATE: jQuery 3.3.1
- UPDATE: FontAwesome 5.3.1
- ENHANCE: Remove mixed space / tabs

##### Version 4.0.0 - 01 March 2018

- NEW: Line Awesome
  - Added Directory: `/assets/plugins/line-awesome/`
- NEW: JS Cookie
  - Added Directory: `/assets/plugins/js-cookie/`
  - Modified File: `/assets/js/e-commerce/apps.js`
  - Modified File: `/assets/js/e-commerce/apps.min.js`
- NEW: Wide Screen Support
  - Modified File: `/assets/css/e-commerce/style.css`
  - Modified File: `/assets/css/e-commerce/style.min.css`
- ENHANCE: Theme Panel CSS File Setting
  - Modified File: `/assets/js/e-commerce/apps.js`
  - Modified File: `/assets/js/e-commerce/apps.min.js`
- UPDATE: jQuery 1.9.1 to jQuery 3.2.1
  - Updated Directory: `/assets/plugins/jQuery/`
  - Modified File: `/assets/js/e-commerce/apps.js`
  - Modified File: `/assets/js/e-commerce/apps.min.js`

##### Version 2.0.0 - 30 April 2016

- Initial Released