1. Template Name: Beauten - Beauty & Cosmetic HTML Template
  2. Created: January 2026
  3. Version: v 1.0
  4. Author: themewolfs
  5. Developers: Masirul Islam & Rana Ahmed
Beauten Template Preview

Introduction

Beauten - Beauty & Cosmetic HTML Template

For any support please don't hesitate to contact us at Support Center. We provide real-time support for our customers.

Thank you for choosing Beauten – a modern and elegant HTML template designed for beauty cosmetic and skincare businesses. With its clean, sophisticated design, it's perfect for beauty salons, cosmetic stores, skincare clinics, spa centers, beauty brands, and any business in the beauty and wellness industry.

Template Features

  • HTML5 & CSS3
  • Bootstrap 5.x
  • SCSS Architecture
  • Font Awesome Pro
  • GSAP & ScrollTrigger
  • Swiper Slider
  • jQuery
  • Magnific Popup
  • Nice Select
  • WOW Animations
  • Mean Menu (Mobile)
  • 3 Unique Homepage Layouts
  • E-commerce Ready (Shop, Cart, Checkout, Wishlist)
  • Blog & Blog Details
  • Responsive Design
  • Clean & Well-Organized Code
  • Easy to Customize

What's Included

After purchasing Beauten template on ThemeForest with your Envato account, go to your Download page. The template package contains:

  • Beauten-placeholder-file – The main HTML template. All pages, assets, and source files are here. Edit and use for your beauty business.
  • documentation – This folder contains the documentation you're reading now.

Template Structure

HTML Structure

Beauten uses a well-organized HTML structure. The main content is inside the <body> tag, divided into logical sections: progress wrap, side panel, offcanvas overlay, header, main content sections, and footer. The template includes smooth scroll wrapper for enhanced animations.

HTML Structure
HTML Markup Structure

HTML Pages

Beauten includes 18 HTML pages covering all essential sections for a beauty & cosmetic website:

  • Homepages: index.html, index2.html, index3.html (3 unique layouts)
  • Shop: shop.html, shop-list.html, shop-right.html, collections.html
  • Product: product-details.html
  • E-commerce: cart.html, checkout.html, wishlist.html
  • Blog: blog.html, blog-standard.html, blog-details.html
  • Other: about.html, contact.html, 404.html

SCSS Files & Structure

Beauten uses a modular SCSS architecture. The main entry point is style.scss. Structure:

  • assets/scss/style.scss – Main SCSS file (compile this)
  • utils/ – _variables.scss, _typography.scss, _mixin.scss, _animation.scss, _common.scss, _theme.scss
  • components/ – _header.scss, _footer.scss, _menu.scss, _button.scss, _card.scss, _breadcumb.scss, _scroll.scss, _cursor.scss, _preloader.scss, etc.
  • pages/ – Page-specific styles: _shop.scss, _product-details.scss, _cart.scss, _checkout.scss, _blog.scss, _about.scss, _contact.scss, etc.

To change colors, edit assets/scss/utils/_variables.scss. Compile style.scss after any SCSS changes.

SCSS Structure
SCSS Files Structure

JavaScript & Vendors

Beauten uses jQuery and several vendor plugins. Custom scripts are in assets/js/main.js. Vendors are in assets/vandor/:

  • bootstrap – Bootstrap 5 bundle
  • jquery – jQuery library
  • gsap – GSAP, ScrollTrigger, SplitText, customEase
  • swiper – Swiper slider
  • fontawesome – Font Awesome Pro icons
  • menu – Mean Menu (mobile navigation)
  • popup – Magnific Popup
  • nice-select – Custom select dropdowns
  • wow – WOW.js animations
  • odometer – Number counters
  • magiccursor – Custom cursor
JavaScript Structure
JavaScript & Vendor Structure

Customization

Changing Images

To replace any image on the website:

  1. Find the image source name in the HTML (e.g. hero-banner.jpg)
  2. Open the assets/imgs folder (or subfolder like logo, shop, etc.)
  3. Locate the image file
  4. Replace the file with your image
  5. Keep the same file name, or update the HTML reference
Changing Images

Changing Colors

Beauten uses SCSS variables for colors. Edit assets/scss/utils/_variables.scss:

  1. Open assets/scss/utils/_variables.scss
  2. Modify the CSS variables in the :root block:
    • --primary, --primary-two (#EE2D7A – main pink)
    • --secondary, --thardary – accent colors
    • --text-color-one through --text-color7 – typography
  3. Save and recompile style.scss to style.css
Color Variables

Support

If you face any issue, please contact us at themewolfs@gmail.com. We provide real-time support for our customers.

Thank you for choosing Beauten.