Free hardware store website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: sixpenny.md, data: sixpenny.json

Hardware store website template: first screen on a phone

About this hardware store website template

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.

At a glance, October 2026. 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.

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 template. Owners who do not code can also try 8B's builder.

Good for:

Independent hardware store or DIY shopKey cutting, paint mixing or repair counterTool hire, garden centre or builders' merchantAny local shop with a long catalogue that wants a friendly, practical look

Turn the hardware store website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

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

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my shop: name, address, year opened, owner and a quote, aisles with stock counts, counter jobs with prices, workshop dates and prices, hire tools with deposits, opening hours, delivery and returns rules, phone, email>. 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.

In a terminal

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.

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.

Hardware store website design and motion

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.

Every value of this hardware store website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the hardware store website page

Navigation
A logo mark, five section links and an Open 7 days link; a menu button opens a full-screen menu
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.
A cloud of product tiles flying past under the heading, then a promise screen with a highlighted sentence
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
Five departments held on one screen, each next panel wiping up over the last, with a guide link and a big letter
Pinned for about four screens of scroll: each next photo panel wipes up over the last while its text rises.
Done while you wait
Six jobs done while you wait, each with a price and a time, beside two photos
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
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
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
Three pairs: a part brought in and the match, sliding together as they rise
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
A portrait of the owner with a short history, a quote and a photo of the small-parts shelves, on a dark ground
The quote rises into view and the shelf photo unveils.
Fix-it Saturdays
Four Saturday workshop cards dealt out of a stack, each with date, price, places left and a phone link
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
Six hire rows; each tag turns over from the buy-new price to the weekend price
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
A shop-front photo that steps back into its half while hours, address, phone, email and a newsletter form come in
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
Six questions as native <details> beside a photo of the parts cabinet
The heading rises, a rule draws above each question, and the photo unveils; opening a question turns its plus into a minus.
Footer
A huge wordmark, the shop's address and hours, contact links, page links and small print
The big wordmark rises into view.

Before you publish the hardware store website site

Replace social preview image, favicon, phone number, email address and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
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.

Questions about this hardware store website template

Is this free for a client's hardware shop?

Yes. It is one index.html, every aisle on a single 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.

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: 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.

Not a hardware store website? More free templates