不開程式碼編輯器，也能在 Shopify 商品頁放上倒數計時

沒有要升級的方案，以及站在這句話外面的四個

Shopify 的說明文件在寫程式碼編輯器、佈景主題編輯器和 Custom Liquid 區段時，都沒有點名方案條件，Basic 方案頁面也說 Basic 含一個你可以自己調整的線上商店，調整的途徑是 "through Shopify's built-in theme editor"，也就是內建的佈景主題編輯器。所以 Basic 以上沒有東西要買。目前的九個方案裡，有四個落在這個說法外面，理由分成兩種。

其中兩個根本沒有店面。Lite 方案頁面寫著 "The Lite plan doesn't include the online store sales channel"，Agentic 方案頁面把 "Online Store" 排在 "aren't available with the Agentic plan" 那份功能清單的第一位。沒有佈景主題、沒有商品頁，計時器也沒有地方畫出來。另外兩個有店面，卻幾乎控制不了它：Starter 寫的是 "Other themes and customization options aren't available on the Starter plan"，Retail 寫的是 "You can't use any other theme with the Retail plan" 和 "Further customization options aren't available on the Retail plan"。兩者都把你限制在 Spotlight 這一個佈景主題，兩邊的頁面都沒交代程式碼編輯器能不能進，而且都不再開放新商店，所以 Starter 和 Retail 請當成沒有確認，而不是直接的不行。

貼任何東西之前，先決定這個期限要出現在哪裡

倒數計時不是一個功能，是一個位置的選擇。放在購買按鈕底下，它回答的是顧客此刻已經在問的問題。放在店面頂端的橫幅，它接到的是還在逛分類、還沒選定商品的人。放在購物車頁，它對著已經選好、正在猶豫的人說話。挑一個就好：同一趟動線上掛三個時鐘，讀起來就不再是資訊，而是壓迫。

購物車那一列常讓人意外。Shopify 要求市集上的佈景主題，在顧客帳號、禮物卡和結帳以外的每一種範本上都支援區段，所以購物車頁跟商品頁一樣吃得下 Custom Liquid 區段。真正的牆是結帳，佈景主題層級的程式碼一律到不了那裡。

時鐘本人，就在這一頁上跑

從佈景主題編輯器加上去，不必打開任何程式碼檔案

1. 把 Shopify 的兩個位址掛在同一組 site id 底下

   Shopify 商店有兩個網路位址，而小工具看不出來它們是同一家店。一個是你設為主要網域的自訂網域，Shopify 說它就是顧客瀏覽你的線上商店時看到的那一個（"to customers as they browse your online store"），其餘位址都會轉向它。另一個是開店時拿到的 .myshopify.com 位址，Shopify 只讓你改名一次，之後就不能再改。兩個都加進 BootSignal 控制台，因為小工具是拿 location.hostname 去對同一組 site id 底下登記的位址，而你漏掉的那一個送出的頁面會什麼都不畫。哪天真的用掉那唯一一次改名，記得先登記新位址再切換。

2. 打開佈景主題編輯器，切到商品範本

   在 Shopify 管理介面前往「網路商店」，找到佈景主題，按「編輯佈景主題」。用上方工具列中間的範本下拉選單切到商品範本，這樣你動的才是顧客在商品頁上看到的東西，而不是首頁。

3. 新增一個 Custom Liquid 區段，兩行一起貼進去

   在左側欄按「區段」圖示，然後按「新增區段」（要放進既有區段裡就按「新增區塊」），選 Custom Liquid。把它拖到時鐘該在的位置，通常就在價格或加入購物車按鈕底下。載入器和掛載元素貼進程式碼欄位，把 YOUR_SITE_ID 換成控制台裡列在你網域旁邊的那組 id，存檔。數字底下那排單位標籤用哪一種語言由 data-lang 決定，下面這段已經設成 zh-tw。

   程式碼複製

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="zh-tw" defer></script>
   
   <div data-bootsignal="countdown"
        data-target="2026-12-31T23:59:59"
        data-expired="This sale has ended."></div>

4. 把真正的截止時間寫進 data-target

   把預留的時間戳換成你的折扣真正停掉的那一刻，格式維持一樣。接著把 data-expired 寫成時鐘走完之後這一頁該說的那句話。下面這個值是範例，要給顧客看的那一句請用中文改寫。

   程式碼複製

   <div data-bootsignal="countdown"
        data-target="2026-09-01T23:59:59"
        data-expired="Sale pricing has ended. Free shipping is still on."></div>

5. 存檔，再去看一個真正的商品網址

   佈景主題編輯器會在區段內容上面畫自己的疊層，所以那裡查得了版面，查不了行為。存檔，用一般分頁打開線上的商品頁，看著數字往下走。什麼都沒畫出來的話，先拿主機名稱對一次你登記的網域。

• Custom Liquid 的內容上限是 50kb，任何小工具片段都到不了。
• 不合法的 Liquid 會在存檔時報錯，沒關好的 HTML 標籤則會自動補起來，複製到一半的片段可能因此重排。</div> 和 </script> 要跟著一起貼。
• 這個設定不能用 {% javascript %} 或 {% stylesheet %} 標籤，於是存檔後活得下來的形狀只剩一般 HTML 加一個 <script src>。載入器正好就是這個形狀。
• script 標籤上的 defer 請留著。Shopify 的 Theme Check 把擋住解析的 script 算成店面變慢的原因。

是期限，不是誘騙式設計

