Başlarken

Temalar şudur: korumalı Liquid — sabit bir veri sözleşmesine göre sunucu tarafında işlenen yalnızca veri şablonları. Temalar şunu içerir: sıfır JavaScript: sepet, öğe seçenekleri ve ödeme, işaretlemenizin bildirimsel olarak bağlandığı platform ticaret çalışma zamanından gelir.

Başlangıç temasını indirin (.zip)

  1. Başlangıç paketini indirin ve açın.
  2. Şunu yeniden adlandırın: slug şurada theme.json.
  3. Bölümleri şurada düzenleyin: sections/; Parçacıkları şuraya ekleyin: snippets/.
  4. Klasör içeriğini zip'leyin ve inceleme için gönderin.

Paket düzeni

mytheme.zip
├── theme.json                  # manifest (data, never code)
├── templates/index.json        # OS 2.0 sectioned template (or index.liquid single-file)
├── sections/*.liquid           # section files, each with its schema block
├── snippets/*.liquid           # reusable partials for the render tag
├── config/settings_schema.json # theme-level settings (Shopify-style groups)
├── locales/en.json …           # theme strings for the t filter
├── assets/                     # css / images / fonts — static only
└── preview.png                 # listing screenshot

Sınırlar: 10 MB Posta kodu 2 MB dosya başına, klasör derinliği ≤ 3. İzin verilen dosya türleri: .liquid .json .css .png .jpg .jpeg .webp .svg .woff2. PHP yok. JavaScript yok. SVG'ler script veya foreignObject içermemelidir.

theme.json Manifest

{
  "name": "My Theme",
  "slug": "my-theme",          // letters/numbers/dashes — becomes the install path
  "version": "1.0.0",          // published versions are immutable; ship updates as new versions
  "author": "You",
  "description": "…",
  "min_platform_version": "2.0"
}

Şablonlar ve bölümler (OS 2.0)

templates/index.json listeler bölüm örnekleri; her bölüm şurada bir Liquid dosyasıdır: sections/ ayarlar şemasını bir şema bloğunda taşır. Limitler: ≤ 25 bölüm şablon başına, ≤ 50 blok bölüm başına.

// templates/index.json
{
  "sections": {
    "hero":  { "type": "hero", "settings": { "heading": "Welcome" } },
    "menu":  { "type": "menu-grid",
               "blocks": { "b1": { "type": "badge", "settings": { "label": "New" } } },
               "block_order": ["b1"] }
  },
  "order": ["hero", "menu"]
}

Bir bölüm dosyasının içinde şunu alırsınız: section.id, section.type, section.settings.* ve section.blocks (her blok: id / type / settings.*). Ayar türleri: text, textarea, color, checkbox, select (Seçenekler), range (min/maks), image_picker.

Veri — Drop referansı

Şablonlar şuna ulaşabilir: yalnızca aşağıdaki özellikler (platformun Drop sınıflarından oluşturulur — bu tablo sapamaz). Globaller: restaurant, options, settings, menu, allergies, banners, branches, active_branch, table, customer, localization, flags, stats, ve section bölüm dosyalarının içinde. Başka herhangi bir şey boş işlenir (ve yüklemede hata verir).

AllergyDrop

id int image string title string

BannerDrop

id int image string image_url string link_url string subtitle string title string

BlockDrop

id string settings App\Storefront\Drops\SettingsDrop type string

BranchDrop

accepts_orders bool id int is_open bool name string status string

CategoryDrop

id int image_url string items array name string

CustomerDrop

name string phone string store_credit float store_credit_formatted string

ExtraDrop

id int name string price float

FlagsDrop

allow_order bool delivery bool on_table bool payment bool scheduling bool takeaway bool

ItemDrop

description string dietary_tags array extras array has_variants bool id int image string is_daily_special bool is_gluten_free bool is_halal bool is_popular bool is_sold_out bool is_vegan bool name string option_groups array price float rating float rating_count int variants array

LanguageDrop

code string direction string name string

LocalizationDrop

currencies array current App\Storefront\Drops\LanguageDrop direction string languages array

MenuDrop

categories array is_empty bool items array

OptionGroupDrop

choices array id int max_select int min_select int name string required bool

OptionsDrop

allow_call_waiter bool allow_coupons bool allow_dietary_filters bool allow_multi_branch_switch bool allow_order_scheduling bool allow_tips bool currency_code string currency_pos string currency_sign string customer_auth_mode string delivery_charge float enable_multi_currency bool menu_sections string min_order_value float open_close_store bool tax_charge float tax_label string whatsapp_number string

RestaurantDrop

address string color string cover string description string id int logo string main_image string phone string slug string sub_title string title string

SectionDrop

blocks array id string settings App\Storefront\Drops\SettingsDrop type string

SettingsDrop

StatsDrop

scans_today int

TableDrop

id int table_no string

VariantDrop

id int name string price float

Filtreler ve etiketler

Platform filtreleri (artı standart güvenli Liquid seti — escape, date, where, map, sort, size…):

media_urlmoneymoney_codettheme_asset

  • t — bir anahtarı çevir. Salt okunur; bilinmeyen anahtarlar anahtarın kendisini döndürür.
  • money / money_code — bir fiyatı restoranın para birimiyle biçimlendir.
  • media_url — restoran görsel URL'si: {{ item.image | media_url: 'menu' }} (türler: menu, logo, cover, allergy, banner).
  • theme_asset — paketlenmiş varlıklarınızdan birinin URL'si: {{ 'css/style.css' | theme_asset }}.

Etiketler schema (bölüm ayarları, çıktıdan çıkarılır), render (ada göre parçacıklar — sizin snippets/ yalnızca dizin), commerce (ticaret çalışma zamanını sayfa başına bir kez yayar). Bilinmeyen filtreler/etiketler yüklemede başarısız olur.

Ticaret çalışma zamanı

Damla {% commerce %} bir kez (genellikle şablonunuzun sonunda), ardından veri özellikleriyle bağlayın — çalışma zamanı sepet durumuna, seçenek sayfasına ve ödemeye sahiptir:

<button data-mb-add="{{ item.id }}">Add</button>
<span   data-mb-cart-count></span>
<span   data-mb-cart-total></span>
<button data-mb-open-cart>Cart</button>
<button data-mb-call-waiter>Call waiter</button>
<div    data-mb-item-sheet-mount hidden></div>
<div    data-mb-cart-mount hidden></div>

Çalışma zamanı arayüzünü şunun aracılığıyla özelleştirin: .mb-* sınıflar ve CSS özel özellikleri (--mb-sheet-bg, --mb-sheet-ink, --mb-accent).

Satıcı ayarları

Satıcılar temanızı panoda şemalarınıza göre özelleştirir. Öncelik: şema varsayılanları ← şablon değerleri ← satıcı değerleri. Ayarlar tema sürümünden bağımsız olarak saklanır, bu yüzden bir güncelleme yayınlamak asla bir satıcının özelleştirmesini silmez.

Kurallar ve limitler

  • Hayır <script>, satır içi olay işleyici yok, javascript: URL yok, iframe yok — yüklemede reddedilir.
  • Kullanıcıya görünür verileri kaçış karakterine dönüştürün: {{ item.name | escape }}.
  • İşlemeler kaynak sınırlıdır (çıktı uzunluğu + motor iş sınırları). Çalışma zamanında başarısız olan bir bölüm atlanır, asla boş bir sayfa olmaz; yüklemede ise ciddi bir hatadır.
  • Yayınlanan sürümler değişmezdir — güncellemeler inceleme yoluyla yeni sürümlerdir.
  • Mantıksal CSS özelliklerini kullanın (inline-size, margin-inline…) — menüler RTL olarak da işlenir.

Bize Ulaşın

Bizi takip edin

Giriş yap Başlayın