纯文字版教程展开阅读
第二阶段 商品与店铺结构
选择和预览主题,建立发布前备份,理解 Sections、Blocks、Theme settings 与 Templates,再按首页、集合页和商品页完成移动端装修验收。
Online Store > Themes > Edit theme90分钟
第二阶段 商品与店铺结构
这一课为什么要先做
装修最容易把时间耗在颜色、动画和细节上,却没有先处理页面顺序、移动端首屏和购买路径。另一个风险是直接改 live theme,没有备份和变更记录。主题课只做能影响理解、信任和加购的结构,不追求一次把品牌视觉做完。
做完以后要留下什么
一份带日期的主题备份、页面模板清单、首页与商品页结构图、移动端截图和每项修改的回滚方法。
开始前准备
- 商品与集合至少已有一组可预览内容。
- 准备品牌 logo、字体规则、主辅色和真实产品图片,不用占位图上线。
- 写出首页和商品页必须回答的五个问题,再开始拖模块。
跟着英文后台一步一步做
每做完一步就刷新页面或从前台验证一次。后台显示已保存,不代表客户看到的结果一定正确。
选择并预览主题
在 Online Store > Themes 查看当前主题和 Theme Store 选项。先用 Preview 检查商品页、集合页、菜单、搜索、购物车和移动端,不要只看主题示例首页。
复制主题并命名备份
对当前主题执行 Duplicate,命名为日期加用途,例如 2026-08-01-before-launch. 所有装修先在副本完成。记录谁在什么时候改了什么。
理解 Sections、Blocks 与 Theme settings
进入 Edit theme。Section 是页面模块,Block 是模块内元素,Theme settings 控制全局颜色、字体、按钮和布局。先改全局,再处理单页,避免同一个样式在多个地方重复修。
整理首页的信息顺序
首屏说明卖什么、适合谁和下一步,后面再放核心卖点、主推商品、信任信息、使用场景、FAQ 和邮件订阅。每个 Section 只承担一个主要任务,删除没有信息价值的默认模块。
建立商品和集合 Templates
需要不同结构的商品再创建独立 template,不要为每个 SKU 都复制一份。模板创建后还要回到商品或集合分配它。检查动态 source 是否正确读取当前商品。
完成预览、发布和回滚记录
用桌面与手机预览首页、集合、商品、购物车和搜索。确认按钮、文字、图片比例和 sticky elements 没有遮挡。保存截图后才发布副本,并保留上一版主题作为回滚。
North & Pine 案例怎么设置
North & Pine 复制 Dawn 或当前轻量主题,在副本中先完成全局字体、按钮和颜色,再整理首页。商品页保留图片区、标题价格、颜色、加购、配送承诺、详情和 FAQ 的清晰顺序。发布前用 390px 手机视口检查首屏和 sticky add-to-cart。
这一课需要做出的决定
| 项目 | 推荐设置 | 为什么 |
|---|---|---|
| 改动环境 | 主题副本 | 避免直接破坏在线版本 |
| 首页首屏 | 一句定位加主行动 | 先让新访客看懂店铺 |
| 模板数量 | 按页面职责 | 不同职责才拆模板 |
| 发布条件 | 五类页面双端通过 | 不能只验首页桌面版 |
这些地方先不要乱动
- 不要直接在 live theme 里试错。
- 不要为了好看保留没有任务的轮播、动画和装饰模块。
- 不要建立大量只差一点点的模板。
完成标准
下面每一项都能拿出证据,这一课才算完成。只说我看过了,不算验收。
- 主题副本和上一版回滚主题都存在。
- 全局样式与单页模块职责分开。
- 首页、集合、商品、购物车和搜索都通过双端预览。
- 模板已正确分配到商品或集合。
- 发布人、时间、变更和回滚步骤已记录。
常见问题和处理方式
| 现象 | 怎么处理 |
|---|---|
| 新模板前台没有生效 | 回到商品或集合的 Theme template 字段分配模板,再检查发布主题是否包含该模板。 |
| 移动端文字或按钮被遮挡 | 检查 Section padding、fixed 或 sticky 元素、App embed 和浏览器安全区,不要只缩小字体。 |
| 发布后效果变回旧版 | 确认发布的是正确副本,检查主题切换记录和自定义是否保存,必要时从上一版回滚。 |
把英文后台截图变成验收记录
本课的截图不是装饰,也不等于设置完成。以 Online Store > Themes > Edit theme 为例,先确认左侧导航和页面标题,再看当前选中的标签、开关、状态或记录。截图需要保留完整页面外壳和必要上下文,不能只截一个按钮。这样回看时能回答两个问题:当时在哪个页面,页面当时到底显示了什么。
North & Pine 在本课要处理的是主题副本、Sections、Blocks、Templates 和移动端首屏。本课案例的验收重点是让 North & Pine 的修改都发生在可回滚副本中,并能在手机视口复核。按钮显示可点击,只证明下一步存在,不代表审核、同步、保存或前台结果已经通过。如果画面出现 pending、review、unavailable、错误提示或空状态,就把它记录为待确认,不要把它写成已经完成。
先看路径,再看设置
打开英文截图时,先读出左侧导航、页面标题、当前标签和可见状态,再去读字段值。截图说明同时写下页面路径、要验证的事实、负责人和下次复核时间。页面较长时可以用全页截图或两张连续截图,但每张都要保留路径和标题。
发布前仍要做隐私检查。即使使用 dev store,也要遮住邮箱、电话、地址、客户姓名、订单号、域名、App 标识、API key、二维码和浏览器 Cookie。优先使用不透明遮罩或重新裁切。英文版保留后台原文,中文版在图片下增加一行中文说明。
一项设置对应三层证据
对主题副本、Sections、Blocks、Templates 和移动端首屏,把验收拆成配置、行为和记录。配置证据说明后台值已经保存,行为证据说明店面、订单或相关结果确实发生,记录证据说明谁在什么时候复核过。只拿到一层时,不能把整项写成通过。把截图文件名、检查日期、操作者、结论和待处理事项放进复盘表。
- 配置层:记录字段、开关、选项和保存后的状态,不要把默认值当成业务决定。
- 行为层:从前台、订单、通知或下一处关联设置回看结果,确认设置真的影响了流程。
- 证据层:给每个结论关联一张完整截图或连续截图,不用局部按钮图替代页面上下文。
- 边界层:写清地区、套餐、权限、审核、测试模式或第三方服务造成的例外。
出现分支时先暂停
Shopify 后台会因为经营地区、套餐、用户权限、测试数据、销售渠道和审核状态而显示不同选项。缺少按钮不一定是故障,也不一定说明功能关闭。先检查权限、适用地区、套餐和测试状态,再回到官方来源核对。若只能证明一部分,就标记部分完成并说明缺口。支付、税务、域名和客户数据不能用一张测试截图冒充真实上线结果。
本课复盘表
把下面的表复制到团队任务记录中。可证明什么只描述截图确实支持的结论,还不能证明什么用来防止过度解读。
| 检查对象 | 截图中要读什么 | 可证明什么 | 还不能证明什么 |
|---|---|---|---|
| 主题副本、Sections、Blocks、Templates 和移动端首屏 | 路径、标题、当前状态和关键值 | 本次后台检查看到的配置事实 | 前台或第三方服务已经完成全部处理 |
| 关联结果 | 前台、订单、通知或相关设置的返回结果 | 设置对当前测试流程产生的影响 | 所有市场和未来订单都会得到同样结果 |
| 责任记录 | 日期、操作者、文件名和结论 | 谁完成了哪一步,以及证据在哪里 | 审核机构已经替团队做出最终决定 |
| 例外边界 | 权限、地区、套餐、审核或待处理提示 | 当前结果适用的前提 | 可以跳过条件复制到生产店铺 |
课后自测
- 能说出本课的后台路径、当前目标和一项不能由截图单独证明的事情。
- 能指出完整截图中的页面标题、关键字段、状态和对应的实际结果。
- 能把配置、行为和记录三层证据分别写进复盘表,而不是只写已完成。
- 能根据证据决定下一步Pages、Menus 与导航,或者明确写下阻塞条件和负责人。
完成本课不等于把所有按钮点成绿色。完成标准是当前判断有足够证据、边界写得清楚、下一步有人负责。如果任何一层证据缺失,就保留待确认状态,不要为了赶进度推进到Pages、Menus 与导航。
常见问题
改主题前一定要 Duplicate 吗?
强烈建议。副本能让你预览、比较和回滚,也能减少多人同时修改 live theme 的风险。
Sections 和 Blocks 有什么区别?
Section 是页面上的一个完整模块,Block 是模块内部可重复或可配置的元素。不同主题允许的层级和能力会有差异。
应该什么时候新建 product template?
当一组商品需要明显不同的页面职责或模块时再建。只是图片和文案不同,通常继续用同一模板和动态内容。
官方来源
后台名称和规则会更新。本课以这些官方页面作为维护基线,截图时也要按当前英文后台重新核对。