Rosaline - Beauty & Cosmetic eCommerce HTML Template

  • Version: 1.0.0
  • Last Updated: May 23, 2026
  • 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
  • 8 Home pages (update+)
  • 60+ inner pages
  • 100+ sections
  • User Account Pages
  • Multi - Product Layouts
  • Product style detail
  • Unlimited Colors
  • Contact Form
  • Appointment Form
  • 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

Rosaline - Beauty & Cosmetic eCommerce HTML Template

Glowly is a modern and versatile multipurpose eCommerce HTML template designed for online stores, fashion shops, beauty brands, lifestyle products, cosmetics, accessories, furniture, electronics, and more. Built with clean code, responsive layouts, and elegant UI elements, Glowly helps you create a professional shopping website with a smooth user experience across all devices. The template includes well-structured pages, product layouts, shop grids, detail pages, blog sections, and essential eCommerce components suitable for launching a stylish and conversion-focused online store.

Below is Amerce basic structure:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Rosaline - Beauty & Cosmetic 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-spacing"> </section>

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

   	<!-- Javascript -->
   	<script src="assets/js/plugin/bootstrap-select.min.js"></script>
	<script src="assets/js/plugin/bootstrap.min.js"></script>
	<script src="assets/js/plugin/count-down.js"></script>
	<script src="assets/js/plugin/countto.js"></script>
	<script src="assets/js/plugin/drift.min.js"></script>
	<script src="assets/js/plugin/flip.min.js"></script>
	<script src="assets/js/plugin/gsap.min.js"></script>
	<script src="assets/js/plugin/image-compare-viewer.js"></script>
	<script src="assets/js/plugin/image-compare-viewer.min.js"></script>
	<script src="assets/js/plugin/imagesloaded.pkgd.min.js"></script>
	<script src="assets/js/plugin/infinityslide.js"></script>
	<script src="assets/js/plugin/jquery.isotope.min.js"></script>
	<script src="assets/js/plugin/jquery.min.js"></script>
	<script src="assets/js/plugin/jquery.nice-select.min.js"></script>
	<script src="assets/js/plugin/lenis.min.js"></script>
	<script src="assets/js/plugin/magnific-popup.min.js"></script>
	<script src="assets/js/plugin/model-viewer.min.js"></script>
	<script src="assets/js/plugin/nouislider.min.js"></script>
	<script src="assets/js/plugin/odometer.min.js"></script>
	<script src="assets/js/plugin/parallaxie.js"></script>
	<script src="assets/js/plugin/photoswipe-lightbox.umd.min.js"></script>
	<script src="assets/js/plugin/photoswipe.umd.min.js"></script>
	<script src="assets/js/plugin/swiper-bundle.min.js"></script>
	<script src="assets/js/plugin/wow.min.js"></script>
	<script src="assets/js/carousel.js"></script>
	<script src="assets/js/gsapCustom.js"></script>
	<script src="assets/js/main.js"></script>
	<script src="assets/js/shop.js"></script>

</body>

</html>

CSS System

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

styles.css ( Template style )


/**
	* Abstracts variable

    * Reset css styles

    * typography

    * classes

    * Components

        * layout
        * header
        * topbar
        * blog
        * animation
        * hover
        * box-icon
        * pop-up
        * tabs
        * form
        * button
        * slider
        * testimonial
        * nice-select
        * zoom
        * accordion
        * account
        * lookbook
        * widget
        * section
        * gsap
        * shop
        * product
        * cart
        * footer
        * landing

*/

Library - Fonts

/**  

  * animate.css
  * bootstrap-select.min.css
  * bootstrap.min.css
  * drift-basic.min.css
  * image-compare-viewer.min.css
  * jquery.fancybox.min.css
  * magnific-popup.min.css
  * odometer.min.css
  * photoswipe.css
  * styles.css
  * swiper-bundle.min.css

*/

Javascript Custom

Here you can modify any settings

main.js ( assets/js/main.js )


/**
	* headerSticky
	* popupProductVariant
	* dropdownSelect
	* btnQuantity
	* deleteFile
	* deleteWishList
	* goTop
	* variantPicker
	* sidebarMobile
	* staggerWrap
	* clickModalSecond
	* totalPriceVariant
	* handleProgress
	* handleFooter
	* infiniteSlide
	* addWishList
	* handleSidebarFilter
	* estimateShipping
	* unitEstimateShipping
	* textCopy
	* parallaxie
	* tableCompareRemove
	* handleMobileMenuV2
	* swatchProduct
	* scrollBottomSticky
	* showPassword
	* hoverPin
	* rateClick
	* counter
	* updateBundleTotal
	* noticePop
	* hoverMenuOverlay
	* brandFilter
	* scrollX
	* submitFormGift
	* reactBtn
	* checkFbt
	* initStepRoutine
	* activeActionBox
	* hoverImgCursor
	* autoPopup
	* openedDrop
	* doubleTab
	* guideDirecTab
	* glitchCanvas
	* handleUploadImage
	* autoTabAccordion
	* formatMMYY
	* hoverVideo
 */

Compile Styles System

When you edit the sass code, run the sass assets/scss/app.scss assets/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 Amerce:-> images -> logo.svg

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