-
1. Welcome
-
2. HTML Structure
-
3. CSS System
-
4. Javascript Custom
-
5. Compile Styles System
-
6. Example Edit Template
-
7. Credits
Vemus - Jewelry Ecommerce HTML Template
- Version: 1.0.0
- First Update: May 02, 2025
- 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.
You need file images please contact: helpdeskthemesflat@gmail.com
Template Features:
- HTML5 & SCSS
- 06 Home pages (update+)
- 36+ inner pages
- 100+ sections
- User Account Pages
- Multi – Product Layout
- Product style detail
- Unlimited Colors
- Ajax Contact Form
- Ajax Appointment Form
- 04 Blog Page
- Brand Page
- Contact Page
- FAQ Page
- Responsive Template
- Free icons used
- Pixel Perfect
- Clean & Unique Design
- Easy to customize
- Retina Ready
- Filter product
- Popup cart, popup search
- Parallax Effect
- & much more…
HTML Structure
Vemus – Jewelry Ecommerce HTML Template
Vemus is a premium HTML theme specially designed for jewelry, luxury accessories, or sophisticated fashion stores. With a modern, luxurious design and optimized user experience, Vemus is the perfect choice for those who want to build a professional and attractive e-commerce website.
Get Vemus now along with our whole-hearted support!
Below is Vemus basic structure:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title> Vineta - Multipurpose eCommerce HTML5 Template</title>
<!-- Mobile Specific Metas -->
<!-- Bootstrap -->
<!-- Theme Style -->
<!-- Responsive -->
<!-- colors -->
<!-- Animation Style -->
<!-- Favicon and touch icons -->
</head>
<body>
<!-- Header -->
<!-- Slider -->
<!-- Section -->
<section class="flat-row"> </section>
<!-- Footer -->
<footer class="footer"> </footer>
<!-- Bottom -->
<div class="bottom"> </bottom>
<!-- Go Top -->
<a class="go-top">
<i class="fa fa-angle-up"></a>
</a>
<!-- Javascript -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.easing.js"></script>
<script type="text/javascript" src="assets/js/jquery-waypoints.js"></script>
<script type="text/javascript" src="assets/js/owl.carousel.js"></script>
<script type="text/javascript" src="assets/js/parallax.js"></script>
<script type="text/javascript" src="assets/js/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/js/switcher.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>
CSS System
The Vemus CSS System contains 3 parts:
- Template style
- Shortcodes style
- Responsive style
- Javascript – Fonts – Animation – Bootstrap style
Your_template/asset/css/style.scss ( Template style )
/**
* Abstracts variable
* Reset css styles
* Components
* header
* footer
* accordion
* animation
* blog
* box icon
* button
* carousel
* avatar
* form
* hover
* nice select
* popup
* product
* shop
* slider
* testimonial
* zoom
* Section
**/
Your_template/asset/scss/shortcodes.scss ( Shortcodes - Elements style )
You can easily use the shortcodes to create your own page
/**
* Reset Browsers
* General
* Elements
* Forms
* Typography
* Extra classes
* link style
* tf-container
**/
Javascript - Fonts - Animation - Bootstrap style
/**
* animate.min.css
* bootstrap.css
* bootstrap-select.min.css
* drift-basic.min.css
* image-compare-viewer.min.css
* jquery.fancybox.min.css
* magnific-popup.min.css
* photoswipe.css
* style.css
* style.css.map
* swiper-bundle.min.css
*/
Javascript Custom
Here you can modify any settings for ( Retina Logos, Animations, Testimonials, Sliders, & Progress bar and more..)
/**
* Select Image
* Button Quantity
* Delete File
* Go Top
* Variant Picker
* Change Value
* Sidebar Mobile
* Check Active
* Button Loading
* Stagger Wrap
* Modal Second
* Header Sticky
* Auto Popup
* Toggle Control
* Total Price Variant
* Scroll Grid Product
* Hover Image Cursor
* Handle Progress
* Handle Footer
* Infinite Slide
* Video Popup
* Update Bundle Total
* Add Wishlist
* Handle Sidebar Filter
* Estimate Shipping
* Countdown Custom
* Coupon Copy
* Height Table
* Animation Custom
* Parallaxie
* Update Compare Empty
* Delete Wishlist
* 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-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 Ecomus:-> 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>
<!-- 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
Photos
All images are just used for preview purpose only and NOT included in the final purchase files.
Fonts & Icons
Javascript
jQuery (http://jquery.com/)
Bootstrap (http://getbootstrap.com)
noUiSlider (https://refreshless.com/nouislider)
Swiper (https://swiperjs.com)
Wow (https://wowjs.uk/)
Validate (https://github.com/jquery-validation/jquery-validation)
Photoswipe(https://photoswipe.com/getting-started/)
Countdown(https://hilios.github.io/jQuery.countdown/)
Image compare viewer(https://image-compare-viewer.netlify.app/)
Modelviewer (https://modelviewer.dev/)