Modave - Multipurpose eCommerce HTML Template

  • Version: 1.0.0
  • Last Updated: 28/11/2024
  • Author: Themesflat
Thank you so much for your interests. Your comments and ratings would be much appreciated. If you purchase this template, you will get support. We will update this template time by time and we want to hear your wishes for the future updates or for complete new templates.

Template features:

  • HTML5 & SCSS
  • 26 Home pages (update+)
  • 70+ inner pages
  • Product style list
  • 07 product style grid
  • 30+ page product style detail
  • 02 Blog Page
  • 02 Contact Page
  • 02 Store List
  • Responsive Template
  • Free icons used
  • Pixel Perfect
  • Clean & Unique Design
  • Easy to customize
  • Retina Ready
  • Unlimited Colors
  • Ajax Contact Form
  • Ajax Appointment Form
  • Filter product
  • Popup cart, popup search
  • Parallax Effect
  • & much more...

HTML Structure

Modave is a premium responsive HTML template created especially for logistic & transportation companies, offices. It is very easy to customize and use. The template comes with loads of great features like custom components, web fonts, animated content & powerful CSS3 animations. We studied and reviewed hundreds of logistic sites across the web before planning the features of the template and element to ensure we covered all function and abilities.

We designed our Modave template to be simple to use, intuitive and powerful, and most importantly results orientated. Modave HTML template will help you get your site up and running in minutes, provide an excellent user and admin experience, and help convert visitors in to attendees!

Get Modave now along with our whole-hearted support!

Below is Modave basic structure:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Modave - Multipurpose eCommerce HTML Template</title>

    <!-- Mobile Specific Metas -->

    <!-- Bootstrap  -->

    <!-- Template Style -->

    <!-- Responsive -->

    <!-- colors -->    
   
    <!-- Animation Style -->    

    <!-- Favicon and touch icons  -->
</head>

<body>
	<!-- Header -->	
	<header id="header"> </header>

	<!-- Slider -->
	<div class="tf-slideshow"> </div>
	
    <!-- Section -->
    <section class="flat-section"> </section>

    <!-- Footer -->
    <footer class="footer"> </footer>

   	<!-- Toolbar -->
   	<div class="toolbar-bottom"> </div>

   	<!-- Go Top -->
    <a class="go-top"></a>
   
   <!-- Javascript -->
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
   <script type="text/javascript" src="js/swiper-bundle.min.js"></script>
   <script type="text/javascript" src="js/lazysize.min.js"></script>   
   <script type="text/javascript" src="js/jquery-validate.js"></script>
   <script type="text/javascript" src="js/jquery.countdown.js"></script>
   <script type="text/javascript" src="js/wow.min.js"></script>
   <script type="text/javascript" src="js/main.js"></script>
</body>

</html>

CSS System

The Modave CSS System contains 3 parts:
  • Template style
  • Library - Fonts

Style.css ( Template style )


/**
	* Abstracts variable
  * Reset css styles
  * Components
  * header
  * footer
  * tabs
  * slider
  * button
  * form
  * nice-select
  * carousel
  * avatar
  * pop-up
	* box-icon
  * hover
  * collection
  * product
  * blog
  * testimonial
  * lookbook
  * accordion
  * zoom
  * shop
  * section
  * Responsive
*/

Library - Fonts


/**  
  * animate.css
  * bootstrap-select.min.css
  * bootstrap.min.css
  * drift-basic.min.css
  * image-compare-viewer.min.css
  * jquery.fancybox.min.css
  * jqueryui.min.css
  * photoswipe.css
  * styles.css
  * styles.css.map 
  * swiper-bundle.min.css

*/

Javascript Custom

Here you can modify any settings

Main.js ( javascript/main.js )


/**
  * selectImages
  * btnQuantity
  * delete_file
  * goTop
  * closeAnnouncement
  * sidebar_mb
  * tabs
  * swatchColor
  * changeValue
  * footer
  * btn_wishlist
  * btn_loading
  * loadItem
  * stagger_wrap
  * clickModalSecond
  * scrollProgress
  * headerSticky
  * img_group
  * filterTab
  * autoPopup
  * rangePrice
  * clickControl
  * checkClick
  * write_review
  * customInput
  * chooseOption
  * withDiscount
  * totalPriceVariant
  * variantPicker
  * scrollGridProduct
  * hoverPin
  * togglePassword
  * customDropdown
  * ajaxContactForm
  * loadmore
  * hasPurchased
  * checkPaymentCard
  * handleFooter
  * handleProgress
  * heightModalmenu
  * ajaxSubscribe.eventLoad
  * preloader
*/

Compile Styles System

When you edit the sass code, run the sass scss/app.scss css/styles.css --watch command to compile the code.

You can go to the official https://sass-lang.com/ page to see more features

Contact Form

To edit the contact form to send mails to your email box, you can look for the config.php. You need to edit yourname@yourdomain.com to your email.

contact-process.php ( contact/contact-process.php )


$address = "themesflat@gmail.com";

Example Edit Template

1. Example of how to edit the logo template


You change the logo image in the folder of project "Images" of your logo images, the same name as the original (logo.png)
Project Modave:-> images -> logo.png

2. Example of how to edit the "product style" template

Style list: If you want to use style listuse the sample below

<!-- Product style list -->
    <div class="card-product list-layout"> 
    	<div class="card-product-wrapper"> 
    		...
    	</div>
		<div class="card-product-info"> 
    		...
    	</div>
    </div>

Style grid: If you want to use style listuse the sample below

<!-- Product style 01 -> 07 -->
    <div class="card-product style-2...style-7"> 
    	<div class="card-product-wrapper"> 
    		...
    	</div>
		<div class="card-product-info"> 
    		...
    	</div>
    </div>

3. Example of how to edit the "top bar style"

Background:If you want to change the white background color, add class "bg_white"

<!-- Top bar -->
    <div class="tf-top-bar bg_white"> 
		...
    </div>

Credits