Shopify 主题开发路线:OS 2.0 与 Liquid 的工程化实践

前言

主题开发决定了消费者在店铺里看到的每一个像素。它更前端、更贴近转化,但也要遵守 Shopify 的结构规范。Online Store 2.0 提供了 JSON 模板和可配置区块,让主题开发变得更像组件化工程。

本文面向工程师,从结构、工具链到最佳实践给出清晰路径。

1. 适用场景

• 商品页/集合页布局优化
• 品牌视觉升级
• 提升转化的前端模块
• 不需要后台业务逻辑的纯展示能力

2. 核心技术栈

• Liquid 模板语言
• JSON Templates
• Sections / Blocks 组件化
• Theme App Extensions(推荐)

3. 本地开发与调试

主题开发的本地方式:

shopify theme dev

如果你在应用项目内开发主题扩展:

shopify app dev

4. OS 2.0 目录结构

• templates/*.json:页面结构定义
• sections/*.liquid:可配置区块
• snippets/*.liquid:小组件
• assets/*:CSS/JS/图片

JSON 模板示例:

{
  "sections": {
    "main": { "type": "main-product" },
    "usp": { "type": "usp-block" }
  },
  "order": ["main", "usp"]
}

5. Section 工程化建议

• 每个功能独立一个 section
• 通过 schema 暴露可配置项
• 样式尽量局部作用域

Liquid schema 示例:

{% schema %}
{
  "name": "Hero Banner",
  "settings": [
    { "type": "text", "id": "title", "label": "标题" },
    { "type": "image_picker", "id": "bg", "label": "背景图" }
  ]
}
{% endschema %}

6. Theme App Extensions:避免直接改主题

如果你的功能来自 App,请优先用 Theme App Extensions:

• 不直接修改主题代码
• 支持版本发布与回滚
• 可在主题编辑器中拖拽配置

生成方式:

shopify app generate extension

选择 Theme app extension,并在 block 中渲染你的内容。

7. 常见坑

• 过度依赖 ScriptTag,导致兼容性差
• 没有区分 OS 2.0 与旧主题
• CSS/JS 命名冲突造成 UI 异常
• 忽略多语言/多币种

结语

主题开发的核心是结构化、可配置和可维护。OS 2.0 已经把最佳实践写进了平台,你需要做的是遵循它,并把复杂业务放到数据或应用层,而不是塞进 Liquid。这样主题才不会失控。