Shopify 知识库 · 指南
Shopify Store Locator 页面配方
从 page template type 出发,组织门店地点、营业状态、筛选、地图与 Theme 页面实现。
Store Locator 的任务是帮助顾客找到合适地点,并在到访前确认地址、营业状态、服务和行动方式。它通常由 page template type 承载;少量地点可以使用默认 page.json,持续维护多地点、筛选或地图时才需要 page.store-locator.json 及相应功能模块。
页面内容清单
| 优先级 | 页面内容 | 回答的问题 | 来源边界 |
|---|---|---|---|
| 核心 | 地点名称与完整地址 | 门店在哪里 | 权威地点记录 |
| 核心 | 营业时间与临时状态 | 现在是否适合到访 | 当前运营安排 |
| 核心 | 门店服务 | 这里能购买、提货或获得什么服务 | 门店实际能力 |
| 核心 | 联系与路线行动 | 怎样联系或开始导航 | 可用电话、链接或地址 |
| 可选 | 地区筛选或搜索 | 多个地点中哪个更相关 | 结构化地点数据 |
| 可选 | 地图 | 地点之间的空间关系是什么 | 可靠地图服务和坐标 |
| 可选 | 到访说明 | 停车、预约或无障碍条件是什么 | 门店核验信息 |
地图不是地点列表的替代品。门店关闭、临时停业或数据加载失败时,页面仍应给出明确文本状态。
内容 × 展现形式
| 内容 | 首选形式 | 适用条件 | 退化方式 |
|---|---|---|---|
| 地区选择 | Search / Filter | 地点多到难以扫描 | 按地区分组的 Anchor List |
| 地点详情 | Location Cards 或 List | 多个地点共享字段 | 带语义标签的静态列表 |
| 空间位置 | Map + 同步列表 | 坐标准确且地图可用 | 完整地址列表 |
| 到访说明 | Details 或 Callout | 信息与特定门店相关 | 卡片内正文 |
| 行动 | Directions / Contact Links | 目标链接真实可用 | 可复制的地址和联系方式 |
推荐顺序是:
范围说明 × Intro → 地区查找 × Search → 地点列表 × Cards → 地图 × Map → 到访条件 × Details
地点很少时省略搜索和地图,直接显示完整列表通常更有效。
Shopify Theme 实现
| 层次 | 建议职责 |
|---|---|
| 资源 | Page 保存范围和说明;地点事实使用单一结构化来源 |
| Template | 默认 page.json 或稳定的 page.store-locator.json |
| Main Section | 输出标题、说明以及无功能模块时的地点正文 |
| Sections | 查找控件、地点列表、地图和到访说明 |
| Blocks | 只适合少量、由主题编辑器维护的地点项 |
| Settings | 数据选择、必要筛选和表现;不在多个模块复制地址与时间 |
大量地点、地理搜索或第三方地图通常需要超出静态 Section blocks 的数据与脚本能力;具体来源、隐私、失败状态和性能应在选定实现后单独验证。
发布检查
- 地址、营业时间、临时状态和服务能力来自同一当前记录;
- 地图不可用、脚本失败或定位权限被拒绝时仍能找地点;
- 键盘可操作筛选,结果变化有可理解反馈;
- 地点为零、一项和多项时均有合理结果;
- 电话、路线与预约链接在对应设备上可用。