Shopify 首页(index)配方
首页承载店面根路径 /,顾客的任务是判断“这家店卖什么、是否值得继续看、下一步去哪里”。它对应 Shopify 的 index template type;本库 URL 使用 homepage,因为 index 作为文件名会与目录索引语义和 /zh/shopify 路由冲突,这只是本库的命名,不改变 Shopify 侧的名称。
index 只有一个默认业务页面,所以本文同时是 Template type 入口和页面配方。检索路径是:
index→ 是否需要 alternate 或市场差异 → 首页组成 → 页面内容清单 → 内容 × 展现 → Theme 实现
先读 Template type 与 alternate template 确认平台边界。公告栏、页头、页脚属于跨页面的全局区域,不在首页配方内排序,见全局店面区域。
首页是页面原型,不是唯一组合
首页没有“标准模块清单”。同一个 index 可以由两种常见组成落地,选择依据是顾客进入时最缺什么。
| 判据 | 品牌发现型 | 商品直达型 |
|---|---|---|
| 顾客进入时的状态 | 不认识品牌,来自广告、媒体或口碑 | 已带着品类意图,来自搜索或复购 |
| 品类规模 | 多个品类,需要先选范围 | 少品类或单品类,商品本身就是入口 |
| 品牌是否需要解释 | 定位、来源或做法决定是否购买 | 品牌不是决策的主要障碍 |
| 首屏先回答 | 我们是谁、为什么不同 | 有什么、现在买哪个 |
| 证据的作用 | 建立初步信任,再进入商品 | 补充商品决策,篇幅更短 |
无法判断时,先按顾客问题而不是主题现成 Section 决定。两种组成可以混用:例如多品类但复购客户占多数的店,可以把特色商品提到分类之前。以下顺序都是待验证的编辑假设,没有实测数据支持任何一种顺序更有效。
页面内容清单
首页内容分两类:来自内容类型的可复用编辑内容,与运行时读取的资源数据。后者不改写成静态文案。
编辑内容(内容类型)
| 优先级 | 页面内容 | 回答的问题 | 来源边界 |
|---|---|---|---|
| 核心 | 核心主张 | 现在最重要的价值或活动是什么 | 长期主张与限时活动分开,活动带起止时间 |
| 核心 | 商品分类 | 我可以按什么范围开始浏览 | 目标集合必须存在且非空 |
| 核心 | 特色商品 | 现在优先看哪些商品,为什么 | 入选理由与期限来自运营规则 |
| 可选 | 品牌故事摘要 | 为什么值得相信这个品牌 | 引用权威条目,只取当前任务需要的一段 |
| 可选 | 价值观与责任声明 | 品牌坚持什么、能否证明 | 每条声明有范围与证据 |
| 可选 | 媒体报道、第三方评价、数据证明 | 是否有外部证据 | 各自权威条目,评分与数字带日期和口径 |
| 可选 | 顾客评价片段 | 买过的人怎么说 | 必须指明对应商品 |
| 可选 | 促销与折扣 | 当前有什么优惠 | 规则以促销条目和结账实际执行为准 |
| 可选 | 邮件订阅邀请 | 想持续收到什么、怎样退出 | 同意与退出规则 |
运行时数据
| 数据 | 用途 | 风险 |
|---|---|---|
| 集合列表与集合成员 | 分类入口、特色商品的候选来源 | 集合为空、未发布或市场不可见 |
| 商品、价格、图片、可售状态 | 商品卡 | 与当前市场、币种、变体不一致 |
| 菜单 | 页头导航与首页入口的目标 | 与首页分类入口重复或冲突 |
不要用商品卖点代替品牌事实,也不要在首页集齐所有内容类型。首页每增加一段,就要能说出它回答的具体问题。
页面组合
品牌发现型
核心主张 × Hero → 证据条 × Logo/评分行 → 商品分类 × Image Grid → 特色商品 × Product Cards → 品牌故事摘要 × Image With Text → 订阅邀请 × Inline Form
| 段落 | 回答的问题 | 模块与展现 | 缺失时 |
|---|---|---|---|
| 核心主张 | 我在哪里、这家店做什么 | Hero,引用核心主张 | 不能删除;没有已核实主张时退回一句店铺定位,不用占位口号 |
| 证据 | 这家店有据可查吗 | 证据条,可含 Marquee 或静态 Logo 行 | 没有可追溯的外部证据就整段删除,不用无来源徽章填充 |
| 分类 | 我从哪个范围开始 | 商品分类 × Grid | 少于两个有意义分类时删除,直接进入特色商品 |
| 特色商品 | 现在先看哪几个 | 特色商品 × Cards 或 Carousel | 可售商品不足时隐藏整段,不留空位 |
| 品牌故事 | 为什么信任你们 | Split 承载摘要,链接完整品牌故事 | 没有可核实内容就删除;品牌解释不构成购买障碍时也可删除 |
| 订阅 | 想不想持续联系 | 订阅获取 × Inline Form | 没有可兑现的发送计划就不放表单 |
商品直达型
核心主张 × 精简 Hero 或标题 → 特色商品或热门集合 × Product Cards → 次要分类入口 × 文字链接 → 短证据条 → 订阅邀请
商品先行,品牌叙事压到最少:主张只保留一句,并在首屏内就能看到商品。品类很少时分类入口可整体删除;品牌故事移到 About Us 而不是首页。
最小成立组合
无论哪种组成,首页至少要让顾客完成一件事:进入某个商品或集合。最小组合是一句真实主张 + 一组可进入的商品或集合入口。其余模块都需要各自的删除条件:
| 模块 | 何时删掉 |
|---|---|
| 证据条 | 没有可追溯来源,或所有证据只适用于个别商品 |
| 商品分类 | 品类少于两个,或集合为空、重复 |
| 品牌故事 | 顾客决策不依赖品牌解释,或已有 About Us 足以承担 |
| 评价片段 | 无法指明对应商品,或授权与来源不清 |
| 订阅邀请 | 没有真实的发送计划,或同一页已有相同入口 |
| 站内搜索入口 | 首页不必再重复;搜索通常位于页头,见站内搜索 |
不应默认出现
- 完整的筛选面板:那是集合页和搜索结果页的任务,见集合浏览与筛选;
- 整段 FAQ、完整政策或长文,改为链接到对应页面;
- 单独展示某一商品评分而不指明商品:评价展示明确不建议;首页评价只用于指明商品的片段,品牌层证据走证据条;
- 同时出现多条相互竞争的限时活动。
内容 × 展现形式
| 内容 | 首选形式 | 适用条件 | 退化方式 |
|---|---|---|---|
| 核心主张 | Hero | 有一个明确价值和唯一行动目标 | 标题、一句限定与链接 |
| 证据 | Logo 行、评分摘要或 Marquee | 每项可点回权威条目 | 带来源的文字列表或整段删除 |
| 商品分类 | Image Grid 或文字链接列表 | 名称同层同维度,目标非空 | 少量文字链接 |
| 特色商品 | Product Cards,超过一屏时再考虑 Carousel | 有入选理由与期限 | 单个精选商品或整段删除 |
| 品牌故事摘要 | Split | 有能支持当前主张的一段事实 | 短文字与链接 |
| 订阅邀请 | Inline Form | 说明价值、频率和退出方式 | 隐藏或换成其他真实入口 |
状态与退化
- 商品或集合数量:特色商品零项时隐藏整段;一项时用单个精选商品而不是伪装成列表;数量多时限制数量,把完整浏览交给集合页。
- 分类目标失效:集合被删除、未发布或在当前市场不可见时,入口随之下线,不保留死链。集合可见性排查见集合与发布。
- 限时内容过期:活动型主张与促销到期后必须撤下或回退到长期主张,不依赖人工记得删除。
- 跨市场:价格、币种、可售状态和集合成员随市场变化;商品卡必须读当前上下文,不写死。
- 无图与小屏:移除图片后主张和分类仍可读;分类入口在小屏可换成文字链接。
- 加载与错误:首屏内容先于装饰性动效出现;分区渲染失败时隐藏该分区,不留下空标题。
Shopify Theme 实现
以下机制读自 Shopify 官方文档,核验于 2026-09-29。
| 层次 | 说明 |
|---|---|
| Template | index 渲染店面首页,路径为 /。官方页面写明主题最多可有 1000 个 JSON 模板(跨所有类型);gift_card、robots.txt 等五种模板必须是 Liquid,index 不在其中 |
| JSON template | 保存要渲染的 Section 列表、顺序与设置;官方页面写明一个 JSON 模板最多 25 个 Section,每个 Section 最多 50 个 Block;帮助中心写明每个模板最多 1250 个 Block |
| Sections | 商家能在主题编辑器中添加的 Section 必须在 schema 中定义 preset;没有 preset 的 Section 只能由代码包含,商家无法移除 |
| Blocks | 单个分类入口、单个证据项、单个特色商品位 |
| Settings | 主张文案、集合选择、商品选择、布局和媒体;不提供可以绕过事实有效期的开关 |
| 数据来源 | 集合与商品来自 Shopify 资源,由 Section 设置选择或读取;品牌故事、评价等由内容条目或应用提供 |
Shopify 官方文档没有为 index 规定“必须有 main Section”之类的约定(所读的 JSON templates 页面对 main Section 没有强制说明),首页因此完全由 Section 组合决定。静态渲染的 Section 不能被商家移除或重排,只有确实属于主题骨架的部分才应静态包含。
市场与 B2B 差异
index 是否需要 alternate,参照 Template type 与 alternate template:首页通常直接维护默认模板,市场或 B2B 差异先判断能否用覆盖表达。Shopify 帮助中心的说明如下:
- 覆盖在主题编辑器中按市场创建,可覆盖设置、显示与隐藏、Section 顺序和 Block 顺序四类;覆盖后的 Section 或 Block 不再自动继承默认版本的后续更新;
- 需要“使用 JSON 模板构建的兼容主题”;
- 按市场的情境化定制需要 Advanced 计划及以上,按客户类型(B2B 与 D2C)的定制需要 Shopify Plus;这是所读页面当前的说明,计划条件可能变化;
- 向默认版本添加 Section 时,已设置自定义 Section 顺序的市场不会自动获得,需要手动添加;
- 不能在主要语言不可用于该市场时修改 Section 或 Block。
Alternate templates 官方页面另写明:商家为特定买家情境(市场或 B2B)调整模板时,主题中会自动生成命名为 template-name.context.<context-string>.json 的情境模板,它与手工建立的 alternate 是两种东西,且官方页面写明不能用 alternate 替换默认模板。
所读的三页帮助没有列出覆盖支持哪些模板类型,因此首页是否适用、有哪些限制未核验;应在真实店铺的主题编辑器中确认后再设计多市场首页。只有覆盖仍不足以表达时,才评估 alternate template。
具体主题实现暂未逐项映射;已固定版本的解析见 Dawn 内容分区与动效、Dawn 邮件订阅与徽章与 Horizon 内容模块,商品卡见 Horizon 商品卡。
发布检查
- 移除图片后,首屏仍能说明这家店做什么;
- 每个分类和特色商品入口指向真实、非空、当前市场可见的目标;
- 限时主张和促销有起止时间,到期已按计划撤下;
- 证据条的每一项都能点回权威条目,品牌层证据没有写成商品层证据;
- 特色商品的入选理由可核对,价格与可售状态来自当前商品;
- 手机、键盘、减少动态效果和无 JavaScript 状态下主要入口可用;
- 多市场店铺在每个目标市场分别预览首页,而不是只看默认版本;
- 每个模块都能说出它回答的问题,说不出的删除。
待继续完善
- 缺少真实店铺样本,两种首页组成及其判据尚未用真实首页拆解验证;
- 覆盖功能对
index的支持范围、与 Section 增删的交互需在真实店铺确认; - 未核对首页作为 SEO 入口的结构化数据与主页标题规范,见 Shopify 店面 SEO 框架;
- 主题级映射(各 Section 的 preset 与设置)待固定主题版本后补充。