把模块装进主题的
完整教程
每个模块都是一个自包含的 .liquid 文件，不依赖任何 App、代码库或主题全局样式。跟着下面的步骤，三分钟内就能在你的店铺里用上。
01准备工作
开始之前，请确认以下两点，避免后面卡住。
确认主题是 Online Store 2.0
模块基于 OS 2.0 的 section 架构。Dawn、Sense、Craft、Prestige、Impulse 等 2021 年后的主题均支持。判断方法：主题编辑器左侧若能对任意页面「添加分区」，就是 OS 2.0。
老式 vintage 主题（如未升级的 Debut）只能在首页添加 section，建议先升级主题。
确认你有主题代码编辑权限
需要店铺的「主题」权限（店主或被授权的员工账号）。建议先 复制一份主题 再操作：主题卡片 → … → 复制，改动只影响副本，随时可回滚。
02安装步骤
以任意模块为例，从复制到确认效果共六步。
复制模块代码
在模块库中找到需要的模块，点击卡片右下角的复制按钮；或进入详情页，切到「代码」视图确认内容后点击「复制完整 .liquid 代码」。完整源码（HTML + CSS + JS + schema）会进入剪贴板。
打开主题代码编辑器
在左侧文件树中找到 sections/ 目录。正式店铺建议先操作复制出来的草稿主题，确认没问题后再发布。
新建 section 文件
点击 sections/ 下的「添加新 section」，选择 liquid 类型，文件名使用模块详情页顶部标注的文件名（如 dropin-hero-split，无需输入 .liquid 后缀）。
保持文件名与模块一致可以避免与主题现有 section 冲突，也方便以后对照更新。
粘贴并保存
删除新文件中自动生成的全部占位代码，粘贴剪贴板里的模块代码，点击「保存」。若保存报错，多半是没删干净默认代码导致出现了两个 {% schema %} 块。
sections/ 目录下，保存成功后才会出现在主题编辑器的「添加分区」里。在页面中添加分区
回到主题编辑器（自定义），刷新页面后在目标页面点击「添加分区」，按 schema 中的名称搜索（与模块标题一致），点击即插入，自带一套可直接预览的默认内容。
打开预览确认效果
点击主题编辑器右上角的「预览」，检查模块是否显示、按钮链接是否正确、桌面和手机宽度下是否有文字挤压或横向滚动。确认无误后再发布主题或复制到正式主题。
提示：模块默认允许添加到所有页面模板。首页、产品页、集合页、博客、自定义页面（page）都可以用，同一页也可以插入多个不同模块自由排序。
03在编辑器中配置
所有内容都通过主题编辑器可视化修改，不需要再碰代码。
修改文案、图片和链接
选中分区后，右侧设置面板按「内容 → 样式 → 间距」分组。标题、副标题、按钮文字与跳转地址、图片都在这里替换；图片建议按设置项说明的推荐尺寸上传，加载更快。
增删和排序 blocks
带重复内容的模块（FAQ 条目、评价、特性卡片、时间轴节点等）使用 blocks 组织。在分区下点击「添加块」新增一条，拖动手柄排序，点击块可单独编辑，删除即隐藏对应内容，布局会自动适应。
调整上下间距
每个模块都提供「顶部内边距 / 底部内边距」滑块，用来控制与相邻分区的呼吸感，无需写 CSS。
04进阶技巧
想再进一步，可以直接在 section 文件里做轻量定制。
调整品牌色和字体
模块的颜色大多集中在文件顶部的 CSS 自定义属性或 {% style %} 块中，搜索十六进制色值（如 #ff2d16）统一替换即可换成品牌色。字体默认继承系统字体栈，可改为主题字体变量。
同一页面使用多个实例
所有模块用 section.id 生成实例级 ID 和事件作用域，同一模块在一页里添加多次也不会互相干扰，直接加即可。
更新到模块新版本
模块更新后，在详情页重新复制代码，覆盖 sections/ 下同名文件的全部内容并保存。编辑器里已配置的文案和图片依赖设置项 ID，同名设置会自动保留。
移除模块
先在主题编辑器中把分区从页面移除，再到代码编辑器删除对应的 .liquid 文件即可，不会留下任何残余样式或脚本。
05常见问题
遇到问题先查这里，覆盖了绝大多数情况。
「添加分区」里搜不到新模块？
先确认 section 文件已成功保存且没有报错；然后刷新主题编辑器页面。如果仍然没有，检查文件是否创建在 sections/ 目录（而不是 snippets/），以及粘贴的代码是否完整包含结尾的 {% endschema %}。
保存时提示 schema 错误？
最常见原因是新建文件时 Shopify 自动生成的模板代码没有删干净，导致文件里出现两个 {% schema %} 块。全选删除后重新粘贴一次即可。
会拖慢主题速度吗？
不会有可感知影响。每个模块的 CSS / JS 都内联在 section 内、只在页面用到时加载，不引入外部库和字体，图片默认懒加载。
模块样式会和主题冲突吗？
不会。所有类名、动画和事件都带模块专属前缀（di- 命名空间），不使用 body、button 等全局选择器，也不依赖主题的任何 CSS / JS。
能在产品页 / 集合页 / 博客用吗？
可以。模块默认对所有页面模板开放，在对应模板的主题编辑器里「添加分区」即可。个别仅适合特定场景的模块（如公告栏）也可以放在任意位置。
动效在部分用户设备上没有播放？
这是刻意为之：所有模块遵循系统的「减弱动态效果」（prefers-reduced-motion）设置，开启该设置的访客会看到无动画的静态版本，属于无障碍最佳实践。