# Free hardware store website template > Free HTML hardware store website template for local shops with key cutting, paint mixing, classes and hire. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. Hardware store website template: a free one-page HTML site for an independent shop that sells by the single screw, cuts keys, mixes paint, runs Saturday workshops and hires out tools. A cloud of product tiles flies past the opening, then pale paper and dark department panels follow. One file with AGENTS.md, ready for an AI agent. - Page: https://8b.com/templates/sixpenny/ - Live demo: https://8b.com/templates/sixpenny/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/sixpenny/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/hardware-store-website-template - Download ZIP: https://8b.com/templates/sixpenny/hardware-store-website-template.zip - Template name in the repository: Sixpenny Hardware - At a glance: One 107 KB index.html with its CSS and JavaScript inside, 12 sections, 47 Unsplash photos credited in CREDITS.md, Host Grotesk from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.4 smooth scroll loaded from jsDelivr. ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash curl -LO https://raw.githubusercontent.com/8bsite/hardware-store-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/hardware-store-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/hardware-store-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/hardware-store-website-template/main/CREDITS.md ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make this the site for . Replace first the name, hours, prices and dates. Keep the section ids, the classes AGENTS.md lists and both faces of every hire row; set the footer wordmark's len to the new name's length. Ask me for missing facts and never invent prices, hours or contacts. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/hardware-store-website-template my-site`. ### Hardware store website design prompt for any AI tool Use this to build an independent hardware shop site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It writes this template's design down as decisions; with the template files themselves, the short prompt above is enough. ```text Build a one-page website for an independent hardware store that sells by the single screw, cuts keys, mixes paint, runs Saturday workshops and hires out tools. Audience: neighbours with a repair to do, who ask what you stock, whether you cut keys and when you open. Sections in order: navigation, opening with a flying field of product tiles, five full-screen departments, counter jobs with prices, aisles, what customers brought in, the owner, classes, tool hire, visit, questions, footer. Type: Host Grotesk only, regular weight headings with tight negative tracking, medium for labels, uppercase medium buttons. Colours: #f1eee9 paper ground, #211d1e text and dark panels, #ffffff cards, #e4e17a yellow for the footer, hire tags and hover fills only, #0e2c29 for the owner section, #ef6a44 orange tone behind some photos. Layout: pills for every control, 16px corners on framed pictures, prices and times as plain rows between thin rules, no stock icons, no purple gradient, no three icon cards, no centered hero with two buttons. Motion: one idea, things arriving as you scroll; tiles fly past, departments wipe up over each other, hire tags flip from the new price to the weekend price. Respect prefers-reduced-motion by stacking screens. Copy: short, friendly, practical. Ask me for hours, prices, deposits, workshop dates and delivery rules; never invent them; leave marked placeholders. One primary action, Call the counter, repeated in the bar and the visit section. Mobile: check 390px, tap targets 44px, menu overlay. Done when: no console errors, keyboard focus visible, every placeholder listed. ``` ## About A local shop gets the same questions at the door: what do you stock, do you cut keys, can you mix this colour, when are you open. This page answers them in that order, with a panel per department, a priced list of counter jobs and tools to borrow. Among hardware store website templates free to use, it suits a shop that also offers repairs, classes or hire. A garden centre can swap the departments. A hardware store website template for Claude Code, Cursor or Codex needs you to hand the agent the facts only the shop has: hours, prices, deposits, workshop dates, delivery rules and stock counts. The demo invents all of them, including the owner's story. Ask the agent to replace the name everywhere, then set the footer wordmark's --len to its length. A hire or classes section you do not offer can go, along with its style block, animation script and the links to its id. As a hardware shop website template free of licence fees, it suits a neighbourhood shop that wants to sound friendly and practical, with a long catalogue shown as an index. If you sell mainly online, the page is too small: the buttons jump to anchors or a phone number, and there is no cart or product pages. Shops with a few lamps and repairs may prefer the [lamp shop](https://8b.com/templates/glim/) template. Owners who do not code can also try 8B's builder. ## Design - Palette: #f1eee9 (page background and the soft fog behind the opening heading), #211d1e (text, rules, dark button fills, the departments ground and the menu overlay), #ffffff (button, guide card and class card faces, text on dark sections, the focus ring gap), #e4e17a (footer ground, front of each hire tag, owner role and quote, button hover fill, a yellow tone), #0e2c29 (owner section ground), #ef6a44 (the dot beside Open 7 days and the orange tone behind some photos, badges and guide covers), #b8cda1 (sage tone behind some photos, badges and guide covers), #ceb58c (sand tone behind some photos, badges and guide covers), #93abc9 (blue tone behind some photos, badges and guide covers), #66605b (stock counts, input placeholders and small grey text), #e5e1d9 (ground of the hire and brought photo frames and the newsletter box, and the fallback tone) - Fonts: Host Grotesk (the only typeface: regular-weight headings with tight negative tracking, medium weight for labels, and uppercase medium buttons) Pale paper ground with sentence-case type at regular weight and tight tracking. The opening centres a heading over a field of floating product tiles. Departments are full-screen photo panels with a rule, an aisle label, a heading and a small guide card with a big letter. Counter, hire and questions are rows between thin rules, beside photos. The owner section is dark green and the footer wordmark is huge. The look is a friendly workshop notice board: round pills, photos with 16 pixel corners on orange, sage, yellow, sand and blue, and a yellow footer. Prices sit in plain rows between thin rules, and a cloud of product tiles replaces [the stock hero of generated sites](https://8b.com/templates/not-ai-generated/). ## Sections and motion - **Navigation** (navigation): a logo mark, five section links and an Open 7 days link; a menu button opens a full-screen menu. Motion: The bar hides on a scroll down past 160 pixels and returns on a scroll up, and its logo turns white over the dark sections. - **The small parts that hold a home together.** (opening): a cloud of product tiles flying past under the heading, then a promise screen with a highlighted sentence. Motion: On load the heading and buttons slide in and the tile cloud flies toward you in a loop; on scroll the cloud rushes past, the heading shrinks away and the promise sentence fades in word by word. - **Departments** (departments): five departments held on one screen, each next panel wiping up over the last, with a guide link and a big letter. Motion: Pinned for about four screens of scroll: each next photo panel wipes up over the last while its text rises. - **Done while you wait** (counter): six jobs done while you wait, each with a price and a time, beside two photos. Motion: The heading and lead rise into view, each job row draws its rule and slides its cells in, and the two photos unveil. - **Every aisle, front to back** (aisles): an index of six aisle names that grow to full size as each reaches the middle of the screen, each with a photo tile and a stock count. Motion: Each aisle name grows from 70 percent to full size as it nears the middle of the screen and shrinks away after, with its photo tile turning into place. - **Bring the old one in** (brought): three pairs: a part brought in and the match, sliding together as they rise. Motion: On scroll the brought-in part slides in from the left and its match from the right, both tilted, until they level out in place. - **Len Hollis** (owner): a portrait of the owner with a short history, a quote and a photo of the small-parts shelves, on a dark ground. Motion: The quote rises into view and the shelf photo unveils. - **Fix-it Saturdays** (classes): four Saturday workshop cards dealt out of a stack, each with date, price, places left and a phone link. Motion: On wide screens the four workshop cards start stacked at the centre and deal out to their places; on a phone each slides in from alternate sides. - **Borrow it for the weekend** (hire): six hire rows; each tag turns over from the buy-new price to the weekend price. Motion: As each hire row nears the middle, its tag flips from the buy-new price to the weekend price. - **Come in, the kettle is on** (visit): a shop-front photo that steps back into its half while hours, address, phone, email and a newsletter form come in. Motion: On wide screens the shop photo starts full width and steps back into the left half while the hours and newsletter box slide in; on a phone the photo zooms out. - **Asked at the counter** (faq): six questions as native
beside a photo of the parts cabinet. Motion: The heading rises, a rule draws above each question, and the photo unveils; opening a question turns its plus into a minus. - **Footer** (footer): a huge wordmark, the shop's address and hours, contact links, page links and small print. Motion: The big wordmark rises into view. ## Good for - independent hardware store or DIY shop - key cutting, paint mixing or repair counter - tool hire, garden centre or builders' merchant - any local shop with a long catalogue that wants a friendly, practical look ## Questions **Is this free for a client's hardware shop?** Yes. It is one index.html, [every aisle on a single page](https://8b.com/templates/one-page/), under the MIT licence, so a freelancer can adapt it for a shop at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, there is no build step, and the Host Grotesk font and Unsplash photos are credited in CREDITS.md. **Can customers buy things on this site?** No. There is no cart, checkout or product pages. The buttons jump to sections or open a phone call, which suits taking classes and hire bookings by phone. A shop with an online catalogue can point the department buttons at its category pages, as AGENTS.md describes. **Does the newsletter form send anything?** No. The form checks that the email address is valid, then swaps itself for a thank-you line and sends nothing. AGENTS.md gives the steps for Formspree or Netlify Forms; a newsletter service such as Mailchimp or Buttondown needs its own form code. Or delete the form and its script. Also edit the line that promises a monthly email. **How do I hand it to Claude Code, Cursor or Codex?** Put index.html and AGENTS.md in an empty folder with the curl lines, and tell the agent to read AGENTS.md first. Give the agent files, not the page address. Starting from nothing in Lovable, v0 or Bolt? Paste the hardware store website design prompt below instead. Replit can import the repository too, with [steps for starting from a GitHub repo](https://8b.com/templates/for-replit/). **Which parts of the file break if I change them?** Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists. Every hire row needs both faces, and the footer wordmark a --len equal to the name's length. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it. **Can I get a site like this without editing code?** Yes, with [8B's AI website builder](https://8b.com/): you describe the shop in a sentence and its engine designs a new site, not this template. Designing and restyling are free. Publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT. ## Before publishing Replace: social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses). - Find your aisle button in the first screen lead to #departments now; point them to keep it, or point it to your online catalogue or shop. - Open today 8-6 link in the first screen and Open 7 days in the header lead to #visit now; point them to keep them on the opening hours, and update the hours text. - See fixings, See tools, See paint, See garden and See keys links on the department panels lead to #aisles, #hire, #counter, #aisles and #counter now; point them to the matching category page of your online shop, if you have one. - Read the guide, Read the list, Work it out, See the list and Check yours links on the department panels lead to #faq now; point them to a guide or blog page for each topic, or keep them on the questions. - Call the counter, Book by phone and Reserve by phone links lead to a tel: link to the counter phone now; point them to your phone, or a booking page for the classes and hire. - What the counter does and Come and say hello links lead to #counter and #visit now; point them to keep them. - Sign me up button of the newsletter form lead to a script checks the email and swaps the form for a thank-you line; nothing is sent (the form has action="#visit") now; point them to your newsletter service form (Mailchimp, Buttondown, Formspree) or remove the form. - The departments section holds the screen for about four screens of scrolling (one per panel after the first), which is long on a short screen. - The opening's tiles are small photos on a pale ground; they are decorative, so their alt text is empty. - The class dates (18 October onwards) are written into the text and go stale; update them with the year before using the template. - gsap, ScrollTrigger, SplitText and Lenis load from jsDelivr at the end of the body without defer; if the CDN fails, the page stays readable with no motion. ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).