將小工具加入您的佈景主題

結帳折扣與前台小工具是兩件各自獨立的事。折扣一經 Shopify Function 強制執行，只要活動已發佈，無論佈景主題上是否有小工具，結帳時都會套用。小工具的作用，是在顧客走到結帳之前，就讓優惠對他們可見：商品頁面上的一份折扣級距表，以及購物車中的一行簡短訊息。

注意

如果活動的折扣沒有出現在商品頁面上，但您已確認結帳時有套用折扣，那幾乎可以確定是小工具尚未開啟 — 以下步驟可解決這個問題。

開啟應用程式嵌入（建議做法）

這是加入小工具最快的方式，也不需要手動調整位置：

1. 在 Shopify 管理介面中，前往線上商店 → 佈景主題，然後點選您目前上線的佈景主題的自訂。
2. 開啟應用程式嵌入。
3. 開啟 Nock Quantity Breaks & BOGO。
4. 儲存佈景主題。

第一次有顧客的瀏覽器載入含此嵌入功能的商品頁面時，「首頁」會自動將這個步驟標示為完成 — 通常在儲存後一分鐘內就會發生。

開啟後，小工具會自行定位：它會在商品頁面上尋找您的價格與加入購物車區塊，並顯示在旁邊，同時也會在購物車與購物車側欄中加入一行簡短訊息。

以區塊方式加入小工具（精確定位）

如果自動定位的結果不理想，可改為加入區塊 — 區塊的位置會優先於嵌入功能的自動定位：

1. 在佈景主題編輯器中，開啟您的商品範本。
2. 加入一個區塊，並選擇 Nock Quantity Breaks & BOGO widget。
3. 將它放到您想要的位置。

小工具位置與自訂選取器

應用程式嵌入與區塊都提供相同的兩項設定：

設定	作用
小工具位置	Auto（預設）、Before add to cart（在加入購物車按鈕之前）、After price（在價格之後），或 Custom selector（自訂選取器）。
自訂 CSS 選取器	僅在位置設為 Custom selector 時使用 — 小工具會顯示在符合此 CSS 選取器之元素的緊接位置之後。

提示

您也可以直接在應用程式內調整位置，不需要修改佈景主題程式碼：開啟 設定應用程式中：Settings → 前台小工具數量折扣小工具在您商品頁面上顯示的位置，以及它是如何出現在那裡的。應用程式中：Storefront widget，或某個活動的 顯示位置預設為自動 — 小工具會自行在您的價格與數量方塊下方找出位置。如果位置不正確，您也可以自行選擇。應用程式中：Placement 分頁，透過定位挑選工具，在商店的即時預覽畫面上直接點選確切位置。使用 重設為自動應用程式中：Reset to automatic 可還原為預設行為。

各處會顯示什麼

• 商品頁面會顯示完整的小工具：級距表，或購物車目標的進度條，樣式依活動 Widget 分頁中的設定顯示。
• 購物車頁面與購物車側欄只會顯示較精簡的訊息 — 在相關購物車項目下方的一行文字，說明已解鎖的內容，或還差多少能解鎖下一個級距。

下一步：建立您的第一個活動，讓小工具有內容可以顯示。