Free repair shop website template

Live demo GitHub Download ZIP Use this template

Repository: github.com/8bsite/repair-shop-website-template · Live demo: 8bsite.github.io/repair-shop-website-template/ · MIT license

Reflow template: first screen on a phone

About this template

Reflow is a repair shop website template for a phone and laptop business with a walk-in bench, free diagnosis, price list, refurbished stock, business pickups and repairs by post. It suits phone repair and computer repair alike; consoles and tablets are already on its price list.

A one-page site for a phone and laptop repair shop with a free diagnosis, a price list, refurbished stock, business pickups and repairs by post. Near-black and white with one electric blue; the wordmark is built from rounded dashes that stretch and flood the screen on the first scroll, and a blue selection scans the checklist, crosses the pickup schedule and reads along the reviews.

Good for:

Phone, laptop or computer repair shopElectronics, console or watch repairRefurbished device shopAny walk-in service with a price list and a booking form

Free for personal and client work under the MIT license. In collections: one page website templates, github website templates, website templates with animation, brutalist website templates.

How to use the repair shop website template

With an AI coding agent

Download the files into your project (Windows PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/repair-shop-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/repair-shop-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/repair-shop-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/repair-shop-website-template/main/CREDITS.md

Then give the agent this prompt:

Read AGENTS.md, then edit index.html. Use this template as the base for a site for <your repair business: what you fix, where you are, opening hours, prices, how to book>. Keep the layout, the motion and the single-file format; replace the brand name and the dash wordmark, copy, photos, prices, times, stock, links and contacts, and recolour it through the CSS variables if needed.

Give the agent the file, not a link. AGENTS.md says what to keep and what to replace. Step by step: templates for Claude Code.

In a terminal

npx degit 8bsite/repair-shop-website-template my-site

No code

Download the ZIP, edit index.html and drag its folder onto Netlify Drop, or click Use this template and turn on GitHub Pages.

Repair shop website design and motion

Palette

#0e0e0e near-black grained sections#f5f5f5 off-white sections, headings#d0d0d0 text on dark, wordmark#8e8e8e muted text on dark#575757 muted text on light#0000ff electric blue highlights#1b1b1b hairlines on dark#e2e2e2 hairlines, form panel

Fonts

Instrument Sans: headings and body, very large and tight
TikTok Sans: condensed uppercase labels and buttons

A four-column grid where near-black and off-white sections take turns. Headings step across the columns like a staircase. Rounded dashes are the motif: they build the wordmark and mark buttons, time bars, steps and the footer rule. Electric blue appears only as a text selection, and photos sit in small, barely rounded tiles.

Motion runs on scroll; the list of sections below says what moves in each.

What is on the page

Navigation
Top bar: dash mark and name, opening hours, section links, Book a repair button; phone menu overlay
Reflow: Phone and laptop repair, done at the window while you watch.
Two screens: a dash-built wordmark with headline and contact bar, then a staircase statement with three photos (demo: REFLOW, "Most broken things are fixable.")
Smooth scrolling throughout; small uppercase lines spread word by word to full width. On the held first screen the dash wordmark stretches and floods white, then staircase words slide in over rising photos.
Fifteen minutes, free, out loud.
Service explainer: staircase heading, paragraph and a twelve-row checklist with results and a quote (demo: the free diagnosis)
Pinned on large screens, a blue band steps down the twelve checks as you scroll, turning each from Queued to its result.
Price wall
Price list table grouped by device, each row with models, a time bar and a price (demo: Price wall)
As each device group appears, its time bars draw from the left, and a blue selection sweeps over the cheaper-price promise.
Fixed at the window.
How-we-work block: staircase heading over a wide photo cut into four strips, three columns of text (demo: "Fixed at the window.")
Tied to scroll, four strips of the workshop photo slide from staggered heights into one picture.
Three grades of part. You choose, and the receipt names the one we fitted.
Comparison table of three options with four rows and an example price (demo: Original, Certified, Value parts)
As the comparison table comes into view, the dash beside each row label draws in from the left.
Second life
Horizontal shelf of numbered products with photo, specs, price and a Reserve link (demo: five refurbished devices)
The section pins and the shelf of five refurbished devices runs sideways as you scroll.
For offices and schools: we collect on a weekly route, leave a loan device for every one we take and invoice once a month.
Business offer with a weekly schedule drawn as bars on an hour grid (demo: office and school pickups, Monday to Friday)
Tied to scroll, a blue cursor sweeps the hour grid; pickup bars it passes turn dark, the current one blue.
Post it.
How it works: four steps under one dashed line and a button (demo: repair by post)
The four dashed step lines draw in from the left, one after another, as the steps come into view.
Reviews
Three customer quotes in large type, each with name and device
Tied to scroll, a blue selection box jumps word by word along each quote, as if someone were reading it.
Before you ask.
Questions and answers (native <details>)
Come to the bench.
Contact and booking: staircase heading, address, hours, phone and email, a photo and a booking form (placeholders)
Tied to scroll, the heading grows from one small line at the top into a big three-word staircase.
Visit
Dashed rule, one-line description, address, contact and page links, copyright and the Design: 8B credit
The dashed rule at the top of the footer draws in dash after dash as it appears.

What is inside

Files: index.html (108 KB, CSS and JavaScript inside), AGENTS.md, CREDITS.md, LICENSE
Motion: GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
Fonts: Instrument Sans and TikTok Sans from Google Fonts (SIL Open Font License)
Photos: 11 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
Browsers: Chrome and Edge 108+, Safari 16+, Firefox 110+ (it uses container query units, cascade layers, small/dynamic viewport units).
Replace before publishing: Social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
License: MIT

Good to know

One page, no CMS: texts and prices are edited in the HTML, and there is no checkout or payment built in.
Book a repair buttons in the nav, the first screen and the footer lead to #visit now; point them to your booking page, or keep #visit if the form on the page is connected.
Reserve links on the five refurbished devices lead to #visit now; point them to each device's product or checkout page in your shop.
Request a box button in the repair-by-post section lead to #visit now; point them to your mail-in request form or booking page.
Open an account button in the business section lead to mailto:fleet@reflow.example now; point them to your business-accounts email or sign-up form.
The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
The diagnosis checklist pins only on desktops at least 760 px tall; on phones and shorter screens the band runs while the list scrolls past.
The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this repair shop website template

Can I change the prices and repair times?

Yes. The price wall is an HTML table grouped by device; each row has a repair, its models, a bench time in minutes that sets its bar length, and a price.

Does the booking form send requests?

Not yet. It checks for a name and a phone number or email and shows a confirmation line. Connect a form service such as Formspree or Netlify Forms to receive bookings.