Pages — Overview

A page is the next tier up from a block: a complete, ready-to-wire screen composed from storefront blocks, with no backend of its own. Install one and you get the page.svelte plus every block and component it depends on:

bun x bosia@latest add page storefront/home

src/lib/pages/storefront/home/page.svelte   ← the composed page
src/lib/blocks/storefront/*                  ← its sections (installed for you)

You own the routing. Drop the page into a route and render it:

<script lang="ts">
	import Home from "$lib/pages/storefront/home/page.svelte";
</script>

<Home />

The Mercato storefront

The four storefront pages are one multi-purpose template — Mercato. The same blocks render any of six store "purposes"; switching the purpose swaps the copy and catalogue, and switching the theme re-skins it. Edit one line at the top of any page:

import { purposes } from "$lib/blocks/storefront/store/purposes.ts";
const purpose = purposes.fashion; // clay · fashion · grocery · tech · beauty · garden

Purpose → theme mapping

Each purpose pairs with an existing Bosia theme. Set the theme on the app (or any wrapper) the way you normally do; the storefront uses semantic tokens, so it follows along.

Purpose	Store type	Theme
clay	General store	clay (new)
fashion	Fashion & apparel	editorial
grocery	Grocery & fresh	forest
tech	Electronics & tech	paper
beauty	Beauty & skincare	bloom
garden	Plants & garden	sage

The pages

• Home — hero, categories, featured collection, editorial, more
• Listing — filters, sort and a product grid (PLP)
• Product — gallery, buy box, trust and details (PDP)
• Checkout — multi-step form, summary and confirmation

For the customer-facing UI here plus a backend, pair with the shop template scaffold (bun x bosia@latest create my-shop --template shop).