Free tile 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: tegel.md, data: tegel.json

Tile store website template: first screen on a phone

About this tile store website template

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.

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

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

Good for:

Tile shop or showroomBathroom or kitchen fitter, flooring or stone supplierBuilding merchant, ceramics maker or interiors studio that posts samplesAny shop that wants a bold, gridded look with primary colour blocks

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

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my tile shop or bathroom studio: name, town, showroom address and hours, materials with prices per square metre, finished jobs, sample terms, fitters and guarantee, delivery and returns, legal name and company number>. 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.

In a terminal

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.

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.

Tile store website design and motion

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 are the near-black background of each section showing through two pixel gaps. Buttons fill yellow from the left on hover.

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

Navigation
Wordmark with a yellow block, six links, sample box and basket icons, and a menu button on phones
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.
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
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
A wall of ruled cells that shifts row by row from stack bond to half bond to third bond while the section is held
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
A table of six tile materials with where each can go and a price per square metre
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
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
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
A free-sample form: twelve tile chips (up to five), name, email and postcode, beside a shelf photo
The twelve sample chips open one after another from their upper-left corners and a blue field wipes in from above.
Five house glazes
Five house glaze bays that travel sideways on one held screen, each colour field rising as the bay crosses the middle
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
Three fitter cards with photo, name and speciality, a guarantee on a yellow field
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
Five numbered steps of a job; a blue marker travels along the rule and the step it reaches turns yellow
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
Six questions and answers (native <details>) beside a yellow card with the phone number
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
"Come and stand on them" with a showroom photo, address with directions, hours, phone and email on a grid with yellow and red fields
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
Wordmark with a short description, three link columns (shop, studio, visit), a red field, and the legal line with the Design: 8B credit
The three link columns settle from an offset and a red field wipes in from above.

Before you publish the tile store website site

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

Questions about this tile store website template

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

Not a tile store website? More free templates