Geliştiriciler / Genişletme

Tema geliştirme

Mağaza tasarımı koddan değil veriden çizilir: bir şablon, bölümlerin ve ayarlarının listesidir. Tema bu bölümleri, ayar alanlarını ve renk token’larını tanımlar; tema editörünün formları da buradan otomatik üretilir.

İki tema türü

Alt tema: yalnızca bir theme.json. Var olan bir temanın bileşenlerini ödünç alır (rendersWith), kendi renklerini, yazı tiplerini ve varsayılan şablonlarını getirir. Zip olarak yüklenir ve anında etkinleşir.
Tam tema: kendi React bölüm bileşenleri olan paket. Yüklenen kod sunucuda kendiliğinden çalıştırılmaz; platform yöneticisinin gözden geçirdiği bir derleme adımıyla yayına girer.

theme.json

themes/ornek/theme.json

{
  "key": "ornek",
  "name": "Örnek",
  "version": "1.0.0",
  "contracts": "^1.0.0",
  "rendersWith": "aurora",
  "templates": ["header", "index", "collection", "product", "footer"],
  "tokens": {
    "brand":  { "label": "Marka rengi", "type": "color", "default": "#0E6A5E" },
    "radius": { "label": "Köşeler", "type": "select", "default": "normal",
                "options": [["keskin", "Keskin"], ["normal", "Normal"]] }
  },
  "sections": {
    "hero": {
      "label": "Karşılama",
      "group": "Üst bölge",
      "fields": [
        { "key": "title", "label": "Başlık", "type": "text" },
        { "key": "slides", "label": "Slaytlar", "type": "blocks",
          "fields": [{ "key": "image", "label": "Görsel", "type": "image" }] }
      ]
    }
  },
  "defaultTemplates": {
    "index": [{ "type": "hero", "settings": { "title": "Yeni sezon" } }]
  }
}

defaultTemplates yeni mağazanın ilk görünümüdür. Hesap açan müşteri temanızı seçtiğinde bu bölümler demo içeriğiyle kurulur; boş bir sayfa yerine dolu bir vitrin görür.

Alan tipleri

Tip	Açıklama
`text / textarea`	Düz metin; HTML olarak çizilmez
`number`	Sayı
`boolean`	Aç/kapa anahtarı
`select`	`options: [["deger", "Etiket"], …]`
`color`	`#rrggbb` renk
`image`	Görsel kitaplığından seçim
`collection`	Kategori ya da koleksiyon seçimi
`menu`	Panelde tanımlı menülerden biri
`page`	İçerik sayfası seçimi
`blocks`	Eklenip çıkarılan, sıralanan alt öğeler (slayt, kart, sütun)

Her bölümde ayrıca ortak alanlar otomatik bulunur: zemin rengi, iç boşluklar, genişlik ve mobilde gizleme (_bg, _pad, _width, _hideMobile).

Bölüm bileşeni (tam tema)

Bölüm veriyi kendisi çekmez: çekirdek veriyi toplar ve bileşene verir. Böylece tema iş mantığı içermez ve her zaman Storefront API ile aynı veriyi görür.

themes/ornek/sections/hero.tsx

import { Section } from './_shell';
import type { SectionProps } from '../types';

export function Hero({ settings }: SectionProps) {
  return (
    <Section settings={settings}>
      <h1 className="ornek-hero">{String(settings.title ?? '')}</h1>
    </Section>
  );
}

themes/ornek/index.ts

export const sections = {
  hero: { key: 'hero', label: 'Karşılama', dataNeeds: [], component: Hero },
};

Kurallar

Bütün CSS sınıfları temaya özel önekli olmalı (ornek-); temaların stilleri vitrinde birlikte yüklenir.
Renkler bileşene gömülmez, token ya da bölüm ayarından gelir.
Bölüm anahtarını yeniden adlandırırsanız eskisini aliases ile yenisine yönlendirin; kayıtlı mağaza şablonları bozulmaz.
İlk render sabit olmalı; zamana bağlı değerler (geri sayım gibi) tarayıcıda sonradan doldurulur.

Paketleme ve yükleme

Temayı theme.json kökte olacak şekilde zipleyin ve panelde Online Mağaza → Temalar → Tema yükle ile ekleyin. Tema, mağazanın tema kütüphanesinde yeni bir sürüm olarak görünür; siz yayınlayana kadar canlı mağaza değişmez.