# Electro

## Responsive eCommerce Theme

- Created: 23-April-2016
- Latest update: 25-May-2016
- By: Ibrahim Ibn Dawood
- Email: support@transvelo.freshdesk.com
- Demo: http://transvelo.github.io/electro-html/home

Hello and thank you for purchasing this website template! Electro is the perfect high-quality solution for those who want a beautiful eCommerce website in no time. It‘s fully responsive and will adapt itself to any mobile device. iPad, iPhone, Android, it doesn‘t matter. Your content will always looks its absolute best. This documentation guides you through the main features of this template and shows you how to use and customize them. If you have any further questions just drop us a line to support@transvelo.freshdesk.com

### 1.Included Files

#### 1.1 HTML Files (alphabetical order)

- 404.html
- about.html
- blog-fw.html
- blog-v1.html
- blog-v2.html
- blog-v3.html
- blog-single.html
- cart.html
- cat-3-col.html
- cat-4-col.html
- cat-4-fw.html
- checkout.html
- contact-v1.html
- contact-v2.html
- faq.html
- home.html
- home-v2.html
- home-v3.html
- home-v3-full-color.html
- my-account.html
- product-category.html
- product-category-6-column.html
- shop.html
- shop-fw.html
- shop-right-side-bar.html
- single-product.html
- single-product-extended.html
- single-product-sidebar.html
- single-product-sidebar-accessories.html
- single-product-sidebar-reviews.html
- single-product-sidebar-specification.html
- terms-and-conditions.html
- track-your-order.html
- wishlist.html

#### 1.2 PHP Files (Folder wise alphabetical order)

If you are comfortable with PHP We've provided PHP files. These files have been broken into smaller parts keeping in mind the DRY (Do not repeat yourself) principle. Repeatable blocks and individual blocks have been broken down into smaller files and have been included wherever required.

All pages are loaded from index.php file.

##### 1.2.1 Main Pages

- 404.php
- about.php
- blog-fw.php
- blog-v1.php
- blog-v2.php
- blog-v3.php
- blog-single.php
- cart.php
- cat-3-col.php
- cat-4-col.php
- cat-4-fw.php
- checkout.php
- contact-v1.php
- contact-v2.php
- faq.php
- home.php
- home-v2.php
- home-v3.php
- home-v3-full-color.php
- my-account.php
- product-category.php
- product-category-6-column.php
- shop.php
- shop-fw.php
- shop-right-side-bar.php
- single-product.php
- single-product-extended.php
- single-product-sidebar.php
- single-product-sidebar-accessories.php
- single-product-sidebar-reviews.php
- single-product-sidebar-specification.php
- terms-and-conditions.php
- track-your-order.php
- wishlist.php

##### 1.2.2 Inc

###### 1.2.2.1 Blocks

- blog-navigation.php
- blog-post.php
- blog-single-post.php
- faq-content.php
- product-cards-carousel.php
- product-categories-col-3.php
- product-categories-col-4.php
- product-category-carousel.php

1.2.2.1.1 Homepage

- 2-1-2-product-grid.php
- best-sellers-products-cards-carousel.php
- best-seller-home-v2.php
- deals-and-tabs.php
- deals-of-the-week-carousel.php
- home-banner-v2.php
- home-banner.php
- home-v1-ads-block.php
- home-v1-slider.php
- home-v2-slider.php
- home-v2-ads-block.php
- home-v2-categories-products-carousel.php
- product-carousel-tab.php
- recently-added-products-carousel.php

1.2.2.1.2 Homepage-3

- features-list.php
- home-list-categories.php
- home-v3-ads-block.php
- home-v3-slider.php
- products-6-1.php
- products-carousel-tabs.php
- products-carousel-with-image.php
- section-product-cards-carousel.php

1.2.2.1.3 Single Product

1.2.2.1.3.1 single-product-sidebar

- product-categories-widget.php
- text-widget.php
- woocommerce-product-widget.php

1.2.2.1.3.2 woocommerce-tabs

- accessories-tab.php
- description-tab.php
- reviews-tab.php
- specification-tab.php

