1. Start
  2. Files Structure
  3. HTML Structure
  4. CSS Structure
  5. Javascript
  6. RTL
  7. Icons
  8. Customization
  9. Source & Credits
  10. Support

Documentation

Marketshop - eCommerce HTML Template

Thank you for purchasing Marketshop - eCommerce HTML Template on ThemeForest.
If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form.

For Future Updates Follow Me @themeforest or @facebook or @google+ or @twitter

Files Structure

HTML Structure

The template is based on Bootstrap 3 Framework - http://getbootstrap.com

    

    	

        	Level 1 column
            

				
Level 2

				
Level 2

If you need more information, please visit this site: http://getbootstrap.com/css/#grid

CSS Structure

These are the CSS file we are using in the template:

Javascript

In (js/custom.js) you have all custom code, wich is well commented and ready to use and update.

RTL

To activate the RTL mode please follow the steps:

Icons

Font Awesome is a @font-face iconset.

If you need more information, please visit this site: http://fontawesome.io/ 

    
    
    
    
    ......

Customization

Layout Style (Wide/Boxed)

The template has two different layout modes, Wide and Boxed. if you want to use the Boxed version, Replace the following class instead of "wrapper-wide" class after "body" section tag:

    

    .....

The main menu has two different layout modes, Wide and Boxed.

if you want to use the Boxed Style. So, Use following html Structure:

if you want to use the Wide Style. So, Use following html Structure:

Header Style

The Header has available in 3 different styles modes.

Style1 - (Logo Left & Search Right):

if you want to use the Style1. So, Use following html Structure: 
    

      

        

          
          

            
          

          
          
          

            
.......

Style2 - (Logo Center & Search Right):

  • 1 if you want to use the Style2. So, Use following html Structure: 
        
    
      
    
        
    
          
          
    
            
    .......
  • 2

    also, Add "style2" css class in the main header div.

Style3 - (Logo Left & Search Center):

if you want to use the Style3. So, Use following html Structure: 
    

      

        

          
          

            
          

          
          
          

            
          

          
          
          

            
......

Home Link has available two different style, Icon and Text for Main Menu.

if you want to use the Home link in Text. So, Use following simple link code: 
    Home

if you want to use the Home link in Icon. So, Add "home_link" css class in it link. also, Home text add inside in "span" tag.:

    Home

Product Grid

You can set 3, 4, 5, or 6 product in a row.

Product Slider Carousel (Featured, etc...)

if you want to change product per row in Product Slider Carousel. You can set following value(3 or 4 or 5 or 6) of product for middle & large screen. . Open the file/js/custom.js

Grid View (Category page, Searach page etc...)

To change product per row in Grid View (Category page, Searach page etc...). please replace following js code in /js/custom.js:

