SoqLina
Ecommerce HTML Template
SoqLina is an ecommerce HTML template with modern and clean features. In addition real flexibility and customization. The template ships in 3 versions: v1 Classic, v2 Updated and v3 Enterprise — each in Arabic (RTL) and English (LTR). We hope you like it! :)
Welcome! First of all we want to thank you for purchasing our Premium Ecommerce HTML Page Template
We really do appreciate every sale. If you like our work please do not forget to rate it. It helps us in developing new and better items.
In the following sections we will explain how to set up and use it the easiest way possible. If you have any questions that you feel should have been in this document you can contact us through our profile page on https://themeforest.net/user/it_geeks/ and we'll get back to you as soon as possible. Thanks so much!!!
For questions on basic HTML, JavaScript or CSS editing - please give your question a quick Google or visit W3Schools as template issues get top priority. You will need some knowledge of HTML/CSS to edit this tempate.
Use Firebug or Chrome Developer Tools.
Do not start from scratch, use an existing page from the demo and modify it to learn how it works.
Quickly find what you are looking for in this document by using your browser's "Find in Page" feature, typically Control + F.
Don't forget to re-explore the live demo for layouts, usage ideas and sample code.
- 3 Template Versions Included (v1 Classic, v2 Updated, v3 Enterprise)
- Based on Twitter Bootstrap 3.3.5 (v1 & v2) / Bootstrap 5.3.3 (v3 Enterprise)
- Built With Sass (v1 & v2)
- 100% W3C Valid Files
- Fully Responsive Layout (PC, Tablet and Mobile phone)
- Cross Browser Compatible (Chrome, Opera, Safari, Mozzila, IE9+)
- Taking Care of Content Possibilities
- RTL Support (full Arabic + English builds in every version)
- 196 Pages Included — v1: 29 pages × 2 languages, v2: 30 pages × 2 languages, v3: 39 pages × 2 languages
- Very Easy to Customize
- Very Detailed Documentation
- Font Awesome Icons
- Over 800 Google Web Fonts You Can Use
The template package contains 3 versions, each in its own top-level folder:
v1/ - Classic version (original build) - ar/ + en/ folders, 29 pages per language, 4 color themes, jQuery
v2/ - Updated version - ar/ + en/ folders, 30 pages per language, improved components + homepage variant #5
v3/ - Enterprise version - ar/ (Arabic RTL) + en/ (English LTR) + assets/ folders, 39 pages per language (78 total). See the v3 Enterprise section for full details.
Inside v1 and v2, each language (HTML) folder is structured as following:
css - contains all css files that are compiled from sass files
scss - contains all scss files
js - contains all js files
images - separated into 2 folders. 1st "general-elements" contains general elements like pattern, logo and related design elements. 2nd "files" contains the images used in preview.
.html files - 29 pages per language in v1 and 30 pages per language in v2, for main page and RTL supported pages.
In HTML Structure, we will talk about every structure of all content used as possible. These content are as following:
HTML Markup
Travel Tour template is based on Bootstrap v3.3.5 - a collection of CSS and JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.
Bootstrap's base grid is a variation of the grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. You can really easily customize all part of site or build new.
The default Bootstrap3 grid system is composed by 12 columns, named like "col-*-1", "col-*-2", "col-*-3"...."col-*-12". Grid systems are used for creating page layouts through a series of rows and columns that house your content.
Each .html file contains the HTML structure of the template. Here is the general structure (shortened):
<div class="container">
<div class="row">
<div class="col-md-12">1 Column - Content goes here</div>
</div>
<div class="row">
<div class="col-md-6">1/2 Column - Content goes here</div>
<div class="col-md-6">1/2 Column - Content goes here</div>
</div>
<div class="row">
<div class="col-md-4">1/3 Column - Content goes here</div>
<div class="col-md-4">1/3 Column - Content goes here</div>
<div class="col-md-4">1/3 Column - Content goes here</div>
</div>
<div class="row">
<div class="col-md-3">1/4 Column - Content goes here</div>
<div class="col-md-3">1/4 Column - Content goes here</div>
<div class="col-md-3">1/4 Column - Content goes here</div>
<div class="col-md-3">1/4 Column - Content goes here</div>
</div>
</div>
General Structure
All HTML files has the same structure. I made this similarity to save time and efforts.
<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- Meta
============================================= -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1, max-scale=1">
<meta name="author" content="IT Geeks">
<!-- description -->
<meta name="description" content="">
<!-- keywords -->
<meta name="keywords" content="">
<!-- Stylesheets
============================================= -->
<link href="css/css-assets.css" rel="stylesheet">
<link href="css/bootstrap-rtl.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Favicon
============================================= -->
<link rel="shortcut icon" href="images/general-elements/favicon/favicon.png">
<link rel="apple-touch-icon" href="images/general-elements/favicon/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/general-elements/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/general-elements/favicon/apple-touch-icon-114x114.png">
<!-- Title
============================================= -->
<title>E-Commerce ITGeeks</title>
</head>
<body>
<!-- Document Full Container
============================================= -->
<div id="full-container">
<!-- Header
============================================= -->
<header id="header">
<div id="header-bar-1" class="header-bar">
.
.
</div><!-- #header-bar-1 end -->
<div id="header-bar-2" class="header-bar">
.
.
</div><!-- #header-bar-2 end -->
<div id="header-bar-3" class="header-bar sticky">
.
.
</div><!-- #header-bar-3 end -->
</header><!-- #header end -->
<!-- Content
============================================= -->
<section id="content">
<div id="content-wrap">
<!-- === Content Main =========== -->
<div id="content-main" class="section-flat">
<div class="section-content">
.
.
</div><!-- .section-content end -->
</div><!-- .section-flat end -->
</div><!-- #content-wrap -->
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer">
<div id="footer-bar-1" class="footer-bar text-white">
.
.
</div><!-- #footer-bar-1 end -->
<div id="footer-bar-2" class="footer-bar text-white hidden-xs">
.
.
</div><!-- #footer-bar-2 end -->
<div id="footer-bar-3" class="footer-bar text-white">
.
.
</div><!-- #footer-bar-3 end -->
</footer><!-- #footer end -->
<div class="side-full-categories">
<div class="mobile-full-categories">
<h5>All Categories</h5>
<ul class="mobile-menu-categories">
</ul><!-- .mobile-menu-categories end -->
</div><!-- .mobile-full-categories end -->
</div><!-- .side-full-categories end -->
</div><!-- #full-container end -->
<a class="scroll-top-icon scroll-top" href="javascript:;"><i class="fa fa-angle-up"></i></a>
<!-- External JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
.
.
<script src='js/functions.js'></script>
</body>
</html>
Now i will talk about each main section as following:
<head>
<head> contains common meta tags, title, favicon and the attachment of CSS stylesheet.
<head>
<!-- Meta
============================================= -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1, max-scale=1">
<meta name="author" content="IT Geeks">
<!-- description -->
<meta name="description" content="">
<!-- keywords -->
<meta name="keywords" content="">
<!-- Stylesheets
============================================= -->
<link href="css/css-assets.css" rel="stylesheet">
<link href="css/bootstrap-rtl.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Favicon
============================================= -->
<link rel="shortcut icon" href="images/general-elements/favicon/favicon.png">
<link rel="apple-touch-icon" href="images/general-elements/favicon/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/general-elements/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/general-elements/favicon/apple-touch-icon-114x114.png">
<!-- Title
============================================= -->
<title>E-Commerce ITGeeks</title>
</head>
In the case of using LTR (english), we need to disable including bootstrap-rtl.css & style.css an include style-en.css as following:
<head>
.
.
<!-- Stylesheets
============================================= -->
<link href="css/css-assets.css" rel="stylesheet">
<link href="css/style-en.css" rel="stylesheet">
.
.
</head>
Body
<body> contains the appearing content like header, main content and footer. JS attachment is at the end of body tag
<body>
<!-- Document Full Container
============================================= -->
<div id="full-container">
<!-- Header
============================================= -->
<header id="header">
<div id="header-bar-1" class="header-bar">
.
.
</div><!-- #header-bar-1 end -->
<div id="header-bar-2" class="header-bar">
.
.
</div><!-- #header-bar-2 end -->
<div id="header-bar-3" class="header-bar sticky">
.
.
</div><!-- #header-bar-3 end -->
</header><!-- #header end -->
<!-- Content
============================================= -->
<section id="content">
<div id="content-wrap">
<!-- === Content Main =========== -->
<div id="content-main" class="section-flat">
<div class="section-content">
.
.
</div><!-- .section-content end -->
</div><!-- .section-flat end -->
</div><!-- #content-wrap -->
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer">
<div id="footer-bar-1" class="footer-bar text-white">
.
.
</div><!-- #footer-bar-1 end -->
<div id="footer-bar-2" class="footer-bar text-white hidden-xs">
.
.
</div><!-- #footer-bar-2 end -->
<div id="footer-bar-3" class="footer-bar text-white">
.
.
</div><!-- #footer-bar-3 end -->
</footer><!-- #footer end -->
<div class="side-full-categories">
<div class="mobile-full-categories">
<h5>All Categories</h5>
<ul class="mobile-menu-categories">
</ul><!-- .mobile-menu-categories end -->
</div><!-- .mobile-full-categories end -->
</div><!-- .side-full-categories end -->
</div><!-- #full-container end -->
<a class="scroll-top-icon scroll-top" href="javascript:;"><i class="fa fa-angle-up"></i></a>
<!-- External JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
.
.
<script src='js/functions.js'></script>
</body>
The Content container contains all the main contents of the template.
In addition, also all other single pages has the same layout except there is some additions in single pages like products page, single product page, checkout pages and others.
The content part has the following structure:
<!-- Content
============================================= -->
<section id="content">
<div id="content-wrap">
<!-- === Content Main =========== -->
<div id="content-main" class="section-flat">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
.
.
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .section-flat end -->
</div><!-- #content-wrap -->
</section><!-- #content end -->
Slider Featured 1
For the index homepage, there is main slider with class .slider-featured-1 as following:
<div class="slider-featured-1">
<ul class="owl-carousel slider-img-bg">
<li>
<div class="slide">
<img src="images/files/sliders/slider-featured-1/img-11.jpg" alt="">
<!-- <div class="overlay-colored color-bg-dark opacity-70"></div> -->
<div class="slide-content text-white">
<h1>
Computer Accessories
</h1>
<h4>
One place for all computer requirements
</h5>
<a class="btn x-large rounded colorful hover-colorful-darken mt-20" href="javascript:;">Shop Now</a>
</div><!-- .slide-content end -->
</div><!-- .slide end -->
</li>
.
.
<li>
</li>
</ul>
</div><!-- .slider-featured-1 end -->
Add to <div class="slide-content"> class text-white to use texts with white colors.
Also add class text-center or text-left to make slide content center or left align respectively.
Box Banner
Each advertisement image is wrapped with <div class="box-banner"> element as following:
<div class="box-banner">
<a href="javascript:;"><img src="images/files/box-banner/img-1.png" alt=""></a>
</div><!-- .box-banner end -->
Box Info 1
There is box info used with the following code:
<div class="box-info box-info-1">
<div class="box-icon icon"><img src="images/files/box-info-1/icon-1.png" alt=""></div>
<div class="box-content">
<h5>Fast Delivery</h5>
<p>Free delivery for all products</p>
</div><!-- .box-content end -->
</div><!-- .box-info end -->
Slider Products 1
There is slider products 1 with class .slider-products-1 as following:
<div class="slider-products-1">
<ul class="owl-carousel">
<li>
<div class="slide">
<div class="box-preview box-product">
<span class="badge-new">New</span>
<span class="badge-sale">Sale</span>
<div class="box-img">
<a href="javascript:;"><img src="images/files/sliders/box-product/img-1.jpg" alt=""></a>
<div class="overlay">
<div class="overlay-inner">
<ul class="product-icons-meta">
<li><a href="javascript:;"><i class="fa fa-exchange-alt"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-heart"></i></a></li>
</ul><!-- .product-icons-meta end -->
</div><!-- .overlay-inner end -->
</div><!-- .overlay end -->
</div><!-- .box-img end -->
<div class="box-content">
<h5><a href="javascript:;">Digital Watch</a></h5>
<h4 class="product-price">
<span class="new">499 KWD</span>
<span class="old">999 KWD</span>
</h4><!-- .product-price end -->
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div><!-- .rating end -->
<a class="btn btn-add-to-cart medium rounded with-icon colorful hover-dark mt-30" href="javascript:;">
<i class="fa fa-shopping-cart"></i>
Add to Cart
</a>
</div><!-- .box-content end -->
</div><!-- .box-preview end -->
</div><!-- .slide end -->
</li>
.
.
<li>
.
.
</li>
</ul>
</div><!-- .slider-products-1 end -->
List Links Categories
There is a collection of list links categories with the following code:
<ul class="list-links-categories">
<li><h5><a href="javascript:;"><img src="images/files/list-links-categories/icon-1.png" alt="">Computer Devices</a></h5></li>
.
.
<li></li>
</ul><!-- .list-links-categories end -->
Slider Products 2
There is slider products 2 with class .slider-products-2 as following:
<ul class="list-products-2">
<li>
<div class="box-product-2">
<div class="box-img"><img src="images/files/sliders/box-product-2/img-1.jpg" alt="">
</div>
<div class="box-content">
<h5><a href="javascript:;">Digital Watch</a></h5>
<h4 class="product-price">
<span class="new">499 KWD</span>
<span class="old">999 KWD</span>
</h4><!-- .product-price end -->
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div><!-- .rating end -->
<ul class="product-2-icons-meta">
<li><a href="javascript:;"><i class="fa fa-shopping-cart"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-heart"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-exchange-alt"></i></a></li>
</ul><!-- .product-2-icons-meta end -->
</div><!-- .box-content end -->
</div><!-- .box-product-2 end -->
</li>
.
.
<li></li>
</ul><!-- .list-products-2 end -->
For other contents in Content section, its existed in single pages where we will talk about them in the Single Pages section.
There are 2 layout types of single pages which are as following:
- Page With Sidebar
- Page Fullwidth
Here are the 2 layouts codes as following:
Page With Sidebar
The main container of each single page have this basic HTML element <div id="content-main" class="section-flat">.
For single pages, there is a main class added to this element which is page-single to be as following:
<div id="content-main" class="section-flat page-single">
For using single pages with sidebar, we will need to add class with-sidebar to the element to be as following:
<div id="content-main" class="section-flat page-single with-sidebar">
And for each type of single page like products page, checkout page or user dashboard page, there is a specific class added to the same HTML element.
For example, in the case of products page, there is class added which is page-products as following:
<div id="content-main" class="section-flat page-single page-products with-sidebar">
Inside this main container, there is another container with class page-single-content. Then inside this container, the content is separated into 2 containers which are with class .content and .sidebar respectively as following:
<!-- === Content Main =========== -->
<div id="content-main" class="section-flat page-single page-products with-sidebar">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-single-content">
<div class="row">
<div class="col-md-9 col-md-push-3">
<div class="content">
.
.
</div><!-- .content end -->
</div><!-- .col-md-9 end -->
<div class="col-md-3 col-md-pull-9">
<div class="sidebar">
.
.
</div><!-- .sidebar end -->
</div><!-- .col-md-3 end -->
</div><!-- .row end -->
</div><!-- .page-single-content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .section-flat end -->
Inside <div class="sidebar"> there is boxes of widgets with <div class="box-widget">.
It has the following code:
<div class="sidebar">
<div class="box-widget">
<h5 class="box-title">Brands</h5>
<div class="box-content">
.
.
</div><!-- .box-content end -->
</div><!-- .box-widget end -->
<div class="box-widget">
.
.
</div><!-- .box-widget end -->
</div><!-- .sidebar end -->
There are many single pages included with the template.
They are as following:
- Products Page
- Products Fullwidth Page
- Products Search Page
- Product Single Page
- Newsletter Popup Page
- Login Page
- Register Page
- Shop Cart Page
- Products Comparison Page
- Wishlist Page
- Categories Page
- Checkout Pages
- User Dashboard Pages
These pages will be as following:
Products Page
There is class .page-products added to the main container <div id="content-main" class="section-flat">.
It will has the following code:
<!-- === Content Main =========== -->
<div id="content-main" class="section-flat page-single page-products with-sidebar">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-single-content">
<div class="row">
<div class="col-md-9 col-md-push-3">
<div class="content">
.
.
</div><!-- .content end -->
</div><!-- .col-md-9 end -->
<div class="col-md-3 col-md-pull-9">
<div class="sidebar">
.
.
</div><!-- .sidebar end -->
</div><!-- .col-md-3 end -->
</div><!-- .row end -->
</div><!-- .page-single-content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .section-flat end -->
There is 2 list options view for the products which are vertical and horizonal box product.
These 2 options are control through view via tabs. The tabs buttons has the following code:
<ul class="layout-style lp-layout-tabs">
<li class="active"><a href="javascript:;"><i class="fa fa-th"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-list"></i></a></li>
</ul><!-- .layout-style end -->
And the tabs contents has the following code structure:
<ul class="lp-layout-tabs-content">
<li class="active">
<ul class="list-products row-items-3">
<li>
<div class="box-preview box-product box-product-3">
<span class="badge-new">New</span>
<div class="box-img">
<a href="javascript:;"><img src="images/files/sliders/box-product/img-4.jpg" alt=""></a>
<div class="overlay">
<div class="overlay-inner">
<ul class="product-icons-meta">
<li><a href="javascript:;"><i class="fa fa-exchange-alt"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-heart"></i></a></li>
</ul><!-- .product-icons-meta end -->
</div><!-- .overlay-inner end -->
</div><!-- .overlay end -->
</div><!-- .box-img end -->
<div class="box-content">
<h5><a href="javascript:;">Waterproof 4k Camera</a></h5>
<h4 class="product-price">
<span class="new">499 KWD</span>
<span class="old">999 KWD</span>
</h4><!-- .product-price end -->
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div><!-- .rating end -->
<a class="btn btn-add-to-cart medium rounded with-icon colorful hover-dark mt-30" href="javascript:;">
<i class="fa fa-shopping-cart"></i>
Add to Cart
</a>
</div><!-- .box-content end -->
</div><!-- .box-preview end -->
</li>
.
.
<li></li>
</ul><!-- .list-products end -->
</li>
<li>
.
.
</li>
</ul><!-- .lp-layout-tabs-content end -->
Products Fullwidth Page
It has the same layout as Products Page but with class .with-sidebar.
It has the following code:
<!-- === Content Main =========== -->
<div id="content-main" class="section-flat page-single page-products">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-single-content">
<div class="row">
<div class="col-md-12">
<div class="content">
.
.
</div><!-- .content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .page-single-content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .section-flat end -->
Products Search Page
It has the same code as Products Page.
Product Single Page
There is class .page-product-single added to the main container <div id="content-main" class="section-flat">.
It will has the following code:
<!-- === Content Main =========== -->
<div id="content-main" class="section-flat page-single page-product-single">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-single-content">
<div class="row">
<div class="col-md-12">
<div class="content">
.
.
</div><!-- .content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .page-single-content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .section-flat end -->
Newsletter Popup Page
The newsletter content is added at the bottom of the <body> tag as following:
<div class="popup-preview popup-preview-newsletter">
<div class="popup-bg"></div>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="popup-content">
<div class="popup-newsletter-register">
<div class="popup-close hamburger hamburger--slider is-active">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div><!-- .popup-close -->
<form id="form-newsletter-register" class="form-inline">
<h4><span class="color-theme">Discounts Today</span><br>Subscribe to The Newsletter</h4>
<div class="form-content">
<div class="form-group">
<input type="text" name="newsletterEmail" class="form-control" placeholder="Email Address">
</div><!-- .form-group end -->
<div class="form-group">
<button type="submit" class="form-control">Subscribe</button>
</div><!-- .form-group end -->
<div class="form-group">
<label class="label-container checkbox-default small">Don't show this again
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div><!-- .form-group end -->
</div><!-- .form-content end -->
</form><!-- #form-newsletter-register end -->
</div><!-- .popup-newsletter-register end -->
</div><!-- .popup-content end -->
</div><!-- .col-md-10 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .popup-preview -->
.
.
</body>
</html>
We can control when the newsletter popup appears through js in functions.js.
The default value is 2000ms. You can control the delay from the variable popupNewsletterDelay as following:
// *** Popup Preview Newsletter *** //
function popupNewsletter() {
.
.
var popupNewsletterDelay = 2000;
.
.
}
Login Page
There is class .page-login added to the main container <div id="content-main" class="section-flat">.
It will has the following code:
<!-- === Content Main =========== -->
<div id="content-main" class="section-flat page-single page-login">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-single-content">
<div class="row">
<div class="col-md-12">
<div class="content">
.
.
</div><!-- .content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .page-single-content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .section-flat end -->
Register Page
It has the same code as Login Page.
Shop Cart Page
There is class .page-shop-cart added to the main container <div id="content-main" class="section-flat">.
It will has the following code:
<!-- === Content Main =========== -->
<div id="content-main" class="section-flat page-single page-shop-cart">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-single-content">
<div class="row">
<div class="col-md-12">
<div class="content">
.
.
</div><!-- .content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .page-single-content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .section-flat end -->
Products Comparison Page
There is class .page-product-comparison added to the main container <div id="content-main" class="section-flat">.
It will has the following code:
<!-- === Content Main =========== -->
<div id="content-main" class="section-flat page-single page-product-comparison">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-single-content">
<div class="row">
<div class="col-md-12">
<div class="content">
.
.
</div><!-- .content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .page-single-content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .section-flat end -->
Wishlist Page
There is class .page-shop-cart added to the main container <div id="content-main" class="section-flat">.
It will has the following code:
<!-- === Content Main =========== -->
<div id="content-main" class="section-flat page-single page-shop-cart">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-single-content">
<div class="row">
<div class="col-md-12">
<div class="content">
.
.
</div><!-- .content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .page-single-content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .section-flat end -->
Categories Page
There is class .page-categories added to the main container <div id="content-main" class="section-flat">.
It will has the following code:
<!-- === Content Main =========== -->
<div id="content-main" class="section-flat page-single page-categories">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-single-content">
<div class="row">
<div class="col-md-12">
<div class="content">
.
.
</div><!-- .content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .page-single-content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .section-flat end -->
Checkout Pages
There is class .page-checkout added to the main container <div id="content-main" class="section-flat">.
It will has the following code:
<!-- === Content Main =========== -->
<div id="content-main" class="section-flat page-single page-checkout">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-single-content">
<div class="row">
<div class="col-md-12">
<div class="content">
.
.
</div><!-- .content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .page-single-content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .section-flat end -->
User Dashboard Pages
There is class .page-dashboard added to the main container <div id="content-main" class="section-flat">.
It will has the following code:
<!-- === Content Main =========== -->
<div id="content-main" class="section-flat page-single page-dashboard">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-single-content">
<div class="row">
<div class="col-md-12">
<div class="content">
.
.
</div><!-- .content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .page-single-content end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .section-flat end -->
This section is related to of how to apply header and footer colors and layouts. In addition the whole theme color of the template.
Now, i will talk about the Theme Color following:
Theme Color
There are 4 color themes; the default color and 3 additional color so far.
Theme color are controlled through CSS Variables which give a very high flexibility and quick customizations.
Just change the values of colors in theme-2.scss sass file in scss/themes-colors folder.
In addition, you can duplicate this file and make your preferred colors as a single theme, and then attach it in the <head> element.
Also you have to add class theme-2 to <body> element as following:
<body class="theme-2">
Here how it's attached in <head> elements:
<head>
.
.
<!-- Stylesheets
============================================= -->
<link href="css/css-assets.css" rel="stylesheet">
<link href="css/bootstrap-rtl.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/themes-colors/theme-2.css" rel="stylesheet">
.
.
</head>
And here is the theme-2.scss file code as following:
/**
* Theme 2 Colors
*/
.theme-2 {
--theme-color-1: #f5842d;
--theme-color-1-1: #ee6e0b;
--theme-color-1-2: #fffaf6;
--theme-color-1-3: #da650a;
}
Now, i will talk about header and footer according to colors and layouts:
Header Layouts
So far, there are 3 header layouts as following:
-
Header Layout 2
-
Header Layout 2 (Style 2)
-
Header Layout 3
For header layout 2, just add class header-layout-2 to <body> tag as following:
<body class="header-layout-2">
For header layout 2, just add classes header-layout-2 & style-2 to <body> tag as following:
<body class="header-layout-2 style-2">
For header layout 2, just add class header-layout-3 to <body> tag as following:
<body class="header-layout-3">
Header Colors
So far, there one additional header color. Just add class header-dark to <body> tag as following:
<body class="header-dark">
Footer Colors
So far, there one additional footer color. Just add class footer-dark to <body> tag as following:
<body class="footer-dark">
All CSS files css files are stored at "css" folder.
It's all built with Sass. Sass files are existed in scss folder in root directory.
There are 2 .scss files which compiled to 2 .css files that attached in each html file.
There are 4 scss files that imported inside style.scss
These files are as following:
- commons.scss
- header.scss
- content.scss
- footer.scss
css-assets.scss has all general css assets include.
_variables.scss files has all css variables of values used in the template
style.scss file is as following:
/*=================================================================================
Theme Name: IT Geeks E-Commerce
Theme URI: http://itgeeks.info/
Description: E-Commerce HTML Template
Author: Morad
Author URI: http://moradhamdy.com/
Version: 1.0
SCSS Stylesheet
===================================================================================*/
// Imports ( Others at Bottom )
// ==================================
@import "commons";
// ==================================
/**
* styles.css file is divided as the following:
*
* ( 01 ) - General Settings
* ( 02 ) - General Contents
* ( 03 ) - Header
* ( 04 ) - Content
* ( 05 ) - Footer
*
*/
@import "header";
@import "content";
@import "footer";
// Imports ( Rest imports )
// ==================================
// ==================================
The css-assets.scss which has all general css assets include, is as following:
/*=====================================================================
CSS ASSETS
----------
Here are all imports of css libraries and helpers like
Bootstrap, fontAwesome, Owl Carousel, .. etc.
*=================================================================== */
// CSS Assets Imports
// ==================================
@import "_variables";
@import "bootstrap";
@import "owl.carousel";
@import "owl.theme.default";
@import "../fonts/fontawesome/css/all.css";
@import "https://use.fontawesome.com/releases/v5.3.1/css/v4-shims.css";
@import "magnific-popup";
@import "hamburgers/hamburgers";
@import "price-range.css";
@import "select2.min";
// ==================================
In case of the page is supporting RTL, the including of css files in <head> will be as following:
<head>
.
.
<!-- Stylesheets
============================================= -->
<link href="css/css-assets.css" rel="stylesheet">
<link href="css/bootstrap-rtl.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
.
.
</head>
In case of the page is supporting LTR (english), the including of css files in <head> will be as following:
<head>
.
.
<!-- Stylesheets
============================================= -->
<link href="css/css-assets.css" rel="stylesheet">
<link href="css/style-en.css" rel="stylesheet">
.
.
</head>
This template uses several scripts many of which are documented within the template's code. If you're a developer, you will find this particularly useful.
There are jquery plugins used such as Owl-Carousel, Select2, ... etc.
These files are existed in js folder. Javascript files are attached at the bottom of each HTML. It looks like this:
<!-- External JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/jRespond.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/superfish.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/price-range.js"></script>
<script src="js/select2.min.js"></script>
<script src='js/functions.js'></script>
In the functions.js, there the codes of using plugins and custom scripts.
All codes almost well commented for understanding and customization.
v3 Enterprise is a complete enterprise redesign of the template. It lives in the v3/ folder and is fully independent from v1 and v2 — it has its own assets, design system and JavaScript.
It ships with v3/ar/ (Arabic RTL) and v3/en/ (English LTR), with 39 pages each (78 pages total).
Technology Stack
- Bootstrap 5.3.3 (RTL + LTR builds)
- jQuery 3.7.1
- Swiper 11 (sliders / carousels)
- AOS 2.3.4 (scroll animations)
- SweetAlert2 11 (alerts / dialogs)
- Font Awesome 6.6.0 (icons)
Folder Structure
v3/
index.html - version landing page
ar/ - Arabic RTL pages (39 pages)
en/ - English LTR pages (39 pages)
assets/
css/
main.css - core styles (~2,300 lines)
rtl.css - RTL overrides (loaded by ar/ pages)
enterprise.css - enterprise "eq-*" component system (2,879 lines)
js/
main.js - all interactive behavior
images/ - shared images
Pages (39 per language)
Each of v3/ar/ and v3/en/ contains the following pages:
- Homepages: index.html, index-homepage-2.html, index-homepage-3.html, index-homepage-4.html, index-homepage-5.html
- Shop: products.html, products-fullwidth.html, products-search.html, products-comparison.html, product-single.html, categories.html
- Cart & Checkout: shop-cart.html, checkout-page-2.html … checkout-page-7.html (6 checkout layouts)
- User: wishlist.html, login.html, register.html, dashboard-page-1.html … dashboard-page-8.html (8 dashboard pages)
- Content: about.html, contact.html, faq.html, blog.html, blog-single.html, terms.html, privacy.html
- Utility: newsletter-popup.html, track-order.html, 404.html
Design System — "Warm Geometric Luxury"
v3 follows a single design language called Warm Geometric Luxury.
Colors
Primary (Gold) : #D4A017
Navy : #1F2937
Accent (Orange) : #F97316
Background : #F8F7F4
Fonts
- Cairo — Arabic pages
- Plus Jakarta Sans — English pages
- DM Serif Display — display headings
enterprise.css Component System (eq-*)
All enterprise components are prefixed with eq- and live in v3/assets/css/enterprise.css. The file covers the following component groups:
- Announcement bar (eq-announce-bar, dismissible, marquee text)
- Header v2 (sticky header with account dropdown)
- Mega search (eq-search-input with suggestions dropdown)
- Hero v2 (conversion-focused hero with eq-btn-hero-primary / eq-btn-hero-secondary)
- Countdown (eq-countdown, eq-countdown-box / -num / -label)
- Trust bar (trust badges row)
- Category cards (image-overlay cards, eq-cat-badge variants: -hot / -new / -sale)
- Flash sale (eq-btn-flash-cart, stock bars)
- Product card v2 (full-width add-to-cart eq-btn-cart, eq-prod-wishlist)
- Tabs
- Brands rail (eq-brands-rail, auto-scrolling eq-brands-track with RTL variant)
- Testimonials
- Newsletter
- App promo (eq-app-promo with store badges)
- Footer v2
- Mobile bottom nav (sticky bottom navigation on mobile)
- Live notifications (purchase notification toasts)
- RTL overrides (built into the same file)
Sort bars and filter sidebars also use eq-* classes (eq-sort-bar, eq-sort-select, eq-view-toggle, eq-filter-sidebar, eq-filter-section).
JavaScript (v3/assets/js/main.js)
All v3 behavior is in a single file, v3/assets/js/main.js. Core features:
- Cart drawer (open via any element with data-open-cart)
- Swiper sliders (.sl-products-swiper, .sl-cats-swiper)
- Countdown timers (any .sl-countdown[data-end] element)
Enterprise enhancements:
- Sticky header on scroll
- Search suggestions dropdown (on .eq-search-input)
- Wishlist toggle (.eq-prod-wishlist / .sl-wishlist-btn)
- Add-to-cart feedback (.eq-btn-cart / .sl-btn-cart with cart badge update)
- Quick view modal (elements with data-quick-view)
- Announcement bar dismiss
- Dark mode toggle (#eq-dark-toggle)
- Back-to-top button
- Mobile bottom nav active state
- Stock bar animation
- Live purchase notification toasts
Live Product Filters & Sorting
The products pages (products.html, products-fullwidth.html) include LIVE client-side filtering by category, brand, rating and price, plus live sorting — no page reload.
Each product grid item carries data attributes that drive the filters:
<div class="col-6 col-md-4 col-lg-3"
data-cat="electronics"
data-price="249"
data-rating="4.5"
data-brand="samsung">
<!-- product card v2 markup -->
</div>
The sidebar inputs hook into the live filter automatically through their classes:
- .sl-filter-cat — category checkboxes (value = category slug)
- .sl-filter-brand — brand checkboxes (value = brand slug)
- .sl-filter-rating — rating radio buttons
- Price range inputs — debounced, filter against data-price
Live sorting uses the #sort-select dropdown:
<select class="eq-sort-select" id="sort-select">
<option value="relevance">Best Match</option>
<option value="price-asc">Price: Low to High</option>
<option value="price-desc">Price: High to Low</option>
<option value="newest">Newest First</option>
<option value="rating">Highest Rated</option>
</select>
Extra behavior included out of the box:
- Dynamic active-filter tags — every applied filter appears as a removable tag in #active-filters, with a "Clear All" button
- Staggered animations — visible cards animate back in with a staggered delay after each filter/sort change
To add a new filterable product, just give its grid column the proper data-cat, data-brand, data-rating and data-price values — no JavaScript changes needed.
RTL Notes (Arabic)
- Arabic pages in v3/ar/ use the Bootstrap 5.3.3 RTL build and dir="rtl"
- v3/assets/css/rtl.css contains the RTL overrides for the core styles
- enterprise.css contains its own RTL overrides for the eq-* components (including an RTL brands-rail scroll direction)
- Arabic pages use the Cairo font; English pages use Plus Jakarta Sans
Fonts
CSS
Scripts
PSD
No PSD files included!
Support includes bugs fixing, and general problem solving with features explained on the template’s official sales page.
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Regards,
ITGeeks
Here are the updates series information.
Version 1.0
(20 / 06 / 2019)
First release.
Version 1.1
(26 / 06 / 2019)
=================================
V1.1 - 26 June 2019
---------------------------------
- NEW: Homepage 2
- NEW: Theme color 2
- NEW: Header Dark
- NEW: Header Layout 2
- NEW: Footer Dark
=================================
Version 1.2
(01 / 07 / 2019)
=================================
V1.1 - 01 July 2019
---------------------------------
- NEW: Header Layout 3
=================================
Version 1.3
(03 / 07 / 2019)
=================================
V1.1 - 03 July 2019
---------------------------------
- NEW: Header Layout 2 (Style 2)
=================================
Version 2.0
(v2 Updated)
=================================
V2.0 - v2 Updated
---------------------------------
- NEW: v2 folder with improved components
- NEW: Homepage variant #5
- NEW: 30 pages per language (ar/ + en/)
=================================
Version 3.0
(v3 Enterprise)
=================================
V3.0 - v3 Enterprise
---------------------------------
- NEW: Complete enterprise redesign in v3/ (39 pages × 2 languages)
- NEW: Bootstrap 5.3.3 (RTL + LTR builds), Swiper 11, AOS, SweetAlert2
- NEW: "Warm Geometric Luxury" design system + enterprise.css eq-* components
- NEW: LIVE product filters (category / brand / rating / price) + live sorting
- NEW: Quick view, dark mode toggle, live purchase notifications, mobile bottom nav
See the v3 Enterprise section for full documentation.
=================================