İlk temanız

Bu sayfada sıfırdan bir bölüm tanımlayıp ekranda göreceğiz.

1. Bölümü tanımlayın

Partner panelinde Temalarım → (temanız) → Geliştir ekranını açın ve Bölüm ekle'ye basın.

Doldurulacak alanlar:

Alan	Örnek	Not
Görünen ad	Kahraman Alan	Mağaza sahibi bunu görür
Kod adı	Hero	Bileşen adı. Sonradan değiştirmeyin — tema JSON'unda saklanır
Açıklama	Sayfanın en üstündeki büyük tanıtım alanı	Bölüm listesinde alt satır
Rol	Normal	Header/footer için bkz. Roller

Kod adını sonradan değiştirmeyin

Kod adı (type) mağazaların tema JSON'unda saklanır. Değiştirirseniz o bölümü kullanan mağazalarda bölüm çizilmez — kayıt eski adı işaret etmeye devam eder.

2. Prop ekleyin

Aynı ekranda Prop ekle ile bölümün kabul edeceği ayarları tanımlayın:

Kod adı	Tip	Etiket	Varsayılan
title	Metin	Başlık	Yeni sezon
subtitle	Uzun metin	Alt başlık	—
image	Görsel	Arka plan	—
ctaText	Metin	Buton yazısı	Keşfet
ctaUrl	URL	Buton adresi	/products

Tam liste: Prop tipleri.

3. Tanımları indirin

npx create-winkwop-theme pull

Çıktı:

✅ v1.0.0 (draft) indirildi.
   1 bölüm tanımı işlendi.
   Yeni bileşen dosyaları: Hero.tsx

src/generated/types.ts içinde tipiniz hazır:

export interface HeroProps {
  title: string;
  subtitle: string;
  image: string;
  ctaText: string;
  ctaUrl: string;
}

4. Bileşeni yazın

src/sections/Hero.tsx:

import type { HeroProps } from '../generated/types';

export default function Hero({ title, subtitle, image, ctaText, ctaUrl }: HeroProps) {
  return (
    <section
      className="flex min-h-[60vh] flex-col items-center justify-center gap-4 bg-neutral-900 bg-cover bg-center px-6 text-center"
      style={{ backgroundImage: image ? `url(${image})` : undefined }}
    >
      <h1 className="text-4xl font-semibold text-white md:text-6xl">{title}</h1>
      {subtitle && <p className="max-w-xl text-white/80">{subtitle}</p>}
      {ctaText && (
        <a className="rounded-full bg-white px-6 py-3 font-medium text-neutral-900" href={ctaUrl}>
          {ctaText}
        </a>
      )}
    </section>
  );
}

Tailwind sınıfları kutudan çıkar; kurulum gerekmez. Düz CSS tercih ederseniz Stil ve Tailwind sayfasına bakın.

Dikkat edilecek üç nokta:

• Varsayılan export zorunlu; registry bileşeni böyle bulur.
• Boş olabilecek ayarları koşullu çizin. Mağaza sahibi alt başlığı silerse bileşeniniz boş bir <p> bırakmamalı.
• Bağlantı düz <a href>. Vitrin tıklamayı yakalayıp sayfa yenilenmeden gezinir; siz router bilmezsiniz.

5. Önizleyin

npm run dev

http://localhost:3333 adresinde bölümünüzü bağlı mağazanın gerçek verisiyle görürsünüz.

6. Yayınlayın

npx create-winkwop-theme deploy

Kaynak yüklenir, platform derler ve sürüm ready olur. Artık mağazalar bu sürümü kurabilir → Yayınlama.