Shopify 主题与 Liquid

Shopify Liquid case/when 写错导致错乱

前台错乱信号#

按产品类型、模板后缀或元字段分支的模块显示错版:本该走 A 布局却落到 else,或所有 when 都不命中导致整块空白。主题编辑器里预览正常、真机加参数后错乱,也常见于 case 比较的是字符串而实际是对象。

机制说明#

{% case variable %}{% when 'a' %}...{% when 'b' %}...{% else %}...{% endcase %} 按精确匹配选择分支。易错点:when 值多写空格;比较了 product.template_suffix 却在后台没设后缀;对 product.type 用了本地化显示名而非后台原始类型名;漏写 endcase;在 when 里再开 case 却共用一个 endcase。when 可用逗号写多值(如 when 'a', 'b'),语法与 if 的 or 不同,照搬会失败。

排查动作#

  1. 在问题模板打印调试:{{ product.type | json }} 等,确认 case 左侧真实值(仅限预览主题,勿长期留在生产)。
  2. 让每个 when 字面量与调试输出逐字一致,去掉隐藏空格。
  3. 补齐 {% else %} 给出降级 UI,避免“全都不匹配就空白”。
  4. 嵌套 case 各自配对 endcase;参考 case 标签。
  5. 若分支依赖模板后缀,到商品后台「主题模板」核对后缀名。
  6. 修完后用至少三个不同 type/suffix 的商品各开一页验证。

验证#

目标分支文案与布局正确;未知类型走 else 而非报错;Theme Check 无 case 相关 error。

本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。