AI 能生成一个看起来正常的 Shopify section，但生成不了一个你能改的

起因是一个主题里的 section 拖不动。在主题编辑器里可以把它拿起来、拖动，松手之后它回到原位。控制台没有任何报错，编辑器也没有提示，前台渲染完全正常。

原因是标记里写死了一个 ID。这个 section 用的是 id="hero-1"，而不是 {{ section.id }}。Shopify 靠这个值区分不同的 section 实例，所以同一个 section 出现两次时，两个实例的 ID 相同，编辑器无法判断你拖动的是哪一个。把写死的值改成 {{ section.id }} 之后就正常了。

那个主题是 AI 工具生成的。下面四个问题是我在这类主题里反复遇到的，其中两个表现为编辑器里的 bug，另外两个要过几个月才暴露。

#一、section 标记里写死 ID

Liquid section 的身份要用 {{ section.id }}。写死的值在页面上只有一个实例时能用。一旦同一页出现第二个实例，两处渲染出来的 ID 就一样了。前台仍然显示正常，编辑器开始不可预测。

#二、缺少 presets

需要让店主自己添加的 section，schema 里必须有 presets 数组。没有它，section 在模板里已有的位置照常渲染，所以视觉检查能过，只是永远不会出现在"添加区块"菜单里。

{{ block.shopify_attributes }} 同理。区块上少了它，区块能渲染，但在编辑器里选不中，店主没法改设置、也没法调整顺序。

这两个问题只有真正去编辑主题时才会暴露，所以它们能通过代码审阅、截图检查和演示。

#三、CSS 写在 section 标记里

很多生成出来的 section 会把 <style> 块直接写在 section 内部。这样做能生效，代价有两个：规则会在该 section 出现的每一页重复加载；两个 section 定义同一个选择器时，结果取决于加载顺序，而不是取决于这个样式归哪个文件所有。Shopify 的 {% stylesheet %} 标签正是为了解决这件事，一次请求、自动去重、作用域限定在该 section。

响应式规则也是同一个问题。生成的 section 通常只包含桌面端布局，漏掉 750px 的断点。结果是 1440px 下测试全绿，上手机就崩。对于一个流量主要来自手机的店，那正是最关键的那一档。

#四、主题更新后代码消失

主题更新发布时，Shopify 会保留店主的设置和模板改动，自定义代码也不会动。但落在主题自身结构之外的代码，可能在新版本里不存在了。这条代价最高：店里留下一个功能，没有可读的源码，也没人记得它当初是怎么做的。

#Shopify 官方对此的说法

Shopify 的主题支持页面把"AI 生成的主题区块"列入了客服不受理的范围。也就是说，如果写代码的人已经联系不上，店主没有官方支持渠道。

官方主题店的上架要求，标准也高于"能渲染出来"：

首页、商品页、集合页在桌面和移动端取平均，Lighthouse 性能至少 60、无障碍至少 90，并且要求这些 section 里有真实内容。
代码必须原创。基于 Dawn 或 Horizon 派生的主题不能作为新提交。
不允许假倒计时、假低库存这类造假紧迫感的组件。

这些要求只作用于官方主题店。在其他渠道出售的主题不会按这套标准审核。

#任何主题都能做的五分钟检查

打开主题编辑器，找一个有 section 的页面，试着把其中一个拖到别的位置。
看这个 section 在不在"添加区块"菜单里。
用手机打开店铺，加购一件商品，一路走到购物车页面。
按 Tab 键遍历页面，确认能看出焦点在哪个元素上。

如果 section 拖不动、不在菜单里、手机端排版崩了，或者看不到焦点提示，这个主题在店主的日常使用中会出问题。

#我怎么做 section

我做了一套给宠物店用的主题，44 个 section、20 个页面模板。每个 section 都用 {{ section.id }}，都带 presets，区块上都写了 {{ block.shopify_attributes }}，CSS 统一放在 stylesheet 标签里。

发布前我在首页、集合页、商品页上跑了从 375px 到 1440px 六档宽度，检查横向溢出、破图、死链和键盘陷阱。所有宽度横向溢出为 0。触控目标全部不小于 24×24，以满足 WCAG 2.5.8 的底线，为此把六个一开始偏小的链接样式改了一遍。

这些在截图里都看不出来，只有在店主自己去改店的时候才会体现。