Docs Themes Quickstart

Quickstart

From nothing to a running storefront on your machine. No Mecsto account, no API keys, no backend — the kit cannot reach a live store even if you ask it to.

Requirements

Node 22 (see .node-version) and pnpm 9.15, which Corepack will install for you.

bash

corepack enable
pnpm install

Scaffold a theme

theme:create copies the Anchor reference theme into packages/themes/<name> as your starting scaffold. Anchor implements the whole page contract correctly, so you begin from something that already renders — then replace its design with your own.

bash

pnpm theme:create aurora

Anchor is a teacher, not a base. Replacing Anchor’s colours and fonts is not a theme. The originality gate fails a reskin mechanically, before a human ever looks at it. Use Anchor to learn the contract, then design your own.

Run it

bash

MECSTO_DEV_THEME=mecsto/aurora pnpm dev
# → http://localhost:3000

You are now looking at Demo Studio — a fictional service business with listings, categories, a blog, FAQs, testimonials, a team, locations and bookable availability. Every one of those is served by the same SDK loader the production runtime uses, so the shapes are real.

Check your work

Two commands gate a submission. Run them early and often, not at the end.

bash

pnpm theme:check     # contract conformance + the originality gate
pnpm build           # the theme must build standalone

What to build first

Start with the home page and the listing detail page. Between them they exercise most of the contract: bound sections, a typed collection, a single record, and the hand-off to /checkout. If those two feel right, the rest of the contract follows quickly.

When you are ready, read the page contract for the full list of required exports.