Customize Storefront

The Customize Storefront editor (Storefront → Customize Storefront) is the visual builder for your white-label customer portal. It is a single, tabbed editor backed by a versioned draft → publish workflow, so you can iterate safely and ship when ready.

ℹ

Every change you make is written to a draft config. Nothing is visible to customers until you Publish. The draft is version-locked, so two operators editing at once can't silently clobber each other's work.

Editor layout

The left rail groups tabs into seven sections. The right pane edits the selected tab; a toggleable bottom drawer shows a section-isolated live preview (Desktop / Tablet / Mobile).

Group	Tabs
Quick Setup	Branding · Content · Products · Behavior · PLG & Onboarding
Pages & Navigation	Custom Pages · Navigation · Domain & Routing
Developer Experience	API Docs · Authentication · End-Customer SSO · Embed Studio · Embeddable Widget · Headless API
Communications	Email Templates
Content Library	Knowledge Base · Documentation · Release Notes
Advanced Customization	Theme Tokens · Landing Sections · Sections & Slots · Advanced · Custom Stylesheets · Legal Documents
Publish	SEO · Publish

What each tab configures

Quick Setup

Branding — Logo, favicon, page title, meta description, primary/secondary/accent colors, font family, border radius.
Content — Authors the landing page: hero, social proof, stats, products section, steps, CTA, footer. Includes AI copy assist.
Products — Per-product storefront overrides, visibility toggles, and guides (GETTING_STARTED, TUTORIAL, HOW_TO, REFERENCE, VIDEO, PDF, LINK).
Behavior — Pricing visibility (public / authenticated / hidden), catalog layout, default billing period, annual discount %, search & categories, contact-sales URL, pricing FAQ.
PLG & Onboarding — Company registration fields, default offering, auto-provisioning, trial experience, and the onboarding checklist steps.

Custom Pages — Up to 20 custom pages mounted at /{slug} on the storefront, each with layout, visibility, and status.
Navigation — Menu structure and nav items.
Domain & Routing — Subdomain or custom-domain configuration (see Domain & Routing).

Developer Experience

API Docs — Documentation style (Swagger UI / Redoc / Stoplight Elements) and code-sample languages.
Authentication — End-customer signup mode (open, domain_restricted, approval_required, invite_only), OAuth toggle, email verification, domain whitelist.
End-Customer SSO — SAML / OIDC / Google sign-in for storefront customers.
Embed Studio — Operator surface for the embed plugin tier: widgets, embed keys, auth bridge, and telemetry.
Embeddable Widget — Tenant-wide defaults for the public @aforoai/storefront-widgets SDK.
Headless API — Endpoint URL, response shape, code samples, auth, and caching for headless storefront builds.

Content Library & Communications

Email Templates — Three-layer customization: brand kit, per-category defaults, and high-value hero templates.
Knowledge Base / Documentation / Release Notes — Full-page authoring surfaces embedded in the editor.

Advanced Customization

Theme Tokens — Colors, typography scale, radius, spacing, and elevation tokens.
Landing Sections & Sections & Slots — Compose the page from a section registry and assign sections to named storefront slots.
Advanced — Custom CSS (64 KB limit) and localization.
Custom Stylesheets — Up to 5 page-context-scoped stylesheets (ALL / LANDING / PRICING / DOCS / CATALOG / PORTAL), injected after global custom CSS.
Legal Documents — Per-tenant versioned Terms, Privacy, and custom legal pages.

Publish

SEO — Canonical URL prefix, sitemap toggle, Open Graph title/description/image (with WCAG contrast validation).
Publish — Final publish, staging preview URL, setup-progress indicator, and publish history.

Draft → Publish workflow

Your edits accumulate in a draft. Save Draft persists the draft without changing what customers see. Publish promotes the draft to the live storefront and refreshes the public site, typically within seconds.

⚠

If two operators edit at the same time, Aforo detects the conflict on save and shows a "Reload latest" banner rather than letting one silently overwrite the other's work.

Two guards block an accidental bad publish:

Custom CSS over 64 KB blocks save.
WCAG contrast violations on theme colors block publish until you fix or auto-fix them.

On first run (no published config yet), the editor opens the Quick Launch Wizard instead of the full tab set.

Live preview

The bottom drawer renders only the section currently being edited (Hero, CTA, Footer, …) with a "Preview Only" badge and a device toggle. The Publish tab's "Preview Staging" button opens the full storefront at ?preview=true.