- electro-tabs.php
- images-block.php
- product-actions-wrapper.php
- related-products.php
- single-product-extended-summary.php
- single-product-summary.php
- variations-form.php
- woocommerce-tabs.php

###### 1.2.2.2 Components

1.2.2.2.1 Sidebar

- about-widget.php
- post-categories-widget.php
- product-categories-widget.php
- product-filters-sidebar.php
- recent-post-widget.php
- search-widget.php
- tag-widget.php

1.2.2.2.2 Home-v2

- blog-carousel-widget.php
- electro-features.php
- home-v2-ad-block.php
- latest-products.php
- products-carousel-widget.php

- blog-comments-area.php
- blog-pagination.php
- blog-post.php
- cart-collaterals.php
- cart-table.php
- checkout-table.php
- contact-form-v1.php
- contact-map.php
- post-author-info.php
- post-navigation.php
- product-card-item.php
- product-card.php
- product-carousel-item.php
- product-carousel-item1.php
- product-category-item.php
- product-category.php
- product-grid-ext.php
- product-grid.php
- product-image.php
- product-item.php
- product-list-view-small.php
- product-list-view.php
- product.php
- shop-control-bar-bottom.php
- shop-control-bar.php
- shop-control-widget.php
- store-info-v1.php

###### 1.2.2.2.3 Navigation

- department-menu-megamenu.php
- department-menu.php
- primary-nav-megamenu.php
- primary-nav.php
- secondary-menu.php
- vertical-menu-megamenu.php
- vertical-menu.php

1.2.2.2.4 Footer

- brands-carousel.php
- footer-newsletter.php
- footer.php

1.2.2.2.5 Header

- header-logo.php
- header-support-info.php
- header-v1.php
- header-v2.php
- header-v3.php
- header-v3-full-color.php
- header.php
- navbar-primary.php
- navbar-right.php
- navbar-search.php
- top-bar.php

CSS files – with usage details (order of importance):

- bootstrap.min.css – Stylesheet (minified) for Bootstraps front-end framework
- bootstrap-rtl.min.css – Stylesheet (minified) for Bootstraps rtl front-end framework
- style.css – Main template stylesheet
- font-awesome.min.css – Font Awesome Icons stylesheet
- owl.carousel.css – Basic stylesheet for content sliders/carousels
- font-electro.min.css – Electro Font stylesheet
- black.css, blue.css, dark-green.css, flat-blue.css, gold.css, green.css, red.css, orange.css, pink.css, navy.css – Template color scheme stylesheets
- animate.min.css – Stylesheet (minified) for CSS3 animations

#### 1.4 Sass

Sass extends CSS with dynamic behavior such as variables, mixins, operations and functions. If you are not experienced or not aware of what SASS files is you don't have to worry, these files are not required for the template. Instead SASS files are compiled as CSS files. You can either edit SASS files and compile it to CSS or directly edit the SASS files

###### Admin

- ec-tabs.scss – Contains all the LESS variables.
- electro-options-panel.scss – Re-usable code.
- mixins.scss – Imports all the less files and makeup one single CSS file.
- variables.scss – Genereal Styles
- admin.scss – Styles in blue color

###### Base

- base.scss – Contain base style.
- type.scss – Contain type style.
- form.scss – Contain form style
- layout.scss – Contain layout style
- woocommerce.scss – Contain woocommerce style
- page.scss – Contain page style
- media.scss – Contain media style

###### Blocks

- top-bar.scss – Contain top bar style
- header.scss – Contain header style
- navbar.scss – Contain navbar style.
- sliders.scss – Contain slider style
- home-full-width-slider.scss – Contain home-full-width-slider style
- features-list.scss – Contain features list style
- ads.scss – Contain ads block style
- section-onsale-product.scss – Contain section onsale product style
- products-carousel-tabs.scss – Contain products carousel tabs style
- shop-control-bar.scss – Contain shop control bar style
- product-categories.scss – Contain product categories style
- products.scss – Contain products style
- products-carousel.scss – Contain products carousel style
- products-carousel-with-image.scss – Contain products carousel with image style
- product-card.scss – Contain product card style
- product-cards-carousel.scss – Contain product cards carousel style
- products-2-1-2.scss – Contain products 2-1-2 style
- products-6-1.scss – Contain products 6-1 style
- home-list-categories.scss – Contain home list categories style/li>
- sidebar.scss – Contain sidebar style
- brands-carousel.scss – Contain brands carousel style
- widgets.scss – Contain widgets style
- wc-widgets.scss – Contain wc widgets style
- footer.scss – Contain footer style
- comments.scss – Contain comments style
- posts.scss – Contain posts style
- woocommerce-checkout.scss – Contain woocommerce checkout style

