Free sneaker store website template
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: strade.md, data: strade.json
About this sneaker store website template
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.
At a glance, October 2026. 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.
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 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.
Good for:
Turn the sneaker 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/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.mdPrompt for the agent:
Read AGENTS.md, then edit index.html. Make this the site for <my shop: name, city, the current drop with name, price, pair count, sizes and release date, look prices, repair terms, two store addresses and hours, run club time, shipping and returns, email and phone>. 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.In a terminal
npx degit 8bsite/sneaker-store-website-template my-siteSneaker store website design and motion
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 labelsFonts
- 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.
Every value of this sneaker 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 sneaker store website page
- NavigationFixed top bar: wordmark, three links (Shop, Repairs, Stores) and three icon links
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 LowFirst screen: headline of the product drop, a paragraph, a photo, a spec list and a reminder button
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 OctoberFive outfits with photo, name and three priced pieces, shown as a sideways rail
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 soldHeading, paragraph, a tall photo and a wear-test table of five pieces
The heading slides in by line and the tall photo opens from a centre column as it arrives.
- Repairs for lifeHeading, paragraph and button, then three step cards with photos
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 benchTwo store cards with photo, address, opening hours table and a directions link
The heading slides in, each store photo opens from a centre column and each badge pops in.
- Saturday run clubRun club panel: heading, paragraph, button, a night photo and three pace lanes
Scrubbed with the scroll, each pace line enters from the right and settles at the left, the fast group travelling furthest.
- Before you askFive questions and answers in native <details> elements
The heading slides in by line; each question is a native details element, so it opens without scripts.
- Say helloLarge "Say hello" wordmark, a paragraph with email and phone, and a message form
Scrubbed with the scroll, the letters of the Say hello wordmark start spread across the width and turned, then close into the two words.
- FooterLogo, six links, the two store addresses and a small print line
Before you publish the sneaker store website site
- Replace social preview image, favicon, map, email address, phone number and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
- "Get a reminder" button in the drop section lead to
#contactnow; 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
#dropnow; 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 #clubnow; 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
#contactnow; point them to your repair booking page. - "Join a run" button in the run club section lead to
#contactnow; 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 linenow; 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.
Questions about this sneaker store website template
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 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.
