Margin Books. Free independent bookshop HTML & Astro template

About Margin Books

Margin is built around the shelf: a compact literary masthead, broad bookshop photograph, genre shortcuts and book-cover rows. Burgundy, paper white and muted gold accompany readable Literata and Source Sans 3 derivatives. The catalogue, thematic reading lists and practical ordering information give the inner pages their own purpose.

Best suited to: Independent bookshops and literary retailers presenting accurate catalogues, reading collections, event information and general customer enquiries.

Desktop and mobile screenshots

Captured from version 1.0.0 on 30 October 2026. Open a screenshot to inspect the full page.

Choose your download

Both ZIPs contain the same 10-page design. Confirm your email to download. Newsletter emails are optional; no account or license key is needed.

What’s in the design

• Ten complete pages cover Home, Our Bookshop, Books, The Orchard Notebook, Reading Lists, Events, An Evening of Reading, Ordering & Collection Questions, Visit & Contact and 404.
• The catalogue combines case-insensitive keyword, genre and format filters, with count, reset and empty state across six original fictional books. All records remain visible without JavaScript.
• The browser-local reading list supports save, individual remove, clear and reload. It accepts recognised IDs only, handles malformed/unavailable storage and synchronises changes across tabs in the same browser.
• The Orchard Notebook has a full illustrative book record, original cover, sample format/extent/GBP price and original concept description. No real publication, ISBN, author biography or copied blurb is used.
• Events filters three clearly fictional records by type. An Evening of Reading has a full outline, sample running order and practical attendance questions; other records lead to an enquiry.
• Ordering & Collection explains title/edition, price, stock and fulfilment questions, with a printable checklist and FAQs. Contextual book/event links preselect the general email form without confirming an order or place.

Verified page layouts

These 10 pages are included in both archives. Each link opens the live preview.

• Home ↗index.html
• Our bookshop ↗bookshop.html
• Books ↗books.html
• The Orchard Notebook ↗orchard-notebook.html
• Reading lists ↗reading-lists.html
• Events ↗events.html
• An Evening of Reading ↗reading-evening.html
• Ordering & collection questions ↗ordering.html
• Visit & contact ↗visit.html
• 404 ↗404.html

How bookshop enquiries work

The form validates a name, email and question, then presents an encoded mailto link for review. It does not send a message, place an order, reserve stock, sell a ticket or take payment. Replace [email protected] with a monitored address.

Known book/event/visit query values can preselect the subject; unknown values are ignored. Editing a field hides the previous draft. Submit is initially hidden and disabled until the handler is installed; direct email links remain available without JavaScript.

The reading list stores only recognised book IDs locally, under margin:reading-list:v1. It is not transmitted to a bookshop or shared across devices. Storage failures produce feedback; previously saved content may remain unchanged.

Set up the Astro edition

Extract the source ZIP and run these commands from its folder:

npm ci
npm run dev
npm run check
npm run build

The build produces a dist/ folder for static hosting. The source includes its shared template kit under vendor/template-kit, so it builds independently of our development workspace. Astro 7.4.4 and the Astro checker 0.9.12 are pinned; TypeScript 6.0.3 is the latest supported by that checker’s declared peer range.

Before you launch

• Choose HTML for direct file editing, or Astro for shared layouts and source-driven content.
• Replace fictional catalogue records, cover art, author information, editions, prices, event details and shop information with accurate authorised content. Maintain rights/credits for real covers and photography, and verify availability/terms through the real shop.
• Edit books in src/books.json, events/FAQ/navigation in src/site.ts, original cover geometry in Cover.astro and interactions in browser.js. Keep IDs, filters, enquiry subjects and stored-list records aligned. Check search combinations, empty/reset, reload/storage denial/external events, event filtering, native validation and stale drafts.
• Replace imagery with licensed content. Keep responsive variants, intrinsic dimensions, alt text and ASSETS.md credits aligned.
• Set PUBLIC_SITE_URL to the real domain/folder URL with a trailing slash for canonical/social metadata, robots.txt and a 9-page sitemap. Leave PUBLIC_PREVIEW unset for production.
• Upload the entire HTML folder or Astro dist/. Configure unknown paths to return 404.html with HTTP 404. Test enquiries or configure a separately tested delivery route if direct sending is required.

No checkout, payment processing, live stock, order confirmation, event ticketing, accounts, subscription purchase, cross-device list or message-delivery backend. Saved books and prepared enquiries do not reserve anything.

License and assets

The original template code is released under the included MIT license. It permits personal and commercial use; retain the license notice when redistributing the code. Visible footer attribution is optional.

Bookshop photography by Serra Nur Çevikdal, Rachel Claire and Gorkemography retains the Pexels License. Original fictional book concepts, cover drawings, identity, code and writing are MIT. Margin Serif and Sans are renamed Literata and Source Sans 3 WOFF2 derivatives with complete OFL notices. Pexels License. Full asset credits.

Release verification

The page inventory, screenshots and download manifests document the included layouts and assets. The HTML and independent Astro editions contain the same design and license notices. Customization requires its own accessibility, content and performance checks.

Version 1.0.0, reviewed 30 October 2026. Live preview. Plain HTML checksum. Standalone Astro source checksum. Margin, its six books and authors, editions, prices, event programme and visit details are fictional illustrative concepts. No actual stock, publisher, ISBN, writer appearance or bookshop premises is claimed. Photos depict separate bookshops.