开始使用

主题是 沙盒化的 Liquid — 仅数据的模板,依据固定的数据契约在服务端渲染。主题交付时 零 JavaScript: 购物车、商品选项和结账均来自平台商务运行时,您的标记以声明式方式与之绑定。

下载入门主题(.zip)

  1. 下载并解压入门主题。
  2. 重命名 slugtheme.json.
  3. 编辑板块,位于 sections/; 添加代码片段,位于 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 邮编 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 区块中携带其设置架构。限制: ≤ 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 类生成——此表格不会与实际脱节)。全局变量: 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 — 翻译一个键。只读;未知的键会返回该键本身。
  • 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/ 目录,仅限于此), commerce (每页发出一次商务运行时). 未知的过滤器/标签会在上传时失败。

商务运行时

Drop {% commerce %} 一次(通常放在模板末尾),然后用 data 属性进行绑定——运行时负责购物车状态、选项面板和结账:

<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 自定义属性 (--mb-sheet-bg, --mb-sheet-ink, --mb-accent).

商家设置

商家会在仪表盘中依据您的架构自定义您的主题。优先级:架构默认值 ← 模板值 ← 商家值。设置独立于主题版本存储,因此 发布更新绝不会抹除商家的自定义设置.

规则与限制

  • <script>, 不允许内联事件处理程序,不允许 javascript: URL,不允许 iframe——上传时会被拒绝。
  • 对用户可见的数据进行转义: {{ item.name | escape }}.
  • 渲染受资源限制(输出长度 + 引擎工作量上限)。在运行时失败的板块会被跳过,绝不会出现空白页面;而在上传时它则是一个致命错误。
  • 已发布的版本不可变——更新是经过审核的新版本。
  • 使用逻辑 CSS 属性 (inline-size, margin-inline…) — 菜单也会以 RTL 渲染。

联系我们

关注我们