Electro

Responsive eCommerce Theme

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)

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
1.2.2 Inc
1.2.2.1 Blocks

1.2.2.1.1 Homepage

1.2.2.1.2 Homepage-3

1.2.2.1.3 Single Product

1.2.2.1.3.1 single-product-sidebar

1.2.2.1.3.2 woocommerce-tabs

1.2.2.2 Components

1.2.2.2.1 Sidebar

1.2.2.2.2 Home-v2

1.2.2.2.3 Navigation

1.2.2.2.4 Footer

1.2.2.2.5 Header

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

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
Base
Blocks
Components
Integrations
Pages
Responsive

1.5 Images

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

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.

    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