Shopify 地图组件

为什么主题版块比 Shopify 应用更好

大多数“地图应用”都要求您安装、授权访问店铺数据，还要按月付费——而它们最终提供的只是一个 iframe。这里有一个诚实的替代方案：一个放在您自己主题里的 Liquid 文件。它不索取任何店铺权限，不往您的页面里加脚本，不回传任何数据，也不收费。您的访客唯一发出的外部请求，是来自 whatismylocation.ai 的沙盒化地图 iframe 及其 OpenStreetMap 瓦片——没有 Google cookie，没有同意横幅的包袱。即使这个服务哪天无法访问，iframe 也只会静默失败，不会破坏您的页面。删掉这个版块文件，一切痕迹都会消失。

下载 whatismylocation-shopify-sections.zip —— 两个版块加一个 README，只有几 KB。然后按下面的安装步骤操作。

大约两分钟完成安装

分两步：先把文件粘贴一次，然后像使用任何内置版块一样使用它。

粘贴文件：Shopify 后台 ▸ 在线商店 ▸ 主题 ▸ ⋯ ▸ 编辑代码。在左侧边栏的 版块 下点击 添加新版块，命名为 whatismylocation-map，删除占位内容，粘贴 whatismylocation-map.liquid 的全部内容——底部的 {% schema %} 代码块负责生成您的设置面板，必须一起粘贴。保存。

使用它：打开主题编辑器（自定义），进入您的联系页面（或任意页面），点击 添加版块，选择 WhatIsMyLocation Map。设置面板会出现在左侧；在您输入坐标之前，版块会显示一段友好的占位提示，告诉您它还需要什么。

坐标可以从地图嵌入生成器获取——输入您的地址，然后在复制之前把图钉拖到您的入口处。版块保存的是您最终确定的坐标，所以图钉之后绝不会偏移。

分店就是区块

多门店的店铺能享受到最棒的部分：在主题编辑器里，每个分店都是一个区块——点击 添加分店，填入纬度、经度、名称和地址，拖动即可重新排序（最多 10 个）。地图会自动缩放到容纳所有分店，图钉编号与列表一致，访客还会看到地点面板——桌面端是地图旁边的折叠列表，手机上是可滑动的卡片条，每个分店都有导航按钮，以及可选的“在 Google 地图 / Apple 地图中打开”图标。面板布局（auto、侧边、底部、无）和切换动画（平滑、淡入淡出、活泼、无——开启了减少动效的访客始终看到即时切换的版本）都是同一面板里的下拉选项。

每一项设置一览

同一个压缩包里还包含 whatismylocation-widget.liquid——把定位组件作为第二个版块（主题、紧凑/完整模式、高度），适合配送页面和门店查找页。

疑难排查

“添加版块”里找不到这个版块。文件必须放在 版块 目录下（不是 Snippets 或 Assets），而且粘贴时必须包含整个文件——如果 {% schema %} 代码块被截断，Shopify 会拒绝或隐藏这个版块。重新粘贴完整文件并保存。

保存时出现“Invalid schema”错误。粘贴不完整——最常见的是选到底部时漏了一行，导致缺少收尾花括号。再次粘贴完整文件；除非您懂 Liquid，不要手动修改 schema。

地图是灰色的。地图瓦片来自 tile.openstreetmap.org；激进的广告拦截器或公司网络可能会屏蔽它们。用手机的移动数据检查一下——您的客户几乎肯定能正常看到。

图钉不在我的门口。到生成器重新获取坐标，把图钉拖到您的入口处，再把新数值粘贴到版块设置里。

改动在正式店铺上看不到。您编辑的是草稿主题或未发布的主题——请在已发布的主题里修改（或把您编辑的那个主题发布出去）。组件本身没有任何缓存。