💡 應用場景

---

Campaign Star 頁面編輯器的「分類列表」元件（下又稱 Category list），可讓消費者瀏覽和活動主題相關的延伸商品分類，提升活動頁的導航效果，促進特定品類的銷售或曝光度。

也可以把 Category list 簡單想像成有圖片、可以自訂文案或連結的 AMP 標籤列表。

🔰 基本介紹

---

• 一個 Category list 元件由一格格的分類組成：預設的分類數量為 10 個，上限 20 個

• 細部元件架構：

  ⚫

  區段（Section）

  ⚫

  分類列表（Category list）

  ⚪

  分類欄（Category column）

  • 分類圖片（Category image box）
    • 分類文字（Category text）
  • 分類按鈕（Category button）

• 聯動編輯效果：

  • 在某一格分類修改「分類圖片 Category Image」的操作連結，會連動修改同一格分類的「分類按鈕 Category Button」的操作連結，確保前往同一個目的地
  • 在某一格分類修改元件樣式，會連動修改整串 Category list 的元件樣式，節省重複編輯的工夫

• 內容設定：

  • 可運用 AMP 標籤（Section 基底標籤）快速設定分類
  • 也可自訂任何想要呈現的分類，包含圖、文、連結
  • 可從右側設定面板設定是否啟用自動輪播，以及輪播秒數
  • 按鈕文字可自由設定，包含是否顯示以及文字內容的呈現方式

• Category list 的內容是靜態 (Static) 的：

  在後台編輯器儲存頁面的時候指定了什麼內容，活動頁就會固定秀什麼內容，不會自動更新

🏷️ 分類標籤

---

每一格分類可以設定 1～3 個 AMP 標籤。

設定分類標籤的效果

為某一格分類新增標籤或編輯既有標籤後，該分類的子元件會發生下列變化：

• 分類文字 (Category text)：自動更新成分類標籤的名稱。
• 分類圖片 (Category image box)：自動更新成「和分類標籤相關的商品的圖片」，圖片的連結也會自動更新成「前往該組分類標籤的 awoo Page」。
• 分類按鈕 (Category button)：由於分類按鈕和分類圖片的連結設定互相連動，按鈕的連結也會自動更新成「前往該組分類標籤的 awoo Page」。

設定分類標籤的方法

1. 手動逐一設定每格分類

---

▍設定方法

• 在 Category list 元件的設定面板中，從分類列表中選擇要編輯的分類，點擊「編輯」。

  

• 選擇標籤畫面（與 Section 基底標籤的設定一樣）

  

• 完成後按下「儲存」按鈕即可套用設定。

2. 手動批次設定整串列表

---

如果希望批次設定整串列表的分類標籤，可搭配 Section 基底標籤 功能，一次為整個分類列表設定分類標籤。

▍設定方法

1. 在分類列表上層的「父區段」中，設定好 Section 基底標籤
2. 在分類列表的元件設定面板中，於分類內容下方點擊 「依基底標籤帶入分類標籤」 按鈕

▍批次設定邏輯

系統會依據分類列表上層父區段所設定的基底標籤，尋找相關的組合標籤，並自動套用到各分類：

如果用基底標籤查不出延伸的標籤組合，系統會改以「所有的基底標籤」套用到分類格子。

3. 自動設定分類標籤

---

若要讓系統自動為分類列表設定標籤，務必先完成 Section 基底標籤設定。

▍自動套用的時機

1. 在已設定基底標籤的 Section 中，新增分類列表時，系統會自動套用標籤到每個分類
2. 在分類列表的父區段，設定基底標籤時，系統會自動套用標籤到所有 空白的分類
3. 在分類列表新增分類時（例如由 5 個增加到 10 個），僅新增加的分類會自動套用標籤：
   • 原有的 5 個分類（第 1～5 個）的標籤不會變動（不溯及既往）
   • 新增的 5 個分類（第 6～10 個）會自動套用標籤

▍設定方法

1. 在分類列表上層的「父區段」中，設定好 Section 基底標籤

2. 新增分類列表元件

3. 在分類列表的元件設定面板中，確認「分類自動帶入標籤」開關為啟用中；

   此時，可以調整「分類自動帶入標籤的邏輯」，自訂下次系統自動帶入標籤時所遵循的邏輯。