# Free sneaker store website template
> Free HTML sneaker store website template for streetwear and clothing shops, with a lookbook and repairs. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.
Sneaker store website template: one free HTML file for an independent streetwear shop with a single product drop, a priced lookbook, a repair service, two store cards and a Saturday run club. The look is pale green ground, near-black type, one lime accent and heavy uppercase headings. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.
- Page: https://8b.com/templates/strade/
- Live demo: https://8b.com/templates/strade/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/strade/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/sneaker-store-website-template
- Download ZIP: https://8b.com/templates/strade/sneaker-store-website-template.zip
- Template name in the repository: STRADE
- At a glance: One 64 KB index.html with its CSS and JavaScript inside, 10 sections, 13 Unsplash photos credited in CREDITS.md, Host Grotesk and Schibsted Grotesk from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 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/sneaker-store-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/sneaker-store-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/sneaker-store-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/sneaker-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 shop name, euro prices, Porto and Rotterdam details, VAT line. Keep the ids, data-8b-section, data-8b-motion and data-8b-part, the selectors AGENTS.md lists and the two word spans of the contact wordmark. Ask me for missing facts; never invent prices, hours, addresses 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/sneaker-store-website-template my-site`.
## About
A shop that sells clothes and shoes in small runs fits this clothing store website template: a streetwear label with one release at a time, a sneaker boutique, or a local retailer with a repair bench. If you search for a streetwear clothing website template or streetwear website templates free to use, this is one MIT file built around a drop page, not a product grid.
Give the agent the drop facts first: name, price, pair count, sizes, materials, release date and shop link, then both store addresses, hours and repair terms. It replaces the demo euro prices, Porto workshop, Rotterdam stores and VAT line, and points the reminder, bag, repair and run buttons at real pages. Vibe coding in Claude Code or Cursor works when the agent asks for missing prices and hours instead of inventing them.
As a streetwear brand website template it suits a shop with one hero release, a workshop story and a community event. A label that sells many drops from a calendar and credits its artists is closer to the [limited-drop label](https://8b.com/templates/scrawl/) template. This one has no cart, wishlist or login, and the navigation bar has no phone menu. Owners who do not code can use 8B's builder instead.
## Design
- Palette: #f4f7ec (page background and the top bar), #121411 (text, button hover fill, the run club panel and the footer background), #c6ef4e (the accent: button fill, badges, run club paces, open FAQ plus), #e5eadb (icon circles, image frame backing, the closed FAQ plus), #cfd6c3 (dashed rules and form field borders), #ffffff (repair cards, form fields, text on the dark panels), #737869 (declared in :root but not used by any rule in the shipped page), #a9ae9f (run club paragraph and group labels, footer address and small print), #1f231d (dashed rules inside the run club panel and the footer), #5d6254 (spec labels, wear-test column heads, hours labels, contact labels)
- Fonts: Schibsted Grotesk (uppercase display type: headings, look and store names, repair step titles, FAQ questions, the price, the large contact wordmark and the logo, in semibold and bold), Host Grotesk (body text in regular weight, buttons and table text in medium to semibold, and small uppercase labels)
A 12-column grid on desktop. Most sections set a big uppercase heading against a block of text on the far side, and dashed rules separate spec cells, look prices, store rows and FAQ items. The lookbook is a row of 3:4 portrait cards with a priced list under each. The run club and the footer are rounded near-black panels on the pale ground. Photos sit in rounded frames. Below 900 px most sections stack to one column.
The drop photo is cut into tiles that fly together on load. Headings slide in line by line from alternate sides, the drop and store badges pop, and the wear-test and store photos open from a centre column. Lime shows on buttons, badges, pace labels and the open FAQ plus.
## Sections and motion
- **Navigation** (navigation): fixed top bar: wordmark, three links (Shop, Repairs, Stores) and three icon links. Motion: The navigation bar slides up out of view when you scroll down and returns when you scroll up; this keeps working with reduced motion.
- **Drop 07: Concrete Low** (drop): first screen: headline of the product drop, a paragraph, a photo, a spec list and a reminder button. Motion: On load the photo is cut into tiles that start scattered and turned and lock together into the picture, while the headline slides in by line and the badge pops.
- **Five ways to wear October** (lookbook): five outfits with photo, name and three priced pieces, shown as a sideways rail. Motion: The section pins and the row of looks travels sideways as you scroll, for as long as the row is wider than the screen, while each photo drifts slightly inside its frame.
- **Worn on the city before it is sold** (wear-test): heading, paragraph, a tall photo and a wear-test table of five pieces. Motion: The heading slides in by line and the tall photo opens from a centre column as it arrives.
- **Repairs for life** (repair): heading, paragraph and button, then three step cards with photos. Motion: Scrubbed with the scroll, the three step cards start piled on the middle card (the first on phones), each turned a little, and spread into their row.
- **Two stores, one repair bench** (stores): two store cards with photo, address, opening hours table and a directions link. Motion: The heading slides in, each store photo opens from a centre column and each badge pops in.
- **Saturday run club** (club): run club panel: heading, paragraph, button, a night photo and three pace lanes. Motion: Scrubbed with the scroll, each pace line enters from the right and settles at the left, the fast group travelling furthest.
- **Before you ask** (faq): five questions and answers in native elements. Motion: The heading slides in by line; each question is a native details element, so it opens without scripts.
- **Say hello** (contact): large "Say hello" wordmark, a paragraph with email and phone, and a message form. Motion: Scrubbed with the scroll, the letters of the Say hello wordmark start spread across the width and turned, then close into the two words.
- **Footer** (footer): logo, six links, the two store addresses and a small print line
## Good for
- streetwear, sneaker or independent clothing shop
- a brand with a single limited product drop and a release date
- a repair, resale or take-back service attached to a shop
- any local retailer with two locations and a community event
## Questions
**Is there a clothing store website template free to use for client sites?** Yes. It is one index.html under the MIT license, so a freelancer can build a client's shop site from it at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, there is no build step, the photos are Unsplash images and the two fonts are under the Open Font License. CREDITS.md lists them.
**Can this sneaker website template take orders online?** No, not by itself. The bag, saved looks and members icons only scroll to a section, and the file has no cart, wishlist or login. Point them at your cart or checkout page and a member or wishlist page, or remove the icons. The template presents the drop and does not take payment.
**Where does the contact form send its messages?** Nowhere yet. The form needs a name, an email and a message, then shows a thank-you line and clears the fields without sending anything. Connect Formspree or Netlify Forms before publishing, or delete the form and its script. Without JavaScript it posts to the page itself, which also sends nothing.
**How do I give it to Claude Code or Cursor?** Download index.html and AGENTS.md into a folder, open it in Claude Code, Cursor or Codex and paste the prompt from this page after filling its angle brackets. The same files sit in a GitHub template repository, with LICENSE and CREDITS.md, if you prefer to start from there.
**What must I keep when I edit it?** Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the selectors AGENTS.md lists. Lookbook looks can be added or removed, but the repair row is a three-column grid. 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, by another route. [8B's AI website builder](https://8b.com/) designs a new site from a sentence you write, with its own design rather than 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 in Claude and ChatGPT.
## Before publishing
Replace: social preview image, favicon, map, email address, phone number and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses).
- "Get a reminder" button in the drop section lead to #contact now; point them to your release reminder or newsletter sign-up, or your shop page for the product.
- The bag icon in the top bar lead to #drop now; point them to your cart or checkout page (or remove the icon if you do not sell online).
- The saved-looks and members icons in the top bar lead to #lookbook and #club now; point them to a wishlist page and a members or login page, or remove them.
- "Book a repair" button in the repairs section lead to #contact now; point them to your repair booking page.
- "Join a run" button in the run club section lead to #contact now; point them to your run club sign-up or group chat link.
- "Directions" links in the two store cards lead to a Google Maps search for the city only (Rotterdam) now; point them to a map link to each of your stores.
- Contact form lead to action="#contact": nothing is sent, the script only shows a thank-you line now; point them to a form service address (Formspree, Netlify Forms).
- The top bar has no phone menu: below 640 px it keeps the three links and only the members icon (saved looks and bag are hidden), and at 375 px the links are 13 px.
- The bag, saved looks and members icons only scroll to a section; there is no cart, wishlist or login in the file.
- The lookbook rail pins the section; on very short landscape screens the cards get small because their width follows the screen height.
## License
Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 108+, Safari 15.4+, Firefox 121+ (it uses :has(), cascade layers, small/dynamic viewport units).