ShipCalc
开始免费试用

文档

设置并使用 ShipCalc。

安装 ShipCalc，把计算器添加到店铺，让它与主题风格一致，并使用数据分析和诊断功能。大多数店铺几分钟内即可上线。

最后审核：2026年9月29日，由 MerchantOS 审核。

安装前先看看。打开演示店铺（密码：1）或查看 Shopify App Store 页面。
ShipCalc 应用后台为英文界面。因此本文档也以英文标注每个后台设置名称，方便你在屏幕上对照。

1. 安装 ShipCalc

ShipCalc 通过 Shopify App Store 安装。安装后即开始 14 天免费试用，可使用全部功能。

  1. 打开 Shopify App Store 上的 ShipCalc 页面。
  2. 点击 Install（安装）并批准应用。
  3. ShipCalc 会在 Shopify 后台打开，并显示新手引导清单。

引导页面提供一键链接，可直接在主题编辑器中打开每个展示位置的对应位置。

2. 添加商品页区块

商品页区块让顾客在加入购物车前查看运费。它使用当前选中的款式和数量。

  1. 在 ShipCalc 引导中点击 Add Product Page Block。主题编辑器会在商品模板中打开。
  2. 在商品信息区段中点击 Add block（添加区块），然后选择 ShipCalc 区块。
  3. 将其拖到合适位置——放在价格下方或购买按钮下方效果都很好。
  4. 点击 Save（保存）。
提示如果你使用多个商品模板，请把区块添加到在售商品使用的每个模板中。

3. 添加购物车页面区块

购物车区块会对购物车中的每件商品和数量进行报价，让顾客看到整个订单的配送费用。

  1. 在 ShipCalc 中点击 Add Cart Page Block。主题编辑器会在购物车模板中打开。
  2. 点击 Add block（添加区块），然后选择 ShipCalc 购物车区块。
  3. 将其放在小计和结账按钮附近，然后点击 Save（保存）。

4. 启用购物车抽屉支持

每个主题的购物车抽屉（侧滑购物车）结构都不同，因此 ShipCalc 通过应用嵌入来支持它们：应用嵌入会查找已打开的抽屉，并在结账按钮上方放置一个精简、可折叠的计算器。

  1. 打开主题编辑器，在左侧边栏中选择 App embeds（应用嵌入）。
  2. 开启 ShipCalc 购物车抽屉嵌入。
  3. 大多数主题使用自动识别即可正常工作。如果你的主题不行，请在嵌入设置中填写抽屉的 CSS 选择器。
  4. 点击 Save（保存），然后在线上店铺中打开抽屉检查位置。
需要选择器？把主题名称和店铺网址发给我们，我们会帮你完成配置。

5. 自定义小组件

外观和文案设置位于 ShipCalc 的 Appearance（外观）页面，更改上线前可通过实时预览查看效果。

布局和样式

  • 卡片或简约布局。
  • 强调色、背景色、文字颜色和边框颜色。
  • 圆角、间距和字号。
  • 沿用主题的字体排版和基础控件样式。

文案

  • 标题、辅助文字和按钮文字。
  • 国家/地区和邮政编码的标签与占位文字。
  • 计算中、无可用运费、错误和空购物车的提示信息。
  • 免运费方式的标签。

所有面向顾客的标签都可以用你店铺的语言编写。

自定义 CSS

如需更精细的控制，可以在 CSS 编辑器中为小组件添加规则——适合调整主题特定的间距或悬停状态。

6. 国家/地区和邮政编码

选择目的地国家/地区的来源：

  • Fixed country（固定国家/地区）— 始终按你选择的一个国家/地区报价。
  • Shopper’s Shopify country（顾客的 Shopify 国家/地区）— 跟随 Shopify Markets 的本地化国家/地区。
  • Country selector（国家/地区选择器）— 让顾客从你允许的国家/地区中选择。

然后选择邮政编码的处理方式：

  • Required（必填）— 顾客必须输入邮政编码或 ZIP。
  • Optional（选填）— 顾客可以填写以获得更精确的报价。
  • Country only（仅国家/地区）— 隐藏邮政编码输入框；ShipCalc 可以返回所选国家/地区的估算运费。

你还可以对来自特定国家/地区的访客隐藏计算器，或只向你选择的国家/地区的访客显示。

7. 运费显示选项

  • 显示所有可用运费、仅显示最低价或仅显示最高价。
  • 当 Shopify 返回配送详情时，在运费下方显示。
  • 为免费方式使用自定义标签（例如“免费配送”）。

8. 手动放置（高级）

如果主题布局不允许在你需要的位置放置应用区块，可以在主题中添加占位元素和 ShipCalc 加载脚本：

<div data-shipcalc-m="product"></div>
<script src="/apps/shipcalc/manual.js" defer></script>

如需放在购物车中，请使用 data-shipcalc-m="cart"。手动放置的计算器与应用区块使用相同的设置、样式和数据分析。

9. 数据分析

Analytics（数据分析）页面展示顾客如何使用计算器：

  • 随时间变化的报价总数和近期活动。
  • 按来源统计的报价：商品页、购物车页面或购物车抽屉。
  • 热门的邮政编码和国家/地区组合。
  • 向顾客显示的配送方式。
  • 错误信息，帮助你发现没有运费的目的地。

10. 营销事件

如果你的店铺已经安装了 Google Analytics 4、Google Tag Manager 和 Meta Pixel，ShipCalc 可以向它们发送 Calculate Shipping 事件。ShipCalc 不会安装跟踪脚本。

  1. 在 ShipCalc 中打开 Marketing events（营销事件）。
  2. 选择要发送到的平台。
  3. 可以覆盖事件名称、类别、标签、值，或添加自定义参数。
  4. 保存。

事件包含小组件来源（商品、购物车或抽屉）、国家/地区，以及是否输入了邮政编码。

隐私营销事件绝不会包含顾客的姓名、电子邮件、完整地址或购物车内容。

11. 诊断

Diagnostics（诊断）页面无需经过店铺即可运行真实报价——在更改配送区域或运费后很有用。

  1. 在 ShipCalc 中打开 Diagnostics（诊断）。
  2. 选择商品、国家/地区和邮政编码。
  3. 运行报价，查看 Shopify 返回的确切结果。

12. 问题排查

商品页上没有显示计算器

  • 检查区块是否添加到了商品实际使用的模板中，并且已保存。
  • 确认区块不在隐藏或折叠的区段中。
  • 检查 Appearance 中的访客国家/地区规则是否在你所在位置隐藏了计算器。

没有返回任何运费

  • 确认目的地属于 Shopify 中已启用的市场和配送区域。
  • 检查商品的配送配置文件和重量是否满足运费条件。
  • 在 Diagnostics 中用同一目的地运行，查看 Shopify 返回了什么。
  • 修改“无可用运费”提示，让顾客知道下一步该怎么做。

更详细的检查清单请阅读Shopify 运费不显示。

购物车抽屉中没有显示

  • 确认购物车抽屉的应用嵌入已开启并保存。
  • 尝试在嵌入设置中填写抽屉选择器。
  • 附上主题名称联系我们。

13. 支持

ShipCalc 后台有一个支持页面，提供快速解答和联系表单。你也可以在这里给我们留言，我们会通过电子邮件回复。