Shopify 多货币代码片段

一个在 Shopify 商店中显示本地货币价格的轻量级解决方案。这是为 Tru Fragrance 商店构建的，他们在完全迁移到 Shopify Markets 之前需要多货币显示。

问题

Shopify 的原生多货币需要 Shopify Payments，但并非所有地方都可用。许多商店需要：

• 以访客的本地货币显示价格
• 根据实时汇率转换
• 在商店的基础货币中保持结账

工作原理

1. 地理检测

使用免费的 IP 地理位置 API 检测访客的国家：

// 检测访客国家
const response = await fetch('https://ipapi.co/json/');
const { country_code, currency } = await response.json();

2. 汇率缓存

从 exchangerate-api.com 获取每日汇率并缓存在 localStorage 中：

// 缓存汇率 24 小时
const CACHE_KEY = 'exchange_rates';
const CACHE_DURATION = 86400000; // 24 小时

3. Liquid 集成

包装现有价格显示的即插即用代码片段。该片段向价格元素添加 data-base-price 属性，并使用 Liquid 的 money 过滤器进行格式化。

安装

1. 添加代码片段

将 multi-currency.liquid 复制到主题的 snippets/ 文件夹。

2. 在主题中包含

在 theme.liquid 的结束 body 标签之前添加 multi-currency 的 Liquid render 标签。

3. 配置货币

编辑代码片段以设置支持的货币：

const SUPPORTED_CURRENCIES = ['USD', 'EUR', 'GBP', 'CAD', 'AUD'];

特性

• 自动检测：首次访问时显示本地货币
• 货币选择器：可选的下拉菜单用于手动选择
• 持久偏好：记住访客的选择
• 降级处理：如果 API 失败则优雅降级
• 性能：延迟加载，积极缓存

自定义

选择器样式

下拉菜单有最小的默认样式 - 通过 CSS 类 .currency-selector 自定义。

添加货币

添加到支持列表并确保汇率 API 覆盖它。

舍入规则

按货币配置小数位数：

const DECIMALS = {
  USD: 2,
  JPY: 0,  // 日元没有小数
  EUR: 2,
};

限制

• 显示的价格是估计值（结账使用商店货币）
• 需要 JavaScript（显示基础货币作为后备）
• 免费 API 有速率限制（1000 请求/月）

生产注意事项

对于高流量商店，考虑：

• 自托管汇率
• 使用付费地理位置服务
• 实现服务器端检测

此代码片段可处理每月 10K+ 访客而无问题。

创建时间：2025年8月 许可证：MIT 状态：生产测试通过