Electro is a website template for an electronics store selling laptops, audio, keyboards and mice, desktops and displays. It is built without a CSS framework or jQuery, on a white layout with a near-black header and footer, a crimson accent and Montserrat type. It has nine pages: home, shop, product, cart, blog, blog post, about, contact and a 404 page. The shop works in the browser: the cart adds, updates and remembers items between visits, the catalogue filters by category, brand, finish and price and sorts, search suggests products or brands as you type, and the home page switches between category tabs. The product page has a photo gallery, finish options and a full specification table. The layout is responsive and works in all popular web browsers.
What’s new in 3.0
Plain HTML, CSS and JavaScript with no framework and no jQuery. Lucide SVG icons replace the hand-drawn ones, and npm run build (esbuild) compiles the minified stylesheet and script.
Lighter pages: the nine pages together went from 7.1 MB and 104 requests to 3.9 MB and 113 requests. Photos have AVIF versions with JPEG fallbacks, and are cut at the size the layout needs, up to 4K screens, with phone and tablet crops of the home hero.
No third-party requests: the Montserrat font is self-hosted, the social icons use a small logo subset, and a Google Analytics 4 snippet stays commented out until you add your own ID.
Working forms: the contact and newsletter forms post to included PHP handlers with validation, sending, error and success messages and a spam trap.
Accessibility: muted text raised to at least 5:1 contrast, one main heading per page, a keyboard-reachable product gallery and content that no longer stays hidden at the bottom of the screen.
New product photos that match the products, page titles, descriptions, Open Graph tags and store and product structured data on every page.