Eighths Hat Co.
A complete demo shop for a hat brand, with every hat drawn in code and sizes in eighths of an inch.
- Type
- Software
- Year
- 2026
- Built
- 26 October 2026
- My part
- The brief, a full hat store, and swapping in my own hats and photos
- Built with
- Claude Code (AI coding assistant)
- Tools
- HTML, CSS, JavaScript, SVG; no frameworks
The idea
I wanted to see what a complete online shop takes, from browsing to checkout, without paying for a platform.
What’s in it
Seventeen hats in four families. You can filter by head size (showing only hats that fit and are in stock), colour and price. On a product page, choosing a colour redraws the hat, sizes are listed in eighths with sold-out states, and a measured drawing shows the dimensions. The bag slides out, removes items with an Undo, and shows how far you are from free shipping. Checkout validates the address and works out US and international shipping. There are no payment fields: placing an order shows a confirmation and nothing is charged.
Drawn, not photographed
Every hat is an SVG drawing built from the product data, so a new colourway is one line of data instead of a photo shoot. The site can also take real photos, which is how my own hats will go in.
What I’d do next
Replace the demo range with my own hats and photos, then decide whether to take real payments.