Kelvin - Kitchen eCommerce HTML Template

Kelvin is a spec-led eCommerce template for kitchen appliances, home gadgets and small electronics. 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 is clean and technical: a bold grotesque headline face, cobalt accents, monospace spec labels and product artwork with live-looking displays. It is built for brands that sell on facts, with datasheets, comparison tables and warranty details, rather than on countdown timers.

10 complete pages

• Home with hero, key-figures strip, category tiles, bestsellers, testing story and reviews
• Shop / collection with filters, sort bar and product grid with "+ Compare" toggles
• Product page with gallery, finish and capacity options, full datasheet table, in-the-box list and related products
• Compare page with a side-by-side table of four models across nineteen specs, with best-value highlighting
• Support & warranty hub with manuals, spare parts, troubleshooting and warranty registration
• Cart with line items, quantity controls and order summary
• Checkout with contact, delivery, shipping method and payment steps
• Thank-you / order confirmation
• About with brand story, values, materials and timeline
• Contact with form and FAQ

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

Features

• 10 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
• Product comparison page and "+ Compare" toggles on product cards
• Datasheet / spec tables styled for readability
• Support & warranty hub page
• Scroll-reveal animations that respect prefers-reduced-motion
• 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 product artwork, easy to swap for your own photos
• Google Fonts: Bricolage Grotesque, Archivo and JetBrains Mono

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, specs 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.