For 3 product in a row.
/*---------------------------------------------------
   Product Grid
----------------------------------------------------- */
$(document).on('click', '#grid-view', function(e){
	$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-4 col-xs-12');
		
$screensize = $(window).width();
    if ($screensize > 1199) {
		$(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(3n)').after('');
    }
    if ($screensize < 1199) {
		$(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(3n)').after('');
    }
	if ($screensize < 991) {
		$(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(3n)').after('');
    }
$( window ).resize(function() {
    $screensize = $(window).width();
    if ($screensize > 1199) {
        $(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(3n)').after('');
    } 
    if ($screensize < 1199) {
        $(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(3n)').after('');
    }
	if ($screensize < 991) {
        $(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(3n)').after('');
    }
	if ($screensize < 767) {
        $(".products-category > .clearfix").remove();
    }
});
localStorage.setItem('display', 'grid');
$('.btn-group').find('#grid-view').addClass('selected');
$('.btn-group').find('#list-view').removeClass('selected');
	});
if (localStorage.getItem('display') == 'list') {
		$('#list-view').trigger('click');
	} else {
		$('#grid-view').trigger('click');
	}
For 4 product in a row.
/*---------------------------------------------------
   Product Grid
----------------------------------------------------- */
$(document).on('click', '#grid-view', function(e){
	$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-4 col-xs-12');
		
$screensize = $(window).width();
    if ($screensize > 1199) {
		$(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(4n)').after('');
    }
    if ($screensize < 1199) {
		$(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(4n)').after('');
    }
	if ($screensize < 991) {
		$(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(3n)').after('');
    }
$( window ).resize(function() {
    $screensize = $(window).width();
    if ($screensize > 1199) {
        $(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(4n)').after('');
    } 
    if ($screensize < 1199) {
        $(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(4n)').after('');
    }
	if ($screensize < 991) {
        $(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(3n)').after('');
    }
	if ($screensize < 767) {
        $(".products-category > .clearfix").remove();
    }
});
localStorage.setItem('display', 'grid');
$('.btn-group').find('#grid-view').addClass('selected');
$('.btn-group').find('#list-view').removeClass('selected');
	});
if (localStorage.getItem('display') == 'list') {
		$('#list-view').trigger('click');
	} else {
		$('#grid-view').trigger('click');
	}
For 5 product in a row.
/*---------------------------------------------------
   Product Grid
----------------------------------------------------- */
$(document).on('click', '#grid-view', function(e){
	$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-5ths col-md-5ths col-sm-4 col-xs-12');
		
$screensize = $(window).width();
    if ($screensize > 1199) {
		$(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(5n)').after('');
    }
    if ($screensize < 1199) {
		$(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(5n)').after('');
    }
	if ($screensize < 991) {
		$(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(3n)').after('');
    }
$( window ).resize(function() {
    $screensize = $(window).width();
    if ($screensize > 1199) {
        $(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(5n)').after('');
    } 
    if ($screensize < 1199) {
        $(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(5n)').after('');
    }
	if ($screensize < 991) {
        $(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(3n)').after('');
    }
	if ($screensize < 767) {
        $(".products-category > .clearfix").remove();
    }
});
localStorage.setItem('display', 'grid');
$('.btn-group').find('#grid-view').addClass('selected');
$('.btn-group').find('#list-view').removeClass('selected');
	});
if (localStorage.getItem('display') == 'list') {
		$('#list-view').trigger('click');
	} else {
		$('#grid-view').trigger('click');
	}
For 6 product in a row.
/*---------------------------------------------------
   Product Grid
----------------------------------------------------- */
$(document).on('click', '#grid-view', function(e){
	$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-2 col-md-2 col-sm-3 col-xs-12');
		
$screensize = $(window).width();
    if ($screensize > 1199) {
		$(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(5n)').after('');
    }
    if ($screensize < 1199) {
		$(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(5n)').after('');
    }
	if ($screensize < 991) {
		$(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(4n)').after('');
    }
$( window ).resize(function() {
    $screensize = $(window).width();
    if ($screensize > 1199) {
        $(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(5n)').after('');
    } 
    if ($screensize < 1199) {
        $(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(5n)').after('');
    }
	if ($screensize < 991) {
        $(".products-category > .clearfix").remove();
        $('.product-grid:nth-child(4n)').after('');
    }
	if ($screensize < 767) {
        $(".products-category > .clearfix").remove();
    }
});
localStorage.setItem('display', 'grid');
$('.btn-group').find('#grid-view').addClass('selected');
$('.btn-group').find('#list-view').removeClass('selected');
	});
if (localStorage.getItem('display') == 'list') {
		$('#list-view').trigger('click');
	} else {
		$('#grid-view').trigger('click');
	}

Side Block (Facebook, Twitter, etc...)

For Set Sort Order:
Change following class for set Sort Order.

  • 1st = sort-order-1
  • 2rd = sort-order-2
  • 3st = sort-order-3
  • 4st = sort-order-4

For Set Positions (Left/Right):
Change "left" or "right" in following class for set positions.

    Home

Facebook Fun Box

Open up the HTML files and put your Facebook fun page name.

Twitter Feeds

Open up the HTML files and put your twitter Widget ID.

How to create & Find Your Widget ID ? = See example.

Fonts

  • 1

    To change the embedded font, please take a look in the head part of the website and you will find this tag:

    To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code.

  • 2

    Then change fonts name in stylesheet.css file. You have generated & use./css/stylesheet.css

Source & Credits

Support

If this documentation doesn't answer your questions, So Send me Email via Support Page. Our response time is within 24 to 48h.

Important: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

For Future Updates Follow Me @themeforest or @facebook or @google+ or @twitter


Thank you for purchasing this template.
Don’t forget to rate it