Shopify 根据访客 IP 显示地区客服入口

接口说明

浏览器端调用检测访客 IP，返回的是访客的 IP、国家、地区和城市信息，适合地区化内容展示。

{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}

应用场景

这些场景都能体现 IP 信息接口价值，并明确区分服务器 IP 与访客 IP。

• 根据国家显示地区化内容
• 显示不同购买、客服或支付提示
• 切换落地页 CTA 或活动模块
• 引导用户进入合适的支持入口
• 不创建多套页面也能优化地区体验

实现逻辑

实现前先确认请求发起方：服务器发起请求得到服务器 IP，浏览器发起请求得到访客 IP。

• 先输出默认内容
• 浏览器请求 https://my.ipin.io/info
• 读取返回的 country、region、city、ip
• 根据 country 从映射表选择内容或链接
• 接口失败时保留默认内容

代码示例

以下代码都直接使用 https://my.ipin.io/info，注释和界面文字均已本地化。

theme.liquid

<a class="ipin-support-btn" href="/support">Support</a>
<script>
document.addEventListener("DOMContentLoaded", async function () {
  const buttons = document.querySelectorAll(".ipin-support-btn");
  const map = { TW: "/support/tw", US: "/support/us", JP: "/support/jp" };
  try {
    // 浏览器调用 /info：识别访客 IP。
    const info = await fetch("https://my.ipin.io/info").then(res => res.json());
    buttons.forEach(btn => btn.href = map[info.country] || "/support");
  } catch (e) {
    // 接口异常时保留默认内容。
    buttons.forEach(btn => btn.href = "/support");
  }
});
</script>

SEO 与体验建议

默认内容应完整可读，地区化内容作为增强体验出现。这样搜索引擎可以抓取稳定内容，接口失败时用户也能继续使用页面。

常见错误

以下问题会影响文章准确性、代码可运行性和接口介绍可信度。

• 不要删除默认内容
• 不要把服务端调用当成访客 IP 判断
• 不要缓存最终个性化 HTML 给所有人
• 多个模块应使用唯一 ID 或 class
• 必须处理接口失败和网络超时

总结

该场景的重点是访客 IP 地区化。浏览器端调用接口能获得访客所在地区，并在默认内容基础上增强页面体验。

常见问题

下面的问答围绕本文场景单独整理，问题和答案都与当前文章直接相关。