###### Components

- primary-nav.scss – Contain primary nav style.
- departments-menu.scss – Contain departments menu style.
- vertical-menu.scss – Contain vertical menu style.
- secondary-nav.scss – Contain secondary nav style
- navbar-search.scss – Contain navbar search style
- navbar-mini-cart.scss – Contain navbar mini cart style
- wc-breadcrumb.scss – Contain wc breadcrumb style
- wc-ordering.scss – Contain wc ordering style
- wc-tabs.scss – Contain wc tabs style
- selectro-wc-ppp-select.scss – Contain electro wc pop select style
- electro-adv-pagination.scss – Contain electro adv pagination style
- product-item.scss – Contain product item style
- product-list-view.scss – Contain product list view style
- wc-pagination.scss – Contain wc pagination style
- star-rating.scss – Contain star rating style
- owl-carousel.scss – Contain owl carousel style
- post-item.scss – Contain post item style
- blog-pagination.scss – Contain blog pagination style
- table-cart.scss – Contain table cart style
- cart-collaterals.scss – Contain cart collaterals style
- jplayer.scss – Contain jplayer style
- post-format-gallery.scss – Contain post format gallery style
- wc-reviews.scss – Contain wc reviews style
- utilities.scss – Contain posts style
- qty-buttons.scss – Contain utilities style
- megamenu.scss – Contain megamenu style
- scrollup.scss – Contain scrollup styles
- widget-electro-recent-posts.scss – Contain widget electro recent posts style
- pace.scss – Contain pace style
- typeahead.scss – Contain typehead style

###### Integrations

- wishlist.scss – Contain wishlist style.
- woocompare.scss – Contain woocompare style.

###### Pages

- page-checkout.scss – Contain page checkout style.
- page-myaccount.scss – Contain page my-account style.
- page-cart.scss – Contain page cart style.
- page-order-received.scss – Contain page order received style
- page-track-your-order.scss – Contain page track your order style
- page-single-product.scss – Contain page single product style
- page-about.scss – Contain about style
- page-faq.scss – Contain faq style
- page-compare.scss – Contain page compare style
- page-contact.scss – Contain page contact style
- page-404.scss – Contain page 404 style

###### Responsive

- screen-down-lg.scss – Contain large screen style.
- screen-down-md.scss – Contain medium screen style.
- screen-down-sm.scss – Contain small screen style.
- screen-md-lg.scss – Contain medium to large screen style
- screen-sm-md.scss – Contain small to medium screen styler

#### 1.5 Images

Template images – with usage details (order of importance):

- logo.png,logo.svg – Template sample logos in SVG format (Scalable Vector Graphics) and png format as a fallback for browsers not supporting SVG
- fav-icon.png – Template sample logo icon for display in browser tabs and address bars

#### 1.6 Javascript

JavaScripts and integrated jQuery scripts – with usage details (order of importance):

- jquery.min.js – Script (minified) for jQuery script usage
- bootstrap.min.js – Script (minified) for Bootstraps front-end framework
- bootstrap-hover-dropdown.min.js – Script (minified) for enabling Bootstrap dropdown menus on hover
- jquery.easing.min.js – Script (minified) for easing jQuery transitions
- owl.carousel.min.js – Script (minified) for content sliders/carousels
- wow.min.js – Script (minified) for triggering animations on scroll
- jquery.waypoints.min.js – Script (minified) for waypoints
- echo.min.js – HTML5 lazy loading
- tether.js – Script for tether

### 2. Technology

