शुरू करें
थीम हैं sandboxed Liquid — केवल-डेटा टेम्प्लेट जो एक निश्चित डेटा contract के विरुद्ध सर्वर-साइड रेंडर किए जाते हैं। थीम भेजती हैं शून्य JavaScript: कार्ट, आइटम विकल्प और चेकआउट प्लेटफ़ॉर्म commerce runtime से आते हैं, जिससे आपका मार्कअप घोषणात्मक रूप से बाँधता है।
स्टार्टर थीम (.zip) डाउनलोड करें
- स्टार्टर डाउनलोड करके अनज़िप करें।
- इसका नाम बदलें
slugमेंtheme.json. - इसमें सेक्शन संपादित करें
sections/; इसमें स्निपेट जोड़ेंsnippets/. - फ़ोल्डर सामग्री को ज़िप करें और समीक्षा के लिए सबमिट करें।
पैकेज लेआउट
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 पिन कोड 2 MB प्रति फ़ाइल, फ़ोल्डर गहराई ≤ 3। अनुमत फ़ाइल प्रकार: .liquid .json .css .png .jpg .jpeg .webp .svg .woff2.
कोई PHP नहीं। कोई JavaScript नहीं। SVG में कोई 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/ अपनी सेटिंग्स 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
(न्यूनतम/अधिकतम), 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— किसी कुंजी का अनुवाद करें। केवल-पढ़ने योग्य; अज्ञात कुंजियाँ कुंजी को ही लौटाती हैं।money/money_code— रेस्तराँ की मुद्रा के साथ किसी कीमत को प्रारूपित करें।media_url— रेस्तराँ छवि URL:{{ item.image | media_url: 'menu' }}(प्रकार: menu, logo, cover, allergy, banner).theme_asset— आपके किसी एक बंडल किए गए asset का URL:{{ 'css/style.css' | theme_asset }}.
टैग्स schema (सेक्शन सेटिंग्स, आउटपुट से हटा दी गईं), render
(नाम के अनुसार स्निपेट — आपका snippets/ केवल dir), commerce (प्रति पेज एक बार commerce runtime उत्सर्जित करता है). अज्ञात फ़िल्टर/टैग अपलोड पर विफल होते हैं।
कॉमर्स रनटाइम
ड्रॉप {% commerce %} एक बार (आमतौर पर आपके टेम्प्लेट के अंत में), फिर data attributes के साथ बाँधें — runtime कार्ट स्थिति, विकल्प शीट और चेकआउट का स्वामी है:
<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>runtime UI को इसके जरिए स्किन करें .mb-* क्लासें और CSS कस्टम प्रॉपर्टीज़
(--mb-sheet-bg, --mb-sheet-ink, --mb-accent).
मर्चेंट सेटिंग्स
मर्चेंट आपकी थीम को डैशबोर्ड में आपके schemas के विरुद्ध कस्टमाइज़ करते हैं। प्राथमिकता: schema डिफ़ॉल्ट ← टेम्प्लेट मान ← मर्चेंट मान। सेटिंग्स थीम संस्करण से स्वतंत्र रूप से संग्रहीत होती हैं, इसलिए कोई अपडेट भेजना कभी किसी मर्चेंट की कस्टमाइज़ेशन को मिटाता नहीं.
नियम और सीमाएँ
- नहीं
<script>, कोई इनलाइन event handler नहीं, कोई नहींjavascript:URL नहीं, कोई iframe नहीं — अपलोड पर अस्वीकृत। - उपयोगकर्ता-दृश्य डेटा को escape करें:
{{ item.name | escape }}. - रेंडर संसाधन-सीमित हैं (आउटपुट लंबाई + इंजन कार्य सीमाएँ)। कोई सेक्शन जो runtime पर विफल होता है उसे छोड़ दिया जाता है, कभी खाली पेज नहीं; अपलोड पर यह एक कठोर त्रुटि है।
- प्रकाशित संस्करण अपरिवर्तनीय हैं — अपडेट समीक्षा के जरिए नए संस्करण होते हैं।
- तार्किक CSS प्रॉपर्टीज़ का उपयोग करें (
inline-size,margin-inline…) — मेन्यू RTL में भी रेंडर होते हैं।
