Theme SDK Guide

Everything you need to build Fez-compatible themes

Theme Structure

themes/your-theme/
├── manifest.json       # Metadata, presets, sections
├── schema.json         # Customizable settings (→ auto UI)
├── sections/           # React components
│   ├── hero.tsx
│   ├── featured-products.tsx
│   └── newsletter.tsx
└── index.ts            # Registration

manifest.json

{
  "id": "my-theme",
  "name": "My Theme",
  "version": "1.0.0",
  "author": "Your Name",
  "sections": ["hero", "categories-grid", "featured-products"],
  "presets": [{
    "id": "default",
    "name": "Default",
    "settings": {
      "primaryColor": "#3b82f6",
      "backgroundColor": "#ffffff",
      "headingFont": "Tajawal",
      "borderRadius": 12
    }
  }]
}

Setting Types (9 types)

Type	UI Control	Properties
color	Color Picker + Hex	default
text	Text Input	default, placeholder
textarea	Textarea	default, placeholder
url	URL Input (LTR)	default, placeholder
range	Slider	min, max, unit, default
select	Buttons (≤4) / Dropdown	options[], default
toggle	Toggle Switch	default
image	Upload + Preview	—
font	Font Selector + Preview	default

Section Component

import type { ThemeSectionProps } from "@/lib/theme-engine/types";

export default function HeroSection({
  settings, storeData, locale, t
}: ThemeSectionProps) {
  return (
    <section style={{
      background: `linear-gradient(135deg, ${settings.primaryColor}, ${settings.secondaryColor})`,
      fontFamily: `'${settings.headingFont}'`,
    }}>
      <h1>{settings.heroTitle || t("hero.welcome")}</h1>
    </section>
  );
}

💡 showWhen

"showWhen": { "settingId": "showBanner", "value": true }

Publishing

Create New Theme

Upload manifest + schema + sections

Publish to appear in the store