依裝置與頁面顯示

在 Products 標籤決定了徽章適用於哪些商品之後，徽章編輯器的 Display 標籤會決定徽章在何處以及何時顯示。

此標籤是由多個可收合的區段組成的清單：

Section	What it controls	Documented in
Customer conditions	哪些購物者會看到徽章（已登入、標籤、特定顧客）	依顧客指定目標
Page conditions	徽章顯示在哪些頁面類型上	本頁
Language conditions	訪客瀏覽時使用的商店前台語言	依國家／地區與語言指定目標
Country conditions	訪客所在的國家／地區	依國家／地區與語言指定目標
Other conditions	商品圖片、裝置，以及排除的佈景主題元素	本頁
Visibility Date & Countdown	開始／結束日期和倒數計時器	排程顯示時間
Priority conditions	多個徽章套用到同一件商品時，由哪一個優先顯示	本頁

Display 標籤。帶有 chevron 的區段可展開；帶有開關的區段需先開啟。

注意

帶有 chevron (⌄) 的區段只需展開。帶有 switch 的區段（Language、Country、Priority）必須先開啟，其欄位才會出現。

開啟 Display 標籤

1. 開啟應用程式

   在您的 Shopify 後台中，前往 Apps → Sami Product Labels。

2. 開啟 Badges & Labels

   在應用程式的左側選單中，點擊 Badges & Labels。清單會顯示每個徽章的 Id、名稱、預覽、類型、優先順序、位置和狀態。

   

   Badges & Labels 清單。點擊 Actions 欄中的鉛筆圖示即可編輯徽章。

3. 編輯徽章

   點擊您想設定之徽章在 Actions 欄中的鉛筆圖示。編輯器會開啟，並有三個標籤：Design、Products、Display。

4. 前往 Display

   點擊 Display 標籤。

注意

右上角的 Save 和 Discard 按鈕只有在您變更內容後才會出現。如果您想放棄編輯，請點擊 Discard → Discard changes。

Page conditions

依預設，徽章會顯示在商品出現的每個頁面上。加入頁面條件即可將它限制在特定的頁面類型。

如何加入頁面條件

1. 展開 Page conditions

   點擊 Page conditions 列將其展開。會出現 + Add conditions 按鈕。

   

   空白的 Page conditions 區段：尚未設定規則，因此徽章會在所有地方顯示。

2. 點擊 + Add conditions

   會出現一列條件，包含三個欄位：Page（固定）、運算子和頁面類型。預設為 Page is equal to Index page。

   

   每次點擊 + Add conditions 會新增一列。使用列尾的垃圾桶圖示可將其移除。

3. 選擇運算子

   • is equal to：僅在所選的頁面類型上顯示徽章。
   • is not equal to：除所選頁面類型以外的所有地方都顯示徽章。

4. 選擇頁面類型

   Option	Where the badge appears
   Index page	您的商店前台首頁
   Collection page	商品系列／分類的清單頁面
   Product page	個別的商品頁面
   Article Page	部落格文章頁面
   Blog page	部落格清單頁面
   Cart page (including cart drawer)	購物車頁面和滑出式購物車側欄
   Search page	搜尋結果頁面
   Specific pages	僅限您輸入的確切 URL（請見下一步）

   

   頁面條件可用的八種頁面類型。

5. 針對 Specific pages，輸入 URL

   選擇 Specific pages 會新增第四個欄位。請輸入該頁面完整的商店前台 URL，例如 https://your-store.myshopify.com/pages/summer-sale。預留位置會顯示您自己商店的 URL 作為參考。

   

   Specific pages 會新增一個 URL 欄位，請貼上完整的頁面 URL，而不只是路徑。

6. 儲存

   點擊右上角的 Save。

警告

徽章仍需符合 Products 標籤的設定。頁面條件只會縮小相符商品在何處顯示其徽章，絕不會讓徽章出現在它不適用的商品上。

Other conditions

展開 Other conditions，即可控制哪張商品圖片帶有徽章、哪些裝置會看到它，以及要略過哪些佈景主題元素。

Setting	Options	Behavior
Show on (product page)	All images / First image	在每張圖庫圖片上顯示徽章，或僅在第一張（主要）商品圖片上顯示。
Device targeting	All devices / Desktop / Mobile	將徽章限定給桌面或行動裝置的購物者，或在所有裝置上顯示。
Do not show label on	CSS class list — .CLASS1, .CLASS2,...	徽章不會在符合這些 class 的任何元素上顯示。當您佈景主題中的滑動圖庫、快速檢視或加購區段不適合放置徽章時很有用。

圖片、裝置和排除設定都位於 Other conditions 下。

注意

Do not show label on 需要以逗號分隔的 CSS class 選擇器，每個都以句點開頭，例如 .product-card__slider, .quick-view。請檢查您佈景主題中的元素以找出 class 名稱。

Priority conditions

當多個徽章符合同一件商品時，由優先順序決定顯示哪一個。

1. 開啟 Priority conditions

   點擊 Priority conditions 列上的開關。會出現 Priority value 欄位。

2. 輸入優先順序的值

   輸入 0 到 100 的數字。0 是最高優先順序，100 是最低。 應用程式會在欄位下方顯示相同的提示。

   

   數字越小，優先順序越高。如果商品已有優先順序更高的徽章，該徽章就會被隱藏。

3. 儲存

   點擊 Save。該值現在會顯示在 Badges & Labels 清單的 Priority 欄中，讓您一眼就能比較所有徽章。

警告

已關閉優先順序的徽章在清單中會顯示為 None，且不會納入比較。如果您希望某個徽章穩定地優先於另一個，請在兩者上都設定優先順序的值。

優先順序範例

Badge	Priority value	Result on a product matching both
Sale off	0	顯示
Best seller	10	隱藏

後續步驟

• 變更徽章位置：調整徽章在商品圖片上的位置。
• 指定商品目標：選擇哪些商品會顯示您的徽章。
• 排程顯示時間：設定徽章的開始和結束日期。

提示

需要支援嗎？

如果您在操作這些步驟時遇到任何困難，請透過 [email protected] 聯絡我們。