# Free toy store website template
> Free HTML toy store website template for independent toy shops with repairs, workshops and gift lists. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.
This toy store website template is one free HTML file for an independent toy shop that also runs repairs, Saturday workshops, a swap box and birthday lists. Candy yellow, pink, lime and cobalt sit on white, with notched cards and a photo puzzle that solves itself on scroll. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.
- Page: https://8b.com/templates/squiggle/
- Live demo: https://8b.com/templates/squiggle/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/squiggle/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/toy-store-website-template
- Download ZIP: https://8b.com/templates/squiggle/toy-store-website-template.zip
- Template name in the repository: Squiggle
- At a glance: One 107 KB index.html with its CSS and JavaScript inside, 12 sections, 23 Unsplash photos credited in CREDITS.md, Gabarito and Playpen Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger, MotionPath); 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/toy-store-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/toy-store-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/toy-store-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/toy-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, promise, shelves, prices, dates, hours and photos. Keep the section ids, the classes AGENTS.md lists, nine puzzle tiles in a 3 by 3 grid and the footer wordmark's len set to the new name's length. Ask me for missing facts; never invent prices, dates, tester names, 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/toy-store-website-template my-site`.
### Toy store website design prompt for any AI tool
Use this prompt to build an independent toy shop site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt. It is this template's design as decisions, also saved in a token file agents read. With the template itself, the short prompt is enough.
```text
Build a one-page website for an independent toy shop that also repairs toys, runs workshops and keeps birthday lists, in plain HTML, CSS and JavaScript, with GSAP and ScrollTrigger for scroll motion. Sections in order: navigation, opening, shelves sorted by the questions children ask, child testers, repairs with prices, workshops, a swap box, gift lists, the shopfront and hours, questions, contact, footer. Type: Gabarito for everything, bold for headings, and Playpen Sans for the logo and the testers' quoted verdicts only. Colours: #24201c near-black text on white #ffffff, with candy grounds #fde77d yellow, #f7aacb pink, #a9c34c lime, #f48a3a orange tabs and #fbdde9 blush, and #2d47c6 cobalt for secondary buttons and ribbons. Layout: large cards with 28px corners and pill buttons, one notched corner holding an age or a date, small alternating tilts, flat colour with no blur and no gradients; no stock icons, no three equal feature cards, no centred hero with two buttons. Motion: things start scrambled or covered and settle as you scroll, such as a sliding photo puzzle in the opening; switch scroll animation and smooth scrolling off for reduced motion. One action, Plan a visit, in the opening. Copy is short and concrete. Ask me for repair prices, workshop dates with the year, hours, address and swap rules, never invent them, and list every placeholder. Check: no console errors, works at 390px with 44px tap targets, keyboard focus visible.
```
## About
A toy shop, a children's bookshop or a small kids' venue can use it as a single page: six shelves sorted by question, five child testers, a repair price list, four workshop dates, swap rules, birthday lists and opening hours. People who search for toy store website templates free to use get an MIT licensed index.html with no build step and no CMS.
For a toy store website template for Claude Code or Cursor, vibe coding goes fastest when you give the agent the shop's own facts: what you sell, repair prices, workshop dates with the year, swap rules, hours, address, phone and email. Replace those first, then the 23 photos. The demo's five testers are stock pictures of children, so swap in real ones only with the parents' permission. The workshop dates carry no year, and their weekdays fit 2024, not 2026.
Choose it for a shop that sells toys and also offers services around them. It is not a toys ecommerce website template: there is no cart, checkout or product list, and the form sends nothing until you connect it. Among toy store themes it is a plain HTML file, not a WordPress or Shopify theme. A shop selling flowers fits the [florist](https://8b.com/templates/moth-marigold/) template better.
## Design
- Palette: #ffffff (page background, form fields, the number discs in the gift steps, text on cobalt), #24201c (text on every light ground, field borders and the outline of the Menu button), #fde77d (hours card, contact card, one ground of the tester and workshop cards, the plus discs in the questions, first shutter), #f7aacb (default pill button, gifts card and address card, some badges and card grounds, open question border, second shutter, lens ring), #a9c34c (opening text card, some badges and card grounds, third shutter, tabs of workshops the ball has not reached), #2d47c6 (cobalt buttons (Start a list, Get directions, Send it), the cobalt badges (Puzzles, Wind-up repairs, Open), the ribbons, fourth shutter, focus ring), #f48a3a (orange badges, the age and date tabs, the ball that rolls down the workshop ribbon), #fbdde9 (repair card, one ground of the tester and workshop cards, photo placeholders, outlines of the logo pill, the link bar and closed questions, footer rule, open question fill)
- Fonts: Gabarito (body text, headings, buttons and labels: bold 700 for headings, 500 for leads, 600 for small labels and pills, 400 for body), Playpen Sans (the logo, the footer wordmark (700), the testers' quoted verdicts and the repair note (500))
Flat candy-coloured cards with rounded corners sit on white inside a column up to 1320 px wide. Cards in the testers and workshop rows have one top-right corner cut as a notch that holds a coloured tab with an age or a date. Small pills for categories, prices and rules sit tilted. The opening is a text card beside a framed 3 by 3 photo board. Wavy cobalt ribbons run through the swap box, workshops and footer.
Depth is flat: one soft shadow sits under the ninth puzzle tile until it lands, another under the swap lens, and buttons carry a thin inset edge. Headings are tight bold Gabarito; the logo, wordmark, testers' verdicts and repair note use rounder Playpen Sans. Button labels roll up on hover.
## Sections and motion
- **Navigation** (navigation): wavy logo and wordmark top-left; five section links on wide screens, a Menu button and full-screen overlay on phones. Motion: The bar slides up out of sight when you scroll down and comes back when you scroll up, also with reduced motion.
- **No toy gets a shelf until a kid has tried to break it.** (opening): one held screen: the shop's promise, a lead and two links beside a 3 by 3 photo puzzle that solves itself as you scroll. Motion: The text card and the board rise on load; as you scroll the screen is held for about 170svh while the scrambled board slides back in 12 moves (10 on phones) and the ninth tile drops into the last hole.
- **Shelved by the question, not the age** (shelves): six shelf blocks, each a question kids ask, with a category pill, a line of examples and a square toy photo. Motion: Pinned: the six shelf blocks travel left as you scroll, and each photo leans with the scroll speed and swings upright when it slows.
- **Meet the Test Squad** (squad): five trading cards of child testers, each with an age tab, photo, role and a handwritten verdict. Motion: The five cards start as one fanned stack in the middle of the row and are dealt out one after another to their places as it scrolls in.
- **The toy hospital** (hospital): the toy repair counter: a coloured card with five tilted price tags beside two photos. Motion: The heading slides in, the five price tags drop in tilted and bounce once, and the starburst turns with the scroll.
- **The Saturday tinker table** (tinker): four free Saturday workshops strung on a blue ribbon, with a ball that rolls down it. Motion: An orange ball follows the ribbon as you scroll, and each workshop keeps a green tab and a smaller, tilted photo until the ball reaches it.
- **The swap box** (swap): trade-in credit: heading, three rule pills and a ribbon beside a photo of old toys with a magnifying lens. Motion: A round lens travels over the photo to each note in turn with the scroll, the second and third notes fade in as it arrives, and the ribbon draws itself.
- **Birthday lists that actually work** (gifts): birthday lists in three steps on a candy card with two photos and a burst sticker. Motion: A large burst covers the card at first, then turns and shrinks into the corner while the sticker words pop onto it.
- **1 Example Street** (shop): shopfront photo behind four colour shutters, address, directions button and opening hours. Motion: Four colour shutters cover the shopfront photo and retract one after another, starting with the bottom band, as the section scrolls in.
- **Questions grown-ups ask** (faq): five questions and answers in native details elements. Motion: The heading and the lead slide in, and the plus icon turns on hover and when a question opens.
- **Come and play** (contact): shop address, phone, email and hours note beside an enquiry form (placeholders). Motion: The four contact pills start scattered at angles and settle into a tidy list as the card scrolls in.
- **Footer** (footer): full-width wordmark with a wavy ribbon, five links and the copyright with the Design: 8B credit. Motion: The wavy ribbon under the wordmark draws itself with the scroll.
## Good for
- independent toy shop or children's bookshop
- kids' activity space, workshop or party venue
- any small shop with services around its products (repairs, swaps, gift lists)
- playful brands that want a bright, rounded, candy look
## Questions
**Is this toy shop website template free to use for client work?** Yes. It is one index.html, [a whole shop on a single page](https://8b.com/templates/one-page/), under the MIT license, so a freelancer can ship it for a shop at no cost. GSAP, ScrollTrigger, MotionPathPlugin and Lenis load from jsDelivr. Photos come from Unsplash and the fonts, Gabarito and Playpen Sans, are under the Open Font License; CREDITS.md lists them.
**Where is the toy shop website template free download, and how do I give it to an AI agent?** Download index.html and AGENTS.md from this page or the GitHub repository, put them in a project folder and open it in Claude Code, Cursor or Codex. Paste the prompt from this page. No file yet? Paste the toy store website design prompt below into Lovable, v0 or Bolt; in Bolt, [a button imports the repository](https://8b.com/templates/for-bolt/) instead.
**What must I keep when I edit it?** Keep every section id, the data-8b-section, data-8b-motion and data-8b-part attributes, and the classes AGENTS.md lists for each script. Keep nine puzzle tiles in a 3 by 3 grid. Set the footer wordmark's --len to the number of characters in your shop name.
**Does the contact form send enquiries?** No. The form posts to # and no script handles it, so it sends nothing and shows no thank-you line. Connect Formspree or Netlify Forms, or delete the form and keep the phone and email links. Name, email and message are required fields.
**Can I get a site like this without editing code?** Not this exact file. [8B's AI website builder](https://8b.com/) designs a new site from a one-sentence description, in its own design. Designing and restyling are free. Publishing with hosting and SSL, HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.
**What happens with reduced motion or without JavaScript?** With reduced motion the entrance and scroll animations and smooth scrolling are off: the puzzle shows solved and the shelves sit in a grid. The nav bar still hides on scroll and hover effects still run. Without JavaScript the phone Menu button cannot open and the workshop ribbon is missing; the questions still open.
## Before publishing
Replace: social preview image, favicon, map, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses).
- Plan a visit button in the opening lead to #contact now; point them to keep it on the contact section, or point it to your booking or visit page.
- Meet the Test Squad link in the opening lead to #squad now; point them to keep it, or change it if you rename or remove the testers section.
- Start a list button in the birthday lists section lead to #contact now; point them to your gift-list or wishlist page, or keep it on the contact form.
- Get directions button in the shop section lead to a Google Maps search for Brighton now; point them to the Google Maps link of your shop.
- Phone link in the contact section lead to a tel: link to a placeholder number now; point them to your shop phone in tel: form (+44...).
- Email link in the contact section lead to a mailto: link to a placeholder address now; point them to your shop email.
- Send it button of the contact form lead to a form with action="#" that sends nothing now; point them to your form endpoint (Formspree, Netlify Forms) or remove the form and keep the phone and email.
- The contact form has no handler: it posts to "#" and shows no thank-you line, so connect Formspree or Netlify Forms, or remove it.
- The workshop dates carry no year and their weekdays fit 2024, not 2026; update them before publishing.
- The opening and the shelves hold the screen while you scroll (about 170svh of scroll for the puzzle, the width of the row for the shelves); on very short screens the held card and board can feel tight.
- GSAP, ScrollTrigger, MotionPathPlugin and Lenis load as four synchronous scripts from jsDelivr at the end of the body; the swap section shows one 1390 px photo twice (page and lens, one download).
## 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(), container query units, cascade layers, small/dynamic viewport units).