Shopify 应用文档
设置和自定义 Shopify 商店货币转换的全部指南
目录
1 安装
从 Shopify 应用商店安装
- 访问 Shopify 应用商店的 Currency.Wiki 应用页面
- 点击“添加应用”并授权安装
- 应用将自动打开并引导您进入设置向导
- 完成设置向导即可开始价格转换
提示： 设置向导仅需约 2 分钟，会引导您完成每一步。
2 设置向导
设置向导帮助您正确配置应用。会引导您更新货币格式并启用应用嵌入。
第 1 步：欢迎
了解设置流程内容后，点击“开始设置”。
第 2 步：更新货币格式
进入 Shopify 后台 → 设置 → 常规 → 商店默认值。找到您的货币，点击三点菜单 → “更改货币格式”。用我们的包裹类更新 HTML 字段：
带货币的 HTML：
<span class="cwiki">${{amount}} USD</span>
不带货币的 HTML：
<span class="cwiki">${{amount}}</span>
重要： cwiki 包裹类至关重要。它告诉我们的应用哪些页面元素是价格，这样只转换真实价格，不会误转电话号码或订单号。
第 3 步：启用应用嵌入
在主题的应用嵌入部分启用应用：
- 进入在线商店 → 主题 → 自定义
- 在左侧边栏查找“应用嵌入”
- 找到“Currency.Wiki App”并切换为开启
- 在主题编辑器点击保存
第 4 步：验证设置
点击“扫描我的商店”验证设置是否完成。向导会检查 cwiki 包裹类和应用嵌入。如成功，您即可开始使用！
3 小部件样式
从 6 种小部件样式中选择，匹配您的商店设计。每种样式均可自定义品牌色。
极简下拉
紧凑页眉集成，简单下拉列表。适合右上角页眉放置。
浮动按钮
移动端友好浮动按钮，带可展开面板。适合移动优先商店。可放置于角落。
侧边抽屉
全高滑出面板，带搜索功能。适合支持多币种的商店。
弹窗
居中覆盖，网格布局。让货币选择更专注。
内联标签切换
热门货币横向标签。无需打开菜单即可快速切换。
角标
极简角落图标，点击展开。适合追求极简设计的商店。
提示： 在应用后台的小部件设置页可用您的商店配色预览所有样式。
4 管理后台
管理后台让您全面掌控商店货币转换方式。
仪表盘首页
切换小部件开关，查看转换统计，实时预览小部件。
小部件设置
选择小部件样式、位置、颜色、尺寸、圆角及国旗显示选项。
货币管理
启用/禁用货币、排序列表、配置自动检测行为、设置汇率偏好。
分析
查看转换图表、热门货币使用情况及国际客户分布。
主题与外观
选择主题模式（自动、浅色、深色、自定义），设置颜色，启用玻璃拟态效果，配置深色模式行为。
结账提示
在购物车/结账页启用提示，告知客户结账货币。
5 高级设置
高级设置为专业版用户提供更多价格格式和转换行为控制。
价格格式（专业版）
- 小数位数 - 控制显示几位小数（0-6）。
- 数字格式 - 选择格式风格（自动、美式、欧式、印度式、空格•点、空格•逗号）。
- 符号位置 - 将货币符号放在金额前或后，或按货币自动。
- 四舍五入 - 标准、始终向上、始终向下或不四舍五入。可选四舍五入到 .99。
主题集成（专业版）
通过以下 HTML 片段手动嵌入小部件或购物车提示到主题任意位置：
小部件嵌入（添加到 header.liquid 或任意区块）：
<div class="cwiki-widget"></div>
购物车提示嵌入（添加到 cart.liquid）：
<div class="cwiki-banner"></div>
开发者选项（专业版）
- 样式覆盖 - 注入自定义 CSS 微调小部件样式。
- 点击监听器 - 当特定元素被点击时重新转换价格（如尺码选择、商品选项）。
- 额外价格元素 - 除默认 .cwiki 包裹外，额外指定价格元素。
- URL 模式 - 当 URL 包含特定字符串时重新扫描价格（适用于 AJAX 内容、无限滚动）。
- 转换延迟 - 在转换价格前等待（适用于页面加载后才出现的内容）。
注意： 这些选项适用于高级用户。请先在预览主题中测试后再发布。
6 故障排查
价格未转换？
请确保在货币格式设置中添加了 cwiki 包裹类。进入设置 → 常规 → 商店默认值，检查 HTML 格式。同时确认主题自定义器已启用应用嵌入。
小部件未显示？
请检查主题的应用嵌入部分是否已启用。可尝试打开主题自定义器，找到应用嵌入，确保 Currency.Wiki 已开启。保存并刷新商店。
价格加载时闪烁？
我们的应用设计为零闪烁加载。如有闪烁，请检查是否有缓存插件干扰。也请确保应用嵌入加载在主题 head 区域。
检测到的货币不正确？
地理检测基于访客 IP。VPN 或企业网络可能影响检测。访客可随时手动选择货币。您也可在设置中指定默认备用货币。
小部件与主题不匹配？
可通过主题与外观设置自定义颜色，或启用自动模式自动检测主题配色。也可在高级设置中使用自定义 CSS 精细调整样式。
