Techmarket

Multi-demo & Electronics Store eCommerce Theme

Hello and thank you for purchasing this website template! Techmarket 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.1.1 Slider

1.2.2.1.2 Single-product

1.2.2.1.2.1 Woocommerce-tabs

1.2.2.2 Components

1.2.2.2.1 Banner

1.2.2.2.2 Sidebar

1.2.2.2.2.1 Single Product

1.2.2.3 Footer

1.2.2.4 Header

1.2.2.5 Menu

1.3 CSS

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

Base
Blocks
Components
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):

2. Technology

Techmarket 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:

Sass: Syntactically Awesome Style Sheets http://sass-lang.com/
Bootstrap: http://getbootstrap.com
HTML5/CSS3: http://www.w3schools.com
HTML5: http://html5doctor.com

3. Usage – Customization

3.1 Sticky Header

Sticky Headers are those that remain visible, even after the user scrolls down on the page. In default we enable Sticky Header option for all Headers, if you want to disable this option, please remove the div has the class name as "techmarket-sticky-wrap" in header-v1.php file which is located in inc > header folder. Based on this class name we add Sticky Header option, by removing the div you can disable the option. The same steps should be followed for all headers and handheld mobile headers to remove the Sticky Header option. 
		<!-- ========================================= Before Sticky Header ========================================= -->
			<div class="col-full desktop-only">
		
				<div class="techmarket-sticky-wrap">

			    </div>
			</div>
		<!-- ========================================= After Sticky Header : END========================================= -->
		
		<!-- ========================================= After Sticky Header ========================================= -->
			<div class="col-full desktop-only">
		
			</div>
		<!-- ========================================= After Sticky Header : END========================================= -->

3.2 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-rows-carousel-tab ========================================= -->
<section class="section-hot-new-arrivals section-products-carousel-tabs>

	...
</section>
<!-- ========================================= 2-rows-carousel-tab : END ========================================= -->

3.3 Logo

It is highly recommended to use vector graphics for the logo like the Techmarket 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" class="custom-logo-link">

	<img alt="logo" src="assets/images/logo.jpg" />

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

3.4 Colors

Techmarket comes with 6 prestyled template color schemes: blue, flat-green, green, orange, red, yellow. Just change the next line in the section of the HTML code to the color you prefer:

<link rel="stylesheet" type="text/css" href="assets/css/colors/blue.css">

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

<!-- Demo Purpose Only. Should be removed in production -->
<link href="assets/css/blue.css" rel="alternate stylesheet" title="Blue color">
<link href="assets/css/flat-green.css" rel="alternate stylesheet" title="Flat Green color">
<link href="assets/css/green.css" rel="alternate stylesheet" title="Green color">
<link href="assets/css/orange.css" rel="alternate stylesheet" title="Orange color">
<link href="assets/css/red.css" rel="alternate stylesheet" title="Red color">
<link href="assets/css/yellow.css" rel="alternate stylesheet" title="Yellow color">

<!-- Demo Purpose Only. Should be removed in production : END -->

3.5 RTL

If you want to use RTL language, load style.rtl.css in the place of style.css. style.rtl.css is bundled with this template. 
<!-- link rel="stylesheet" type="text/css" href="assets/css/style.css" media="all" / -->
For RTL language replace style.css into style.rtl.css 
<!-- link rel="stylesheet" type="text/css" href="assets/css/style.rtl.css" media="all" / -->

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 template. As We said at the beginning, We'd be glad to help you if you have any questions relating to this template. No guarantees, but We'll do our 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.

Transvelo