Developer Journey

This guide walks you through the complete process of building and selling storefront themes on Siyahfy. You will use Siyahfy Studio — a browser-based IDE at studio.siyahfy.com — to create themes with React and TypeScript, preview them in real time, and submit them to the Theme Marketplace.

Overview Flow

Step 1: Register Your Account

Go to studio.siyahfy.com and create your developer account. You can register with your email (OTP verification required — check your inbox) or sign in with Google for instant access.

What happens: The system creates a developer record in the studio_developers table. Email registration sends a one-time password to your email for verification. After login, you land on the Developer Dashboard.

Related: Developer Studio

Step 2: Explore the Dashboard

Your dashboard shows all your themes at a glance. For each theme you can see:

• Theme name and current status (draft, in_review, published, or rejected)
• Install count and version number
• Star rating from vendor reviews
• Revenue earned from sales

From here, click “New Theme” to start building.

What happens: The dashboard calls the API endpoint GET /api/marketplace/developer/my-themes to fetch your theme list with install counts, ratings, and earnings data.

Related: Developer Studio

Step 3: Create a New Theme

When you create a new theme, you first choose a starting template:

Then fill in the theme details:

• Name — auto-generates a URL slug
• Tagline — short description shown in the marketplace
• Category — fashion, electronics, grocery, etc.
• Price (INR) — set to 0 for a free theme
• Description — detailed description for the marketplace listing

Click Create and a terminal animation plays while your workspace is provisioned. Then the IDE opens automatically.

What happens: The system calls POST /api/marketplace/developer/themes to create the theme record, generates the initial file structure from your chosen template, and opens the workspace.

Related: Theme Marketplace

Step 4: Build Sections and Widgets

The Studio IDE looks and feels like a professional code editor. Here is the layout:

[Activity Bar] [File Explorer] [Code Editor] [Live Preview]
                                [Bottom Panel: Terminal | Problems | Output | Schema]

File Structure

Your theme has a clear folder organization:

Creating a Section

1. Right-click the sections/ folder and select “New Section”
2. Enter a name (e.g., “Testimonials”)
3. The system creates sections/testimonials/Testimonials.tsx with starter code
4. The file opens automatically in the editor

Creating a Widget

1. Right-click the widgets/ folder and select “New Widget”
2. Enter a name and the system generates starter widget code

Writing Section Code

Every section must have a Props interface with settings (and optional blocks). You use JSDoc annotations to control how vendors configure your section in the visual editor:

/** @section Testimonials */
/** @max_blocks 10 */
 
interface Props {
  settings: {
    /** @label Heading @tab content */
    heading: string;
 
    /** @label Columns @tab style @min 1 @max 4 */
    columns: number;
 
    /** @label Show Avatar */
    show_avatar: boolean;
 
    /** @label Card Style @tab style */
    card_style: 'rounded' | 'flat' | 'shadow';
  };
  blocks: {
    /** @block testimonial @name Testimonial */
    testimonial: {
      /** @label Customer Name */
      name: string;
      /** @label Review @type richtext */
      review: string;
      /** @label Rating @min 1 @max 5 */
      rating: number;
    };
  };
  globalSettings: Record<string, any>;
}
 
export default function Testimonials({ settings, blocks }: Props) {
  // Your React component here
}

The JSDoc Type System

The Studio automatically converts your TypeScript types into visual editor controls for vendors. No manual schema writing needed.

Auto-Detected Type Mappings

Related: Developer Studio

Step 5: Test with Live Preview

Click the “Preview” button in the toolbar (or press Ctrl+Shift+P) to open live preview mode. The editor splits into two panes — code on the left, preview on the right.

Key features of the preview:

• Auto-updates as you type (with a 1.2-second debounce so it does not flicker)
• Dummy store data is provided automatically (8 sample products, 3 collections)
• Device modes let you switch between Desktop, Tablet, and Mobile views

The Bottom Panel gives you additional tools:

• Terminal — Build logs and command output
• Problems — Real-time validation errors flagged in your code
• Output — Raw output logs
• Schema — Shows the auto-generated schema from your Props interface (useful for debugging)

What happens: The preview system compiles your TypeScript/React code in real time, injects dummy store data, and renders the result in an iframe. The schema tab shows you exactly what your JSDoc annotations produce.

Related: Developer Studio

Step 6: Submit for Review

When your theme is ready, click the “Submit” button in the toolbar. The system runs validation checks before submission:

1. All sections must have a valid Props interface
2. No parse errors in any file
3. theme.json must be complete
4. At least one page template is required

If validation passes, you enter a version number (e.g., 1.0.0) and a changelog describing what is new. Click submit and your theme status changes to “in_review”.

What happens: The system calls POST /api/marketplace/developer/themes/:slug/versions to create a new version record. Your source files are bundled and stored. The submission appears in the admin review queue.

Related: Theme Marketplace

Step 7: Admin Review

A Siyahfy admin reviews your submission. They can:

• Preview your theme rendered with real store data
• Browse your code to check quality and guidelines compliance
• Approve — your theme goes live on the marketplace
• Reject — you receive a rejection reason
• Request Changes — you receive specific feedback to address

If rejected or changes are requested, you revise your code and resubmit. There is no limit on resubmissions.

What happens: Admins use the admin panel at app.siyahfy.com/admin to review pending submissions. Approval triggers a status change and makes the theme visible in the marketplace. Rejection sends a notification with the reason.

Related: Admin Journey

Step 8: Published on the Marketplace

Once approved, your theme is live on the Theme Marketplace. Vendors can browse it, preview it with their own store data, and install it. Free themes install instantly. Paid themes go through a payment flow.

What happens: The theme version status changes to “published” and it appears in marketplace search results. The system tracks install counts, ratings, and reviews.

Related: Theme Marketplace

Step 9: Earn Commissions

Every time a vendor purchases your paid theme, you earn a commission:

Example: For a theme priced at INR 2,999:

• You earn: INR 2,399.20
• Siyahfy commission: INR 599.80
• Vendor pays: INR 2,999 + 18% GST = INR 3,538.82

Your earnings are tracked on the Earnings Dashboard, where you can see:

• Total earnings summary
• Per-theme breakdowns
• Paginated earnings history

What happens: When a vendor completes a purchase, the system records the transaction in marketplace_theme_purchases and creates an earnings record in developer_earnings with the 80/20 split applied.

Related: Developer Studio

Step 10: Request Payout

When your pending balance reaches the minimum threshold of INR 500, you can request a payout.

1. Go to Dashboard then Earnings
2. Click “Request Payout”
3. Enter your payment method (Bank transfer or UPI)
4. Submit the request

A Siyahfy admin will process your payout. You can track payout status (requested, processing, completed, or failed) in the Payouts section of your dashboard.

What happens: The system calls POST /api/developer/earnings/request-payout to create a payout request in the developer_payouts table. Admins process payouts from the admin panel — they can mark them as processing, complete (with a transaction ID), or failed (in which case earnings revert to your pending balance).

Related: Developer Studio | Admin Journey