Free stationery shop 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: quire.md, data: quire.json

Stationery shop website template: first screen on a phone

About this stationery shop website template

Stationery shop website template: one free HTML file for an independent stationer, with five shelves, a paper library in tabs, new arrivals, makers, letterpress printing, a monthly subscription and Thursday workshops. White pages, ink-black panels and one lilac accent. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

At a glance, October 2026. One 93 KB index.html with its CSS and JavaScript inside, 12 sections, 22 Unsplash photos credited in CREDITS.md, Stack Sans Headline and Stack Sans Text from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.4 smooth scroll loaded from jsDelivr.

A stationer, paper shop or letterpress studio can take this stationery shop website template for Claude Code or Cursor free of licence fees, for its own site or a client's. Many results for stationery templates free are printable sheets; this one is a working shop page with shelves, a paper library, a subscription and workshop bookings. A bookshop, gift shop or craft supplier with a handmade range fits the same structure.

Vibe coding this with Claude Code, Cursor or Codex starts with facts only the shop has: address, hours, papers and prices, makers, print runs, subscription tiers and workshop dates. The agent should replace the Ash Row address first and set each --len to the new line's character count, then rewrite the shelves, the four paper tabs and the Thursday cards. It keeps the section ids and the AGENTS.md classes, and never invents prices or dates.

It suits a shop that mixes browsing, a monthly parcel and teaching evenings. A showroom that sells large objects and draws plans for customers is closer to the lighting showroom template. The weak spot is selling: no cart or checkout, and the hold, order, subscription and booking buttons lead to the contact form until you link your own. With reduced motion or without JavaScript, the shelves plate shows only its last photo. For a site without code, 8B's builder designs one from a sentence.

Good for:

Stationery shop or paper storeLetterpress or print studioIndependent bookshop, gift shop or craft supplies storeAny small shop with a subscription, workshops and a handmade range

Turn the stationery shop 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/stationery-shop-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/stationery-shop-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/stationery-shop-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/stationery-shop-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my shop: name, address, opening hours, shelves or ranges, the papers people can try, with prices, new arrivals, makers I buy from, a made-to-order service, subscription tiers, workshop dates, how people reserve>. Replace first the Ash Row address, hours, prices and dates. Keep the section ids, the classes AGENTS.md lists, the five shelf rows paired with five photos, the four paper tabs and panels, and each --len. Ask me for missing facts; never invent prices or dates.

In a terminal

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

Stationery shop website design prompt for any AI tool

Use this to build a stationery shop site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It is this template's design written as decisions; with the template itself, the short prompt above is enough.

Build a single-page website for an independent stationery shop in plain HTML, CSS and JavaScript, with GSAP and ScrollTrigger from a CDN and no build step. Audience: people who buy good paper, pens and notebooks, and want a monthly parcel or an evening workshop. Sections in order: navigation, opening, five shelves, a paper library in four tabs, new arrivals, makers, letterpress printing, a monthly subscription with three tiers, Thursday workshops, questions, visit with an enquiry form, footer. Type: Stack Sans Headline at weight 500 with tight negative tracking for headings and prices; Stack Sans Text for body text and small uppercase labels. Colours: white #ffffff page ground, ink #151515 for text and the black panels, grey #6b6b6b for secondary text, light grey #f3f3f3 for surfaces, lilac #d7a6e5 as the only accent. Layout: section heads on a 12-column grid, rounded ink panels for the paper library, subscription and footer, hairline rules, corners of 8, 16 or 28 px. Avoid purple gradients, shadows, three identical icon cards and a centred hero with two buttons. Motion: one idea, paper being turned over: photos wipe up over each other and cards arrive tilted then straighten; everything calms under prefers-reduced-motion. Ask me for address, hours, papers and prices, makers, subscription tiers and workshop dates; never invent them, leave visible placeholders. With no cart, every buy or book button leads to the enquiry form until I give a checkout link. Mobile: check at 390 px, tap targets of at least 44 px. Done when there are no console errors, keyboard focus is visible and every placeholder is listed.

