Plumo - Clean Beauty eCommerce HTML Template

Plumo is a bold, colourful HTML template for clean beauty and skincare shops. It swaps the usual beige-and-serif beauty look for bright colour blocks, chunky type, playful stickers, scrolling marquees and springy hover animations, aimed at younger, Gen-Z customers.

It includes the full shopping journey (home, shop, product, cart, checkout and thank-you) plus an interactive skin quiz that builds a 3-product routine, a journal/blog, an about page and a contact page with FAQ. Everything is hand-coded in HTML5, CSS3 and vanilla JavaScript: no frameworks, no jQuery, no build step. Open index.html and start editing.

Colours, fonts, radii and shadows are CSS variables, so you can rebrand the whole kit from one place. Light and dark mode are built in. All 32 illustrations are original SVGs, so there are no stock photos to license. Swap them for your own product photography when you're ready.

The bag, promo codes and checkout work as a front-end demo using localStorage. To sell for real, connect Shopify, Stripe Checkout, WooCommerce or Snipcart. The included documentation explains how.

Features

• 12 HTML pages: Home, Shop, Product, Cart, Checkout, Thank-you, Skin Quiz, Journal, Blog Post, About, Contact, Documentation
• Interactive skin quiz that recommends a 3-step routine and adds it to the bag
• Working demo bag: add/remove, quantities, free-shipping progress bar, promo codes
• 4-step checkout with live delivery totals and a confetti thank-you page
• Shop filters by skin concern and product type, sorting, deep-link filters
• Product page with gallery, size options that change the price, feel meters, accordions and a mobile sticky buy bar
• Light & dark mode (follows system setting plus a toggle)
• Scroll reveals, marquees, spinning stickers, flip cards and springy hovers
• Respects prefers-reduced-motion; keyboard and screen-reader friendly
• Fully responsive from 360px phones to wide desktops
• 32 original SVG illustrations and icons, nothing to license
• One CSS file and one vanilla JS file, both well commented
• Design tokens (CSS variables) for fast rebranding
• Detailed documentation page with Shopify / WooCommerce mapping

Requirements

• Any modern browser (Chrome, Firefox, Safari, Edge)
• A code editor to customise the files (e.g. VS Code)
• Any static web host to publish (Netlify, Vercel, GitHub Pages, cPanel)
• No server-side language, database or build tools required

Instructions

1. Unzip the download and open the plumo folder.
2. Open index.html in your browser to preview the template.
3. Open documentation.html for the full buyer guide.
4. Change colours and fonts in section 1 of assets/css/style.css.
5. Edit products for the demo bag in block 01 of assets/js/main.js.
6. Replace the SVGs in assets/img with your own product photos (4:5 ratio).
7. Upload the whole folder to your web host.