آغاز کریں

تھیمز ہیں سینڈ باکسڈ Liquid — صرف ڈیٹا ٹیمپلیٹس جو ایک مقررہ ڈیٹا کنٹریکٹ کے خلاف سرور سائیڈ رینڈر ہوتے ہیں۔ تھیمز شپ کرتی ہیں صفر JavaScript: کارٹ، آئٹم آپشنز اور چیک آؤٹ پلیٹ فارم کامرس رن ٹائم سے آتے ہیں، جس سے آپ کا markup اعلانیہ طور پر جڑتا ہے۔

اسٹارٹر تھیم ڈاؤن لوڈ کریں (.zip)

1. اسٹارٹر ڈاؤن لوڈ کریں اور unzip کریں۔
2. نام تبدیل کریں slug میں theme.json.
3. سیکشنز میں ترمیم کریں sections/; snippets شامل کریں snippets/.
4. فولڈر کے مواد کو zip کریں اور اسے جائزے کے لیے جمع کرائیں۔

پیکیج لے آؤٹ

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

حدیں: 10 MB ZIP کوڈ 2 MB فی فائل، فولڈر گہرائی ≤ 3۔ اجازت شدہ فائل اقسام: .liquid .json .css .png .jpg .jpeg .webp .svg .woff2. کوئی PHP نہیں۔ کوئی JavaScript نہیں۔ SVGs میں کوئی script یا foreignObject نہیں ہونا چاہیے۔

theme.json مینی فیسٹ

{
  "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"
}

ٹیمپلیٹس اور سیکشنز (OS 2.0)

templates/index.json فہرست دیتا ہے سیکشن انسٹینسز; ہر سیکشن ایک Liquid فائل ہے اس میں sections/ اپنا settings schema ایک schema بلاک میں لے کر۔ حدیں: ≤ 25 سیکشنز فی ٹیمپلیٹ، ≤ 50 بلاکس فی سیکشن۔

// 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"]
}

کسی سیکشن فائل کے اندر آپ کو ملتا ہے section.id, section.type, section.settings.* اور section.blocks (ہر بلاک: id / type / settings.*). ترتیب کی اقسام: text, textarea, color, checkbox, select (اختیارات), range (min/max), image_picker.

ڈیٹا — Drop حوالہ

ٹیمپلیٹس اس تک پہنچ سکتے ہیں صرف نیچے دی گئی خصوصیات (پلیٹ فارم کی Drop کلاسز سے تیار کردہ — یہ ٹیبل بہک نہیں سکتی)۔ Globals: restaurant, options, settings, menu, allergies, banners, branches, active_branch, table, customer, localization, flags, stats, اور section سیکشن فائلوں کے اندر۔ اور کوئی بھی چیز خالی رینڈر ہوتی ہے (اور اپ لوڈ پر خرابی دیتی ہے)۔

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

فلٹرز اور ٹیگز

پلیٹ فارم فلٹرز (نیز معیاری محفوظ Liquid سیٹ — escape، date، where، map، sort، size…):

media_urlmoneymoney_codettheme_asset

• t — ایک key کا ترجمہ کریں۔ صرف پڑھنے کے لیے؛ نامعلوم keys خود key واپس کرتی ہیں۔
• money / money_code — ریستوران کی کرنسی کے ساتھ ایک قیمت فارمیٹ کریں۔
• media_url — ریستوران کی تصویر URL: {{ item.image | media_url: 'menu' }} (اقسام: menu، logo، cover، allergy، banner).
• theme_asset — آپ کے کسی بنڈل کردہ اثاثے کا URL: {{ 'css/style.css' | theme_asset }}.

ٹیگز schema (سیکشن ترتیبات، آؤٹ پٹ سے ہٹا دی گئیں), render (نام کے لحاظ سے snippets — آپ کا snippets/ صرف dir), commerce (فی صفحہ ایک بار کامرس رن ٹائم اخراج کرتا ہے). نامعلوم فلٹرز/ٹیگز اپ لوڈ پر ناکام ہو جاتے ہیں۔

کامرس رن ٹائم

ڈراپ {% commerce %} ایک بار (عام طور پر آپ کے ٹیمپلیٹ کے اختتام پر)، پھر data attributes سے جوڑیں — رن ٹائم کارٹ اسٹیٹ، آپشن شیٹ اور چیک آؤٹ کا مالک ہے:

<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>

رن ٹائم UI کو اس کے ذریعے سکن کریں .mb-* کلاسز اور CSS custom properties (--mb-sheet-bg, --mb-sheet-ink, --mb-accent).

مرچنٹ ترتیبات

مرچنٹس آپ کے schemas کے خلاف ڈیش بورڈ میں آپ کی تھیم کو حسبِ ضرورت بناتے ہیں۔ ترجیح: schema defaults ← template values ← merchant values۔ ترتیبات تھیم ورژن سے آزادانہ طور پر محفوظ ہوتی ہیں، اس لیے اپ ڈیٹ شپ کرنا کبھی کسی مرچنٹ کی حسبِ ضرورت کاری کو نہیں مٹاتا.

اصول اور حدیں

• نہیں <script>, کوئی inline event handlers نہیں، کوئی نہیں javascript: URLs، کوئی iframes نہیں — اپ لوڈ پر مسترد۔
• صارف کو نظر آنے والے ڈیٹا کو escape کریں: {{ item.name | escape }}.
• رینڈرز وسائل کے پابند ہیں (آؤٹ پٹ لمبائی + انجن کام کی حدیں)۔ رن ٹائم پر ناکام ہونے والا سیکشن چھوڑ دیا جاتا ہے، کبھی خالی صفحہ نہیں؛ اپ لوڈ پر یہ سخت خرابی ہے۔
• شائع شدہ ورژنز ناقابلِ تبدیل ہیں — اپ ڈیٹس جائزے کے ذریعے نئے ورژنز ہیں۔
• منطقی CSS خصوصیات استعمال کریں (inline-size, margin-inline…) — مینوز RTL بھی رینڈر ہوتے ہیں۔