Self Storage Website Template

About this self storage website template

The 20 pages you get

Home /

Headline, size and viewing buttons, a trust line and the "what are you storing?" card with +/− counters and the suggested unit. Then promises, five kinds of storage, the estimator, the moving-in steps, the security band, unit vs container vs garage, reviews, packing guides, FAQ search and a reserve band.

Storage /storage/

All five kinds of storage with sizes and price from.

Storage pages /storage/…/

Five pages: household, business, student, drive-up units, and document and archive storage. Photos, price from, what’s included, who it suits, a review, a reserve button that pre-selects the unit and a link that loads a matching preset into the estimator.

Sizes and prices /unit-sizes/

The full estimator with every item as a counter, eight unit sizes drawn to the same scale with price and what each holds, what the monthly price includes and the contents cover table.

Security and access /security-and-access/

Six layers of security, gate and reception hours, and what can’t be stored.

About /about/

The building’s story, the numbers, every review and a registration line for your own details.

Packing guides /journal/

A card list. Add a Markdown file and it appears here and in the sitemap.

Packing guides /journal/…/

Four written guides: packing a storage unit, glass and china, storing furniture, and how many boxes a move takes. Each shows how many boxes the job needs.

FAQ /faq/

Fifteen questions with search as you type over questions and answers.

Reserve a unit /contact/

Reservation or viewing request with unit size, kind of storage, what you’re storing, cover, padlock and move-in date, filled in from the estimator or any reserve button.

Privacy and storage terms /legal/…/

Two starter legal pages on a shared layout.

404 /404

Designed, with a way back to home and the price list.

What is in the build

• A space estimator: item counters or a preset (student room, 1-bed flat, 3-bed house, business stock) give cubic feet and the smallest unit that holds them, drawn to scale; move-in date, contents cover and a padlock then give the first payment line by line, the monthly total, the next payment date and the half-price saving
• A hero card with six common items that shares one list with the estimator below it, so both always agree
• Every unit size drawn to the same scale on the sizes page, with price and what it holds
• Every item volume, unit size, price, cover level, offer, move-in cut-off and closed day in src/data/units.ts, with the maths in one tested file
• An FAQ searched as you type, and reviews tagged with unit size, months stored and reason
• Storage types and packing guides as content collections, and every business fact in one file
• Real storage corridor, roller door and packing photography, checked for faces and brands
• One accent colour and two fonts rebrand the whole site; Vitest and Playwright suites included

The design decision

Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.

The world

Cool white ground with pale grey blocks and one dark roller-shutter band, Familjen Grotesk over Reddit Sans, real photography of unit corridors, roller doors and packing, and one roller-door orange accent used as a fill.

The mechanic

Item counters or a preset give cubic feet and the smallest unit that holds them, drawn to scale; move-in date, contents cover and a padlock then give the first payment line by line, the monthly total and the half-price saving, and the reserve button pre-fills the form. Motion is one quiet reveal.

Loud channel

Imagery

Imagery. Storage unit corridors, roller doors, packing boxes, trolleys and loading bays

Type & palette

Familjen Grotesk · Reddit Sans

#f7f8fa #16191f #e8590c

Who it is for

Built for independent self storage facilities, container storage yards moving indoors, and business storage or archive operators. It suits an owner who wants customers to size, price and reserve a unit online instead of ringing reception, and it works in other markets by changing the sizes, prices and currency in one file.

Under the hood

• Astro 7 · static output, zero client framework
• Tailwind 4 · one @theme block holds the palette
• MDX content collections for the blog
• GSAP + Lenis for the scroll work, reduced-motion aware
• Self-hosted woff2 — no Google Fonts request
• Sitemap, canonicals and per-route meta wired
• Vitest + Playwright suites in the repository
• Zero third-party requests · strict CSP-ready

How to get started

1. 01 Accept the repository invite and clone it.
2. 02 Run npm install, then npm run dev.
3. 03 Replace the content in src/data/ with your own — that is where the brand, the copy and every list live.
4. 04 Swap the images in public/images/ and the palette in the @theme block.
5. 05 Run npm run build and deploy dist/ anywhere static.

Questions