Stationery shop website design and motion

Palette

#ffffff page background, text on the ink panels and on hovered buttons, the selected paper tab#151515 text, the ink panels (paper library, subscription, footer), button fill on hover, the Desk button#6b6b6b secondary text: leads, notes, makers' places, answers, shelf titles before they become current#f3f3f3 grey surfaces: nav pill, paper tab list, evening cards, enquiry form, alternate maker tiles, printing step cards, question icons#d7a6e5 the only accent: opening panel, button fills, the Most chosen mark, the Desk tier, the thank-you line, the address copy, focus rings on ink panels#242424 tier cards inside the subscription panel and the paper photo frame#e2e2e2 hairlines above shelf rows, card footers, question rows and maker tile borders#a8a8a8 muted text on the ink panels: leads, spec labels, tier descriptions, footer labels

Fonts

Stack Sans Headline: weight 500 with tight negative tracking: the opening statement, section headings, prices, tab names, the wordmark and the menu links
Stack Sans Text: weight 400 for body text and 500 for buttons, form labels and small labels, which are uppercase with 0.06em tracking

A white page whose section heads sit on a 12-column grid: heading left, small grey lead right. The opening is one rounded lilac panel holding the statement, a story paragraph and a wide photo. Ink-black rounded panels hold the paper library and the subscription tiers, and the footer repeats the ink panel. The shelves, new arrivals and questions pair a sticky column with a scrolling list. Corners are 8, 16 or 28 px, with hairline rules and no shadows.

Three ink-black panels, the paper library, the subscription and the footer, carry faint circle outlines. Lilac buttons fill with ink from the left on hover, which keeps running under reduced motion. In the address section a lilac copy of the heading sits offset behind it, then fades as you scroll.

Every value of this stationery shop 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 stationery shop website page

Navigation
Top bar: wordmark, six section links, a Visit the shop button and a menu button; a full-screen menu on phones
The bar slides away after 24 px of downward scrolling past 160 px and returns on the way up; this keeps working with reduced motion.
We stock what we would write with ourselves, and you can try all of it before it goes in the bag.
One statement as the h1, a short story paragraph with two links, and a wide photo of a wall of pens and pencils
On load the lilac panel, the statement and the story rise in with a short stagger, and the photo drifts into place as it scrolls in.
Five shelves, chosen by hand.
Five shelves as a list beside a sticky plate of photos that wipe to the shelf in view (demo: Paper & card, Pens & ink, Notebooks, Post & sealing, Paint & drawing)
As each row rises to 60% of the screen its photo wipes up over the previous one, settling from 120% to 100%, and its title darkens; the plate is sticky in CSS and a rule draws above each row. With reduced motion or without JavaScript the plate shows only the last photo and the titles stay grey.
The paper library. Touch before you buy.
A panel with four paper tabs (demo: Cotton rag, Kraft & recycled, Marbled, Washi), a stack of four photos and a detail panel with sizes, best for and price
Clicking a tab or using the arrow, Home and End keys swaps the detail panel and cross-fades the photo, and the heading's second half fades in word by word as you scroll.
New on the shelves.
A sticky heading and button beside four new-arrival cards with photo, name, price, maker and date (demo: notebook £24, pencil set £14, seal kit £32, watercolour tin £38)
Each card enters shifted 150 px and tilted 9 degrees from alternating sides and straightens by mid-screen while its photo zooms out; on phones the shift and tilt scale to 40%.
Ten of our thirty-one makers, most of them small.
A grid of ten maker tiles with name, city and craft (demo: Hollin Bindery, Orba, Merrow & Lane, Studio Kesh, Tidewell Mill and five more)
Each maker's name fills in word by word as its tile scrolls into view.
Printed to order, in the back room.
A pinned horizontal row: an intro with a button, then four steps with photos (demo: choose stock and set type, proof, print by hand, wrap and collect)
Pinned: the intro and four steps slide sideways for as long as the row overflows, each photo shifting back against the movement; without the pin the steps sit in two columns, one on phones.
The Monthly Quire. Paper by post.
A panel with three subscription tiers, each with a price, a line, a list and a button (demo: Pocket £12, Desk £24 marked Most chosen, Studio £45)
The three tiers start folded forward from their top edge and unfold one after another; at 900 px and narrower each unfolds on its own.
Thursday evenings at the shop.
Three workshop cards with photo, date, title, text, price and a Book a place link (demo: an italic hand, a Coptic notebook, a watercolour field journal)
The three cards arrive as a staircase, each 130 px lower than the one before, and close into a row while their photos shift against them.
Questions at the counter.
Six questions and answers as native <details> rows with a sticky heading and phone and email links
A rule draws under each question on arrival, and the plus turns into a minus when a row opens.
27 Ash Row, Edinburgh.
The address as a large two-line heading, a photo, opening hours, address, phone and email, and a message form
A script adds a lilac copy of the address heading, offset behind it; as you scroll in, the two lines slide in from opposite sides and the copy settles into register and fades.
Footer
Panel with a large wordmark, a tagline, three link columns (Shop, Services, Visit) and the copyright line with the Design: 8B credit
A rule draws across the top of each of the four columns.

