案例作品集 浏览精选项目

WESWOO 提供 Shopify Plus 项目开发费抵扣,至多 US$4,800

开发知识库 / 内容、品牌与合作

内容、品牌与合作

将真实文章、主体、门店和合作资料连成可核对的页面关系。

门店卡、文字地址与地图

先展示可读的名称、地址、营业时间和联系资料,地图作为进一步导航入口。地点筛选和地图标记引用同一记录。

数据与依赖

  • shop.custom.public_stores:list.metaobject_reference。
  • name、address、opening_hours 为文本;map_url 为核准 URL。

交互逻辑

  • 不加载地图仍可读地址。
  • 按城市切换时列表与标记同步。
示例代码 · snippets/ww-store-list.liquid
Liquid · WESWOO
{% assign stores = shop.metafields.custom.public_stores.value %}
<ul>
  {% for store in stores %}
    <li>
      <h2>{{ store.name.value | escape }}</h2>
      <p>{{ store.address.value | escape }}</p>
      <p>{{ store.opening_hours.value | escape }}</p>
      {% if store.map_url.value != blank %}
        <a href="{{ store.map_url.value | escape }}">Open the map for {{ store.name.value | escape }}</a>
      {% endif %}
    </li>
  {% endfor %}
</ul>

验收检查

  • 核真实地址、时区、时段和地图目标。
  • 核手机打开地图及无网络地图状态。

无实际门店时不生成假地点;第三方地图嵌入按项目隐私与性能要求接入。

先理解,再整合,最后验证

  1. 选择模块,确认数据和输入输出。
  2. 将片段接入当前主题或框架。
  3. 用真实变体、市场和失败恢复场景验收。

示例按 Shopify Online Store 2.0 主题编写;Headless 使用单独的数据与版本边界。代码片段需接实际字段、主题和语言文件。

架构参考

示例由 WESWOO 编写,结合 Shopify 官方文档和固定版本的仓库参考。采用仓库代码时应保留适用许可。

Shopify/dawn · 许可commit 3e9ee2281dc4 · Shopify 集成主题的限定许可;参考架构,不复制仓库实现。
Shopify/hydrogen · 许可commit 9e358a2462ba · MIT;采用实质代码时保留版权与许可。

依据核对 2026-11-12