# Free tile store website template
> Free HTML tile store website template for tile shops and showrooms, with a materials table and sample form. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.
Tile store website template: one free HTML file for a tile shop or bathroom studio with a showroom, free samples and its own fitters. It has a bond demonstration, a materials table with prices, a sample form and five house glazes, in a white grid ruled in black with colour blocks. AGENTS.md lets Claude Code, Cursor or Codex adapt it.
- Page: https://8b.com/templates/tegel/
- Live demo: https://8b.com/templates/tegel/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/tegel/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/tile-store-website-template
- Download ZIP: https://8b.com/templates/tegel/tile-store-website-template.zip
- Template name in the repository: TEGEL
- At a glance: One 99 KB index.html with its CSS and JavaScript inside, 12 sections, 26 Unsplash photos credited in CREDITS.md, Radio Canada Big from Google Fonts, GSAP 3.13.0 (ScrollTrigger); 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/tile-store-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/tile-store-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/tile-store-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/tile-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, the Belfast details, the materials and prices, the four rooms and the fitters. Keep the section ids, the classes AGENTS.md lists, exactly four room photos and equal bond rows. Ask me for missing facts; never invent prices, guarantees, reviews 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/tile-store-website-template my-site`.
### Tile store website design prompt for any AI tool
Use this to build a tile store site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It writes this template's design as decisions. With the template itself, the short prompt above is enough.
```text
Build a one-page website for a tile shop and showroom that sells through free samples and its own fitters, not a basket. Sections in order: navigation, opening, a bond demonstration showing stack, half and third bond, a materials table with prices per square metre, finished rooms, a sample request form with chips, house glazes, the fitters, a five-step service rail, questions, contact, footer. Type: Radio Canada Big only, heavy uppercase headings in a tight line, semibold tracked 12 px labels, regular 16 px body. Colours: #ffffff ground, #121212 for text, rules and primary buttons, #ffcf00 yellow, #1858b8 blue and #e1251b red as solid blocks, #5c5c5c for captions. Layout: every section is a grid whose two-pixel gaps show the near-black ground, so the page reads as ruled cells with colour blocks beside text and photos. No gradients, no rounded cards, no three icon cards, no centred hero with two buttons. Motion: one idea, colour fields wipe across cells and the bond rows slide sideways while pinned; respect prefers-reduced-motion by turning every animation off. Copy: short and concrete, from the shop's real facts. Ask me for prices per square metre, sample terms, glazes, fitters, guarantee, address and hours; never invent them, leave visible placeholders. One primary action, request free samples, repeated in the bar, opening and contact. Mobile: check at 390 px, grids fall to one or two columns, tap targets of at least 44 px. Acceptance: no console errors, keyboard focus visible, list every placeholder.
```
## About
A showroom page has to answer a few questions in order: what the tiles are made of, what they cost per square metre, where each can go, what finished rooms look like and how to get a sample. As a tile shop website template this one does that in a single scroll. A bathroom showroom website template, a ceramic tiles website template or any tile business website with its own fitters can keep the structure.
Vibe coding this tile store website template for Claude Code or Cursor goes fastest when you hand the agent the facts only the shop has: materials and prices per square metre, finished jobs, sample terms, glazes, fitters, guarantee, delivery, returns and legal name. The demo invents all of them. Replace the Belfast details first, and leave the section ids and the classes AGENTS.md lists alone. Check the technical tips in the questions, such as the R10 slip rating, against your own trade. [The vibe coding guide](https://8b.com/templates/vibe-coding/) compares other agents.
Choose this base when the business sells through showroom visits, free samples and fitting, not through a basket. A designer who sells colour advice will find the [interior colour studio](https://8b.com/templates/pervenche/) template closer. A shop with hundreds of lines needs product pages and a real cart, which this one-page file lacks. One weak spot: the opening screen gives Saturday hours that differ from the contact section, so make them agree.
## Design
- Palette: #ffffff (page ground and the fill of every cell between the rules, button text on black, text of checked sample chips and lit step numbers), #121212 (text, the rules between cells, primary buttons, checked sample chips, lit step numbers, the black wall cell and the Ink glaze field), #ffcf00 (yellow: the blocks in the navigation bar, opening and contact, button hover wipe, current-section underline, active bond and room markers, the current step, guarantee and phone cards, the Saffron glaze), #1858b8 (blue: the block in the opening and the strip beside the samples form, the moving step marker, focus outlines on buttons and fields, the Cobalt glaze), #e1251b (red: end of the navigation bar, blocks in the opening, materials, contact and footer, the Signal glaze and wall cells), #d9d9d9 (grey: the table header row, the Chalk glaze field, one wall cell and the ground behind the glaze photos), #5c5c5c (captions and descriptions in small text, and the No cells in the materials table)
- Fonts: Radio Canada Big (the only typeface: weights 400 to 700; heavy uppercase headings, semibold tracked labels at 12 pixels, regular 16 pixel body text and a widely spaced wordmark)
Every section is a CSS grid whose two pixel gaps show a near-black ground, so the page reads as ruled cells. Narrow empty cells run down the left and right edges, and blocks of blue, yellow and red fill cells beside the text and photos. Headings are heavy uppercase in a tight line. Below 900 pixels the grids fall to one or two columns, the left strip goes and a thin right column carries the colour blocks.
This tile website design rations colour to three blocks, yellow, blue and red, that wipe in as fields. The [exposed grid lines](https://8b.com/templates/brutalist/) are the near-black background of each section showing through two pixel gaps. Buttons fill yellow from the left on hover.
## Sections and motion
- **Navigation** (navigation): wordmark with a yellow block, six links, sample box and basket icons, and a menu button on phones. Motion: The navigation bar slides away when you scroll down, returns on scroll up and underlines the link of the section in view.
- **Every wall starts as a grid.** (opening): one screen of ruled cells: department links, opening hours, a three-line h1, a paragraph and buttons, and a red tiled bathroom photo, between blocks of blue, yellow and red. Motion: On load the blue, yellow and red fields wipe in from the left one after another, the photo opens from a cut and the text rises; there is no scroll scene here.
- **One tile, three walls** (bonds): a wall of ruled cells that shifts row by row from stack bond to half bond to third bond while the section is held. Motion: Pinned for about two screens of scrolling: the four rows of the cell wall slide sideways from stack bond to half bond to third bond and the matching bond in the list lights up.
- **What a tile is made of** (materials): a table of six tile materials with where each can go and a price per square metre. Motion: The heading and the seven table rows start offset left and right in turn and settle as they rise, while a red field wipes in.
- **Four rooms, one grid** (rooms): four finished bathrooms in a four-cell stage that recomposes so each takes the large cell in turn, with a yellow marker on its caption. Motion: Pinned for about three screens: four photos sit in clipped cells whose borders move so each room takes the large cell in turn, with a yellow marker beside its name.
- **Five samples, free** (samples): a free-sample form: twelve tile chips (up to five), name, email and postcode, beside a shelf photo. Motion: The twelve sample chips open one after another from their upper-left corners and a blue field wipes in from above.
- **Five house glazes** (glazes): five house glaze bays that travel sideways on one held screen, each colour field rising as the bay crosses the middle. Motion: Pinned while the row of five bays travels sideways, for as far as the row overflows the screen (about one screen on a laptop, less on a wide monitor), and each bay's colour field rises as the bay comes in from the right.
- **Laid by our own fitters** (fitters): three fitter cards with photo, name and speciality, a guarantee on a yellow field. Motion: The three fitter cards open in turn from their upper-left corners and the yellow guarantee field wipes in from the right.
- **From a floor plan to a finished wall** (service): five numbered steps of a job; a blue marker travels along the rule and the step it reaches turns yellow. Motion: A blue marker moves along the rail above the five steps, or down the left edge on a phone, and each step it passes turns its number black, the current one turning yellow.
- **Before you order** (faq): six questions and answers (native ) beside a yellow card with the phone number. Motion: The heading and the six questions slide in offset and settle, and the yellow phone card wipes in from the bottom.
- **Come and stand on them** (contact): "Come and stand on them" with a showroom photo, address with directions, hours, phone and email on a grid with yellow and red fields. Motion: As the section arrives the showroom photo widens from a small window to the full cell while a red block slides down and a yellow one slides across.
- **Shop** (footer): wordmark with a short description, three link columns (shop, studio, visit), a red field, and the legal line with the Design: 8B credit. Motion: The three link columns settle from an offset and a red field wipes in from above.
## Good for
- tile shop or showroom
- bathroom or kitchen fitter, flooring or stone supplier
- building merchant, ceramics maker or interiors studio that posts samples
- any shop that wants a bold, gridded look with primary colour blocks
## Questions
**Is this a free tile website template I can use for client shops?** Yes. It is one index.html under the MIT license, so a freelancer can ship it for tile shops at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, and there is no build step. Photos are Unsplash images and the font is under the Open Font License; CREDITS.md lists them.
**Does it work as a bathroom showroom website template without an online shop?** Yes. It is one page with no product pages, search or checkout, built around a sample request and a visit to the showroom. The basket icon in the navigation bar is decoration: it jumps to the start of the page and its count stays at 0. Link it to your shop or delete it.
**Where does the sample form send its requests?** Nowhere yet. It needs at least one chip, a name, an email and a postcode, allows at most five chips, then shows a thank-you line and clears the fields. To receive requests, connect Formspree or Netlify Forms with the steps in AGENTS.md, or remove the form and its script.
**Where is the tile store website design prompt, and how do I use it?** Below the short prompt sits a longer tile store website design prompt for any AI tool. With the template, put index.html and AGENTS.md in an empty folder with the curl lines in AGENTS.md, and tell the agent to read AGENTS.md first. Give it the files, not the page address. Cursor reads AGENTS.md too, as [its folder setup](https://8b.com/templates/for-cursor/) shows.
**Which parts 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 for each script. Keep four room photos, in list order, and equal cell counts in the bond rows. Keep the header comment and the 8B meta tag. Keep the Design: 8B footer link unless the site owner asks to remove it.
**Can I get a tile shop site like this without editing code?** Yes, with [8B's AI website builder](https://8b.com/). You describe the shop in a sentence and it 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 runs inside Claude and ChatGPT too.
## Before publishing
Replace: social preview image, favicon, contact form (sends nothing yet), phone number, map, email address and social media links, plus the invented demo facts (prices, dates, addresses).
- Free sample button in the opening lead to #samples (the sample form) now; point them to your sample request page, or keep it on the form.
- Visit the showroom link in the opening lead to #contact now; point them to keep it on the contact section, or your appointment booking page.
- Sample box icon in the top bar lead to #samples now; point them to your samples or catalogue page.
- Basket icon in the top bar lead to #opening, with a count of 0 that nothing updates now; point them to your shop basket, or remove the icon if you do not sell online.
- Directions link in the contact section lead to a Google Maps search for the city only now; point them to the map URL of your showroom.
- How a job runs link in the fitters section lead to #service now; point them to keep it, or your fitting page.
- The sample form is a demo and sends nothing; connect it to Formspree, Netlify Forms or your own endpoint.
- The basket icon is decoration: it goes to the top of the page and its count is never updated.
- The opening hours line says Monday to Saturday 9 to 5:30 while the contact section lists Saturday until 16:00; make them agree.
- The top bar hides while you scroll down and returns on scroll up, also with reduced motion on.
- The bonds (two screens of scrolling), rooms (three screens) and glazes (about one screen on a laptop) sections hold the screen for long stretches of scrolling, which feels long on a phone.
## 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 101+ (it uses cascade layers, small/dynamic viewport units).