The commerce block adds a product catalog, a cart, and Stripe
checkout while the plan stays ordinary, reviewable YAML. Products
live in commerce/catalog.json — hand-maintained for the manual
provider, synced from Printful for the printful provider — and the
catalog component below renders them with variant pickers and a
working cart.
This lookbook runs commerce in preview mode: add something to the cart and open the drawer — the checkout button is deliberately disabled and no payment configuration exists. Preview lets a store be reviewed as a real page before any keys are provisioned. For the live version of this flow, buy Anchovy a treat at anchovy.pages.dev.
commerce:
enabled: true
provider: manual
currency: usd
checkout: stripe
preview: true # cart chrome, disabled checkout, no keys
fulfillment:
to: demo@clodsite.com
from: demo@clodsite.com
$24.00
The cap from the lookbook photos. Honorably discharged from daily duty and reissued as a specimen.
$18.00
Terminal output of a healthy build, suitable for framing.
- type: catalog # all active products, in catalog order
Each product in commerce/catalog.json carries its image, price in
minor units, up to two option dimensions, and — never shown to the
browser — an opaque fulfillment_ref per variant:
{
"slug": "retired-cap",
"name": "Retired Cap",
"price_minor": 2400,
"options": [{ "name": "Color", "values": [
{ "value": "Sand", "hex": "#C8B89A" },
{ "value": "Navy", "hex": "#20304C" }
]}],
"variants": [
{ "optionValues": { "Color": "Sand" }, "fulfillment_ref": "demo-cap-sand" },
{ "optionValues": { "Color": "Navy" }, "fulfillment_ref": "demo-cap-navy" }
]
}
The client only ever sends { slug, optionValues, qty }; prices and
provider identifiers are resolved server-side at checkout.