Free toy 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: squiggle.md, data: squiggle.json

Toy store website template: first screen on a phone

About this toy store website template

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.

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

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 template better.

Good for:

Independent toy shop or children's bookshopKids' activity space, workshop or party venueAny small shop with services around its products (repairs, swaps, gift lists)Playful brands that want a bright, rounded, candy look

Turn the toy 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/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

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my toy shop: what we sell, town and address, hours, repair prices, workshop dates with the year, swap rules, gift-list service, phone, email, legal name>. 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.

In a terminal

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.

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.

Toy store website design and motion

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.

Every value of this toy 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 toy store website page

Navigation
Wavy logo and wordmark top-left; five section links on wide screens, a Menu button and full-screen overlay on phones
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.
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
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
Six shelf blocks, each a question kids ask, with a category pill, a line of examples and a square toy photo
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
Five trading cards of child testers, each with an age tab, photo, role and a handwritten verdict
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
The toy repair counter: a coloured card with five tilted price tags beside two photos
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
Four free Saturday workshops strung on a blue ribbon, with a ball that rolls down it
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
Trade-in credit: heading, three rule pills and a ribbon beside a photo of old toys with a magnifying lens
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
Birthday lists in three steps on a candy card with two photos and a burst sticker
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
Shopfront photo behind four colour shutters, address, directions button and opening hours
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
Five questions and answers in native details elements
The heading and the lead slide in, and the plus icon turns on hover and when a question opens.
Come and play
Shop address, phone, email and hours note beside an enquiry form (placeholders)
The four contact pills start scattered at angles and settle into a tidy list as the card scrolls in.
Footer
Full-width wordmark with a wavy ribbon, five links and the copyright with the Design: 8B credit
The wavy ribbon under the wordmark draws itself with the scroll.

Before you publish the toy store website site

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

Questions about this toy store website template

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

Not a toy store website? More free templates