آغاز کریں
تھیمز ہیں سینڈ باکسڈ Liquid — صرف ڈیٹا ٹیمپلیٹس جو ایک مقررہ ڈیٹا کنٹریکٹ کے خلاف سرور سائیڈ رینڈر ہوتے ہیں۔ تھیمز شپ کرتی ہیں صفر JavaScript: کارٹ، آئٹم آپشنز اور چیک آؤٹ پلیٹ فارم کامرس رن ٹائم سے آتے ہیں، جس سے آپ کا markup اعلانیہ طور پر جڑتا ہے۔
اسٹارٹر تھیم ڈاؤن لوڈ کریں (.zip)
- اسٹارٹر ڈاؤن لوڈ کریں اور unzip کریں۔
- نام تبدیل کریں
slugمیںtheme.json. - سیکشنز میں ترمیم کریں
sections/; snippets شامل کریںsnippets/. - فولڈر کے مواد کو 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
AnnouncementDrop
key string
text 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
FeaturesDrop
age_gate bool
call_waiter bool
catering bool
coupons bool
curbside bool
customer_wallet bool
dietary_filters bool
expiry bool
fitment bool
gift_cards bool
google_review bool
loyalty bool
meal_plans bool
multi_currency bool
reservations bool
scheduling bool
service bool
store_reviews bool
tips bool
variant_goods bool
waitlist bool
FlagsDrop
allow_order bool
delivery bool
on_table bool
payment bool
room_service bool
scheduling bool
takeaway bool
HoursDrop
closes_at string
has_hours bool
is_open bool
manual_closed bool
now_time string
opens_at string
state string
today string
today_key string
week array
ItemDrop
age_restricted bool
available_from_label string
available_now bool
description string
dietary_tags array
discount_percent int
expiry_date string
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
on_offer bool
option_groups array
original_price float
price float
pricing_unit string
rating float
rating_count int
reviews array
schedule_label string
sku string
stock_qty int
stock_status string
turnaround_hours 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
PlatformDrop
brand_name string
brand_url string
hide_branding bool
RestaurantDrop
address string
color string
cover string
description string
id int
logo string
main_image string
phone string
slug string
store_type string
sub_title string
title string
ReviewsDrop
author string
body string
created_at string
id int
is_verified bool
rating int
SectionDrop
blocks array
id string
settings App\Storefront\Drops\SettingsDrop
type string
SettingsDrop
SocialDrop
address string
facebook_url string
google_review_url string
instagram_url string
maps_url string
phone string
whatsapp string
whatsapp_url string
StatsDrop
scans_today int
StoryDrop
caption string
cta_label string
cta_url string
id int
image_url string
TableDrop
id int
table_no string
VariantDrop
id int
name string
price float
VocabDrop
add_to_cart string
board string
catalog string
categories string
category string
create_item string
group string
item string
items string
order string
orders string
فلٹرز اور ٹیگز
پلیٹ فارم فلٹرز (نیز معیاری محفوظ Liquid سیٹ — escape، date، where، map، sort، size…):
media_urlmoneymoney_codestudio_blockstudio_textttheme_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 بھی رینڈر ہوتے ہیں۔
