Lumen — Free Skincare & Cosmetics Website Template
Lumen is a free one-page Bootstrap 5 template for a clean-beauty skincare or cosmetics brand — a product shopfront, not a treatment salon. Its standout is a fully interactive front-end: a filterable bestsellers grid with a live add-to-bag cart counter, a percentage-led ingredient breakdown and a draggable before/after slider, all in hand-written vanilla JavaScript with zero jQuery.
Key features
- Filterable bestsellers grid of six real products with prices and ratings
- Live add-to-bag: header cart counter plus slide-in confirmation toast
- Percentage-led actives breakdown (12% Vitamin C, 2% Hyaluronic, and more)
- Draggable before/after results slider in pure CSS and vanilla JS
- AM/PM routine builder with tabbed steps and shop links
- Reviews wall with verified-buyer badges and skin-type context
- Sustainability metrics plus three discounted bundles with save badges
- Sticky blur-on-scroll header and IntersectionObserver scroll reveal
- Accessible: skip link, landmarks, focus styles, reduced-motion support
Best for
- Clean-beauty skincare and cosmetics brands
- Small-catalog direct-to-consumer product launches
- Storefronts headed for Shopify, WooCommerce or Snipcart
- One-page marketing sites with a shoppable feel
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1
- Responsive: Yes
- Style: Fresh clean-beauty — botanical pine + apricot glow + glacial aqua, Bricolage Grotesque display
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is Lumen really free to use commercially?
Yes. You can use Lumen for a real skincare or cosmetics brand, including client and commercial projects, at no cost. A credit link back to uiCookies is appreciated but not required.
Do I need a build tool or framework to edit it?
No. Lumen is a static front-end — plain HTML, CSS and JavaScript with no build step, bundler or npm install. Open the files in any editor, change the markup and refresh the browser. Bootstrap 5 is self-hosted, so there is nothing to compile.
How do I change the colors and fonts?
The palette — botanical pine, apricot glow and glacial aqua — is defined as CSS custom properties, so recoloring the whole page means editing a handful of variables rather than hunting through the stylesheet. The display typeface is Bricolage Grotesque, which you can swap by changing a single font reference. Everything else inherits from those values.
Is it responsive and mobile-friendly?
Yes. Lumen is built on Bootstrap 5's responsive grid and adapts from phones to large desktops. The bestsellers grid, routine tabs and before/after slider all reflow for touch, and the navigation collapses into a mobile menu. It works in all current evergreen browsers, including Chrome, Firefox, Safari and Edge.
How do I edit the products, prices and ingredients?
Each product is a self-contained card with data-cat, data-name and data-price attributes; duplicate a card to add a SKU and set its category so the filter picks it up automatically. The ingredient percentages, routine steps, reviews and bundles are all plain HTML blocks you edit in place. There is no data file or CMS to configure.
Can I connect it to a real store or checkout?
Not out of the box — Lumen is front-end only and does not process payments. It is structured to plug in, though: replace the product cards with your Shopify, WooCommerce or Snipcart markup, and point the add-to-bag buttons and newsletter form at your own endpoints. The cart counter and confirmation toast give you the interaction pattern to wire up.
Does it use jQuery, and is it lightweight?
No jQuery and no paid plugins. Every interaction is hand-written vanilla JavaScript, the only bundled library is self-hosted Bootstrap 5, and all icons are inline SVG, so there are no external dependencies to load. The product photos are standard image tags — drop in your own compressed files to keep pages fast.
What is the before/after results slider, and does it need a plugin?
It is a draggable comparator that wipes between a before and after image to show results, built entirely in CSS and vanilla JavaScript with no library. Drop in your own two images and it works. It is touch-friendly and respects the prefers-reduced-motion setting for users who opt out of animation.
