Seraine - Skincare Beauty Store HTML Template

Seraine is a quiet-luxury eCommerce template for skincare, beauty and wellness brands. It is hand-coded in plain HTML5, CSS3 and vanilla JavaScript, with no framework, no build step and no dependencies. Open index.html and it runs.

The design takes cues from editorial print: a Bodoni display serif, generous whitespace, brass accents and soft, still-life product artwork. It is made for small-batch brands that want to look considered rather than loud.

8 complete pages

• Home with hero, category tiles, bestsellers, ingredient story, reviews and newsletter
• Shop / collection with filter sidebar, sort bar and product grid
• Product page with gallery, size and strength options, quantity, accordions (details, ingredients/INCI, how to use) and related products
• Cart with line items, quantity controls, promo field and order summary
• Checkout with contact, delivery, shipping method and payment steps
• Thank-you / order confirmation
• About with brand story, values, timeline and sourcing
• Contact with form, FAQ and atelier details

A documentation page is included, covering the file structure, how to change colours and fonts, how to edit products and how to deploy.

Features

• 8 fully designed pages plus a documentation page
• Pure HTML5, CSS3 and vanilla JS with no jQuery, Bootstrap or build tools
• Fully responsive, mobile-first layouts with a mobile navigation drawer
• Scroll-reveal animations that respect prefers-reduced-motion
• Hover image swap on product cards, plus quick-add toast
• Product gallery, option selectors, quantity steppers and accordions
• Cart and checkout UI with order summary
• Design tokens: all colours, fonts and spacing in CSS custom properties
• Accessible markup: skip link, landmarks, aria labels and keyboard-friendly controls
• Lightweight original SVG artwork, easy to swap for your own photos
• Google Fonts: Bodoni Moda, Jost and IBM Plex Mono
• Well-commented, readable code

Requirements

• Any modern browser (Chrome, Firefox, Safari, Edge)
• A text/code editor to customise
• Any static hosting to go live (Netlify, Vercel, GitHub Pages, cPanel, etc.)
• No server-side language or database required

Instructions

1. Unzip the download.
2. Open template/index.html in your browser to preview.
3. Change colours and fonts in the :root block at the top of template/assets/css/style.css.
4. Edit product names, prices and copy directly in the HTML files, and replace the SVGs in assets/img/ with your own photos.
5. Upload the template folder to your host.

The cart, checkout and forms are front-end only. Connect them to your preferred platform (for example Shopify Buy Button, Snipcart or Stripe Checkout). Full details are in documentation.html.