Theme Studio

Theme Studio is the per-shop visual + voice customization editor on Storefront. Each operator visits /dashboard/[slug]/theme and gets a full-form + live-preview workbench. Pick a preset, swap colors, edit copy, toggle sections — everything saves to the Storefront row and the public shop reflects it instantly.

The 9 theme presets

Balanced (subtle changes)

Dramatic (bigger swings, signature palettes)

Picking a dramatic preset stamps the matching colors automatically. Picking a balanced preset leaves colors alone (operator can pair any palette with any preset).

The 12 curated color palettes

Customization fields

Visual

• logoUrl — square image URL (1:1 aspect). Renders in nav. Gracefully falls back to letter-avatar if URL fails to load.
• bannerUrl — wide hero backdrop URL. Optional.
• accentColor — primary brand color (hex). Drives buttons, glows, eyebrows, accents everywhere.
• secondaryAccent — for gradients, dual-tone backdrops. Optional.
• displayFont: sans / serif / display / mono — hero title + section headers
• cardDensity: compact (more per row) / comfortable / spacious (large tiles)
• chipStyle: subtle / bold / glassy
• heroVariant: standard / minimal (compact) / image-led / video-led

Voice & copy

• tagline — appears above the hero title (default eyebrow: "CARD SHOP · LIVE")
• ctaPrimaryLabel — main CTA button text (default "Shop the catalog")
• featuredLabel — Featured section eyebrow (default "Today's spotlight")
• announcementBar — pinned strip at top of public shop (optional). E.g. "⚡ Free shipping over $200"
• aboutBlurb — long-form blurb at the bottom of the public shop
• welcomeMessage — shown to returning visitors (recognized via localStorage on the client)

Section toggles

• showLiveTicker — right-side rotating spotlight panel in hero
• showFeaturedRow — featured carousel between hero and shop grid
• showCrossChannel — Breaks + ToT strips below shop
• showEcosystemSims — Flip + Pull simulation iframes
• showMap — USA city-map navigation

The Apply SlabTrack Showcase button

One-click brand stamp at the top of the form. Sets the full SlabTrack identity: purple #8b5cf6 + cyan #06b6d4 accents, display font, image-led hero, all sections on, the "SlabTrack · operator showcase" tagline, full announcement bar + about blurb. Use to show buyers what a maxed-out shop looks like, OR as a starting point for your own theme.

The live preview iframe

Right pane (desktop) / below the form (mobile) — embedded iframe of the public storefront. Reloads on save (key bump + router.refresh). Operator sees their changes in real time without leaving the studio.

How it persists

Save calls PUT /api/storefronts/[slug]/theme with the full state object. The endpoint:

• Owner-gated (only the shop owner can save)
• Validates each field against its allowed enum/format set
• Ignores unknown keys (no SQL injection via field name)
• Updates only the fields supplied (partial saves work)
• Returns success on any successful row update

How the storefront reads it

The public page (/[slug]/page.tsx):

1. Fetches the Storefront row from Postgres on every request (dynamic = 'force-dynamic')
2. Calls resolveStorefrontTheme(sf) which merges per-field overrides over the chosen preset's defaults
3. Wraps the page in <StorefrontThemeProvider> with the resolved theme + CSS variables for the accent colors
4. Every component reads useStorefrontTheme() for its visual decisions (no hardcoded colors)

Code references

• Theme types + presets + palettes: slabtrack-storefront/src/lib/storefront-theme.ts
• Theme Studio UI: src/app/dashboard/[slug]/theme/ThemeStudio.tsx
• API: src/app/api/storefronts/[slug]/theme/route.ts
• Provider: src/components/StorefrontThemeProvider.tsx
• Logo fallback: src/components/ShopLogo.tsx