Before you publish the stationery shop website site

Replace social preview image, favicon, phone number, email address and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Visit the shop button in the nav lead to #visit now; point them to keep, or your shop or directions page.
See the shelves button and the Thursday evenings at the shop link in the opening lead to #shelves and #evenings now; point them to keep, or your online shop and your events page.
Ask us to hold one button in New on the shelves lead to #visit, the contact form now; point them to your product or reservation page.
Start a print order button in the printing section lead to #visit now; point them to your print order form or page.
Choose Pocket, Choose Desk and Choose Studio buttons in the club section lead to #visit now; point them to your subscription checkout links, one per tier.
Book a place links on the three evening cards lead to #visit now; point them to your booking or ticket page for each workshop.
Phone and email links in the questions, visit and footer sections lead to a tel: link and a mailto: link with placeholder numbers now; point them to your real phone number and email address.
The workshop cards show fixed dates in October 2026, already past; the arrival dates are fixed text too.
In the press scene the pinned row is a horizontal slide on all screen sizes, which feels long on a phone because the row is wide.
Light grey text on white and the lilac accent on pale panels should be checked for contrast after any recolouring.

Questions about this stationery shop website template

Is this a free stationery template I can print?

No. It is a website, not printable letterhead or notebook pages. It is free to use, though: one index.html, shelves to workshops on one page, under the MIT licence with no build step, so it works as a stationery template free download for a shop site.

Can it work as a stationery ecommerce website template?

Only as a showcase so far. There is no cart, checkout or payment script: the hold, print order, subscription and booking buttons all point to the contact form. Replace each with your shop, checkout or booking link, one per tier and per workshop.

Where does the Ask the shop form send its messages?

Nowhere yet. The form checks the name, email and message, clears itself and shows a thank-you line, but sends nothing. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or delete the form and keep the email link. Edit the thank-you line, which promises a reply within one working day.

How do I hand it to Claude Code, Cursor or Codex?

Put index.html and AGENTS.md in an empty folder with the curl lines at the start of AGENTS.md, and tell the agent to read AGENTS.md first. Give it the files, not the page address. Starting from scratch? Use the stationery shop website design prompt below, or use it in Bolt with a screenshot and prompt.

What breaks if I change the shelves, papers or address?

Keep every id and the data-8b-section, data-8b-motion and data-8b-part attributes. The five shelf rows pair with five photos, the four paper tabs with four panels, and each --len equals its line's character count. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

Can I get a site like this without editing code?

Yes, with 8B's AI website builder. You describe the site in a sentence and its engine designs a new site of its own, 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 also runs inside Claude and ChatGPT.

Not a stationery shop website? More free templates