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 後台有一個支援頁面，提供快速解答和聯絡表單。你也可以在這裡給我們留言，我們會透過電子郵件回覆。