Lumen — Free Skincare & Cosmetics Website Template
Lumen is built for a product, not a service — a clean-beauty skincare store rather than a treatment salon. It ships as a complete one-page shopfront: a shoppable bestsellers grid with a working category filter and live add-to-bag counter, a published ingredient-percentage breakdown, an AM/PM routine builder, a draggable before/after results slider and discounted bundles — all on Bootstrap 5 with zero jQuery.
Features
- Filterable bestsellers grid of six real products (serums, moisturizers, cleansers, treatments) with prices, ratings and flags
- Live "add to bag" interaction — a header cart counter that increments and bumps, plus a slide-in confirmation toast
- Signature ingredient "spec chips" and a percentage-led actives breakdown (12% Vitamin C, 2% Hyaluronic, 5% Squalane, 1% Ceramide)
- AM / PM routine builder with tabbed steps, product thumbnails and shop links
- Draggable before/after results comparator built in pure CSS + vanilla JS (no library)
- A reviews wall with verified-buyer badges, star ratings and skin-type context
- Sustainability section with impact metrics, plus three product bundles with save badges
- Sticky blur-on-scroll header, IntersectionObserver scroll reveal, newsletter capture, full skip link / landmarks / focus styles and prefers-reduced-motion support
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 — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Lumen really free to use commercially?
Yes. Use it 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.
Does it use jQuery or any paid plugins?
No. Every interaction — mobile nav, product filter, add-to-bag cart, routine tabs, before/after slider, newsletter — is hand-written vanilla JavaScript. The only bundled library is Bootstrap 5, self-hosted, and all icons are inline SVG.
Can I connect it to a real store or checkout?
The template is front-end only, but it is structured for it: swap the product cards for your Shopify/WooCommerce/Snipcart markup, and point the add-to-bag buttons and newsletter form at your own endpoints.
How do I change 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. Ingredients, routine steps, reviews and bundles are all plain HTML blocks you can edit in place.