Electro is based on Twitters popular front-end framework Bootstrap for fully flexible and responsive layouts. It also uses the latest web technology HTML5 for semantic content structuring and CSS3 for versatile and powerful styling options.

Read more about the used technology:

Bootstrap: http://getbootstrap.com
HTML5/CSS3: http://www.w3schools.com
HTML5: http://html5doctor.com

### 3. Usage – Customization

#### 3.1 HTML

Now comes the really interesting part! Learn how to use and customize this website template to fit your needs. The most important thing for you to do is actually look into the HTML source code and see how elements are written! The clean and commented code makes it easy for you to copy code blocks from content modules and past them in different places or layouts.

    <!-- ========================================= 2-1-2 Product Grid ========================================= -->
    <section class="products-2-1-2 animate-in-view fadeIn animated" data-animation="fadeIn>

    	...
    </section>
    <!-- ========================================= 2-1-2 Product Grid : END ========================================= -->

#### 3.2 Logo

It is highly recommended to use vector graphics for the logo like the Electro template does with the SVG (Scalable Vector Graphics) file format. This ensures the best possible and sharpest view on mobile devices and of course when scaling the logo. If it is not possible for you to use vector graphics you can still use raster graphics like the JPG or PNG file format of course. In this case you have to change the filename extension of the logo in the following HTML parts to this for example:

    <!-- ============================================================= LOGO ============================================================= -->

    <a href="index.php?page=home" class="header-logo-link">

    	<img alt="logo" src="assets/images/logo.svg" width="255.232px" height="66.132px"/>

    </a>
    <!-- ============================================================= LOGO : END ============================================================= -->

#### 3.3 Colors

Electro comes with 12 prestyled template color schemes: green, black, dark-green, flat-blue, gold,yellow, blue, red, orange, pink and Navy. Just change the next line in the section of the HTML code to the color you prefer:

    <link rel="stylesheet" href="assets/css/yellow.css">

Afterwards you can delete these lines of code for demo purposes:

    <!-- Demo Purpose Only. Should be removed in production -->
    <link rel="stylesheet" href="assets/css/config.css">

    <link href="assets/css/green.css" rel="alternate stylesheet" title="Green color">
    <link href="assets/css/blue.css" rel="alternate stylesheet" title="Blue color">
    <link href="assets/css/red.css" rel="alternate stylesheet" title="Red color">
    <link href="assets/css/orange.css" rel="alternate stylesheet" title="Orange color">
    <link href="assets/css/pink.css" rel="alternate stylesheet" title="Pink color">
    <link href="assets/css/dark-green.css" rel="alternate stylesheet" title="Dark Green color">
    <link href="assets/css/black.css" rel="alternate stylesheet" title="Black color">
    <link href="assets/css/flat-blue.css" rel="alternate stylesheet" title="Flat Blue color">
    <link href="assets/css/gold.css" rel="alternate stylesheet" title="Gold color">
    <link href="assets/css/navy.css" rel="alternate stylesheet" title="Navy color">
    <link href="assets/css/yellow.css" rel="alternate stylesheet" title="Yellow color">
    <!-- Demo Purpose Only. Should be removed in production : END -->

### 4. Support

Sometimes it is faster and more effective to solve problems through communication. So for problems you cannot solve with help of this documentation please send us a message and we will see how we can help!

support@transvelo.freshdesk.com

### 5. Sources and Credits

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

- PSD Design by bcube
- HTML code by Ibrahim Ibn Dawood
- Bootstrap by Twitter
- Bootstrap Hover Dropdown by Cameron Spear
- Jquery Easing by George McGinley Smith
- Owl Carousel by OwlFonk
- WOW by Matthieu Aussaguel
- Animate.css by Daniel Eden
- Yamm 3 by geedmo
- echo by toddmotto
- Font Awesomeby Dave Gandy
- jQuery UI

Once again, thank you so much for purchasing this theme. As We said at the beginning, We'd be glad to help you if you have any questions relating to this theme. No guarantees, but We'll do our best to assist. If you have a more general question relating to the themes on themeforest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Ibrahim Ibn Dawood