急迫感在它是真的時候才站得住。你的折扣週日午夜結束，時鐘就這麼說，週一回來的顧客看到的是他預期中的價格。另一種計時器不管你什麼時候到都顯示五小時，換一個瀏覽器就重新開始，跟你店裡發生的任何事都沒有關係。看穿的顧客不只是跳過這次優惠，他連這一頁其他的話也不再相信。

BootSignal 只做第一種。data-target 是一個固定的時間點，所以每個人倒數的是同一刻，時鐘也對所有人同時歸零。這裡沒有依訪客切換的模式，也沒有重新開始。活動要延長就自己改時間戳再存檔，那是你做的決定，不是小工具自己跑的迴圈。

同一條規則貫穿整個目錄。社會認同提示只重播你的網站真的記錄下來的動態，它沒有辦法生出一筆從來沒發生過的訂單。在商店上，這就是社會認同和道具之間的差別。

如果你的佈景主題沒有 Custom Liquid 區段

Custom Liquid 是 Shopify Theme Store 的上架要求，不是平台保證。自己做的佈景主題、不是從市集下載的、或者年代久遠的 vintage 主題都可能沒有它，這時剩下的就是程式碼編輯器。從 Shopify 管理介面打開「網路商店」，找到佈景主題，按一下 ... 開啟動作選單，選「編輯程式碼」。動手之前先按「複製」，留一個回得去的版本。

在這裡要把兩塊分開。載入器放 Layout 資料夾（版面配置檔）裡的 theme.liquid，貼在結尾的 </body> 標籤前面，因為它本來就該每一頁載入一次。掛載元素不是：theme.liquid 是全站版面，倒數計時貼在那裡，你的政策頁和搜尋結果頁上都會出現一個時鐘。

所以你要找的是區段檔，不是範本。Online Store 2.0 或 Horizon 世代的佈景主題，商品範本是 templates/product.json，而 Shopify 寫著 "If you're using a JSON template, then any HTML or Liquid code needs to be included in a section"。標記貼進 JSON 會把檔案弄壞，存檔失敗。打開 Sections 資料夾（區段檔），編輯負責畫出商品頁的那一個區段。網誌文章 Shopify 給的是同一條規則，Dawn 主題對應的檔案是 sections/main-article.liquid。

<div data-bootsignal="countdown"
     data-target="2026-09-01T23:59:59"
     data-expired="Sale pricing has ended."></div>

唯一該放進 theme.liquid 的那個掛載元素

全店訊息是例外。如果每一頁上的每一位顧客都該知道活動週日結束，那麼全站版面就是對的位置，而公告橫幅正是為此而做。把它貼在 theme.liquid 裡載入器旁邊、結尾的 </body> 標籤前面，每一則新公告給它自己的 data-id。

<div data-bootsignal="announce"
     data-message="Summer sale ends Sunday at midnight"
     data-link="/collections/sale"
     data-link-text="Shop the sale"
     data-id="summer-2026"></div>

橫幅和時鐘的說法要一致。橫幅寫週日、時鐘寫週六，比兩個都不放更糟。

跑起來要花多少錢

活動週正好是流量衝高的那一週，而在按用量計價的小工具上，那也是帳單衝高的那一週。這裡的計量單位換成網域：每月 $20 或每年 $200，以登記的網域計價，每個小工具都含在裡面，沒有一項跟流量或瀏覽數掛鉤。所以商品頁上的時鐘和它上方那條橫幅，在冷清的星期二和一年裡最忙的那一天，價格一模一樣。價格背後的目錄是 38 個付費小工具加 33 個免費瀏覽器工具，之後才發佈的小工具也一起算。第二家商店就是第二個網域，在控制台裡另外買。完整價格有細節，帶價的橫向比較在對比區。

把時鐘歸零時要顯示的那句話寫好

多數賣家會很小心地設定 data-target，然後在 data-expired 裡打一句轉頭就忘的話。這是反過來的。過期訊息才是掛最久的那一句，它從活動結束的那一刻起就坐在商品頁上，直到你想起來為止，忙一點的商店可能是好幾天。

給它一個任務。「這次活動已經結束」只告訴顧客他來晚了，其餘什麼都沒說。「活動價已結束，免運仍然照舊」則給了他一個留在這一頁上的理由。

如果計時器沒有出現

1. 拿網址列上的主機名稱對一次你登記的網域。同時用自訂網域和 .myshopify.com 回應的商店，兩個都要登記。
2. 確認載入器在這一頁上只有一份。貼進 Custom Liquid 區段又貼進 theme.liquid，同一個商品頁上就有兩份。
3. 看 Custom Liquid 欄位存下來的內容，不是你貼進去的內容。沒關好的標籤會在存檔時補上，掉了 </div> 的片段回來時已經重排過。
4. 確認掛載元素在你正在看的那份範本上。加在首頁範本的區段不會出現在商品頁，而這一條吃掉的時間最多。
5. 想一想上次貼完之後佈景主題有沒有更新過。Shopify 提醒，你的程式碼變更如果和佈景主題更新不相容，更新後的副本會移除全部的程式碼變更，而 Custom Liquid 區段在這件事裡的下場，文件沒有交代，所以每次更新後都看一眼商品頁。

除了那次貼上，佈景主題裡沒有存下任何你設定過的東西。重新加一個區段、重打一次時間戳，同一個時鐘就回來了，這讓佈景主題更新變成麻煩，而不是損失。