Build a storefront

Build and style a revenexx storefront on a Theme or on your own frontend — a Nuxt SSR Theme with Blökkli blocks, or an API client — and sign buyers in from its server.

These guides walk you through building a Theme: the front end of a revenexx Storefront. You start from a runnable example, add your own Blökkli blocks, wire one to live catalog data, style it with design tokens that brand per tenant, and get it onto a real domain.

Storefront or App? The front end lives in a Theme; business logic — pricing rules, validation, data models — lives in an App. A Theme reads the capabilities it requires through the gateway, so the two are versioned and deployed separately. Background: Apps and sites.

What a Theme is

A Theme is a Nuxt 4 server-rendered site that renders a customer's Storefront. It is registered and installed like an app: you publish it once, it appears in the Cockpit Theme marketplace, and a customer activates it on their domain. One deployed Theme can serve many tenants — the catalog and branding differ per request, the code does not.

Two things make a Theme more than a plain Nuxt site:

  • Blökkli blocks. Editors compose pages by dragging and dropping blocks on a canvas in Cockpit. Each block is a Vue component you write; the Theme declares which blocks it offers in its manifest. A page is data (an ordered list of blocks and their props), not code, so the customer's content team ships everyday page changes without touching the codebase.
  • Design tokens. The Theme's look is driven by CSS custom properties. The same build serves every tenant; each tenant's colors and logo are applied at runtime, so a rebrand is a token change, not a redeploy.

What you'll build

Across these three guides you'll take a Theme from scaffold to a first deploy, in this order:

  1. Build your first Theme — scaffold a Theme, read the manifest, run it locally, and deploy a first version.
  2. Build a block — write a Blökkli block, register it, and connect one to live catalog data the shell-first way.
  3. Brand a Theme with design tokens — drive the look with CSS custom properties, brand per tenant at runtime, and support light and dark.

Deploying, rolling back and activating a Theme on a domain is covered by the Sites pages, starting with Publishing a theme.

Four more guides sit beside that path rather than after it. They build a storefront on any frontend, not only a Theme:

  • Sign a buyer in from your server — for a storefront or customer portal with signed-in buyers: register a buyer, sign them in, keep the session on your server, and read each 401 and 403 along the way. It applies to any back end, not only a Theme.
  • Connect your own frontend — an alternative to the Theme path, not a step after deploy. Choose it when your storefront is not a Nuxt Theme and runs as an API client: the server-side key, the market and channel lookups, batched prices, buyer sessions and tenant-safe caching.
  • Refresh price caches when a price list changes — for a storefront that caches prices/resolve answers: get the price-change events to your server, drop exactly what went stale, cover what no event announces, and decide whether an open cart sees the new price.
  • Build reorder and quick order — for a B2B storefront whose buyers reorder the same lines: save order lists on your server, turn a list or an uploaded CSV into a priced cart, and show what was left out.

Prerequisites

  • Node.js 22 or newer and npm. A Theme is a Nuxt 4 app; you build it with npm run build. (These apply to the Theme path; the two guides beside it list their own.)
  • Working knowledge of Nuxt 4 and Vue 3 (the <script setup> composition API). Nuxt is the only supported stack for a Theme; see Frontend stacks before you staff the project. If you're new to storefronts on revenexx, read Storefronts first for the bigger picture.
  • A revenexx account and a tenant to deploy to (Cockpit access), plus the revenexx CLI signed in if you want to deploy from your terminal.
  • Git if you want Git-connected deploys.
  • A tenant slug. You need it once the Theme reads real data, not before. Find your tenant slug.

First command

Terminal
revenexx create theme my-storefront

New to Themes? Experience Studio: getting started puts a working shop on your machine, then on a preview URL, in eight steps. The guides listed under "What you'll build" walk the same ground in more depth.

How a Theme talks to the platform

A Theme has two kinds of traffic, and they take two different paths:

  • The front end (HTML, server-rendered pages, assets) is served on the Theme's own domain. This is what a buyer's browser loads.
  • Catalog and commerce data comes from the API gateway at https://api.revenexx.com. The Theme's server-side API routes call the gateway and forward the per-request tenant context, so every request returns the right tenant's data automatically.

You don't wire up multi-tenancy yourself. On a deployed Theme the platform resolves the tenant from the request host and injects it per request; your server-side routes read it and pass it along. The rule to remember: treat the tenant as per-request state, never a process-wide constant.

Where to go next

Start with Build your first Theme. For reference while you work, keep Blökkli blocks and Theming open. Building on another stack? Go to Connect your own frontend.

Was this page helpful?