將自訂 CSS 加入小工具

Bundlex 提供完整的小工具視覺化樣式編輯器，但有時你需要調整編輯器未提供的細節，或覆寫佈景主題強制套用到小工具的樣式。自訂 CSS 正是為此提供的進階調整方式。本文將介紹兩個可新增自訂 CSS 的位置，以及如何可靠地指定小工具。

兩個可新增自訂 CSS 的位置

有兩個獨立的「自訂 CSS」欄位，套用範圍各不相同。

組合的「自訂 CSS」欄位

每個組合都有自己的 自訂 CSS 區段，可在 樣式 分頁中找到。你在此貼上的 CSS 會隨該組合一併儲存，因此如果調整只應套用於顯示該特定組合的位置，這是適合的選擇。

1. 在 Bundlex 控制面板中開啟組合。
2. 開啟 樣式 分頁，並展開 自訂 CSS。這是 小工具樣式 下的最後一個項目。
3. 將規則貼到程式碼編輯器中。欄位會透過佔位符提示格式：.bx-widget-container {margin-bottom: 10px;}。
4. 儲存組合。

應用程式嵌入的「自訂 CSS」欄位

Bundlex 應用程式嵌入，也就是你在 Shopify 佈景主題編輯器的「應用程式嵌入」下啟用的佈景主題應用程式擴充功能，同樣包含一個 自訂 CSS 欄位。啟用 顯示進階設定 後即可看見此欄位。此處的 CSS 會套用至嵌入內容呈現的所有位置，因此適合用於套用至小工具出現的每個產品頁面的整個佈景主題調整。

1. 在 Shopify 管理介面中，開啟 線上商店，然後點選 編輯佈景主題。
2. 開啟 應用程式嵌入，然後找到 Bundlex Bundles。
3. 啟用 顯示進階設定，並將規則貼到 自訂 CSS 欄位中。
4. 儲存佈景主題。

一般而言，若要調整單一組合，請使用 組合 欄位；若要將變更套用到小工具顯示的所有位置，請使用 應用程式嵌入 欄位。

指定小工具

Bundlex 標記使用 bx- 類別。這些類別可作為目前小工具的指定目標：

• .bx-widget-container - 小工具容器。
• .bx-widget - 小工具內容。
• .bx-offer-wrap - 優惠包裝元素。
• .bx-offer - 該包裝元素內的優惠卡片。
• .bx-active .bx-offer - 已選取的優惠卡片，active 類別位於其包裝元素上。
• .bx-offer-title 和 .bx-offer-subtitle - 優惠文字。
• .bx-original-price 和 .bx-discounted-price - 原價和折扣後價格文字。

將規則限定套用至小工具容器。例如：

.bx-widget-container .bx-offer-title {
  font-weight: 700;
}

在設定樣式前，請先檢查產品頁面上的元素。標記會依啟用的功能而有所不同，從舊版小工具複製的選擇器可能已無法相符。

使用 !important 覆寫佈景主題樣式

請先使用內建控制項。若要調整小工具寬度，請嘗試 樣式 > 小工具樣式 > 容器 > 最大寬度 > 全寬（100%）。如果佈景主題規則仍覆寫結果，請檢查受影響的元素，並僅在需要的宣告上使用 !important。例如：

.bx-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

此範例會填滿可用的父容器，但無法讓狹窄的佈景主題欄位變寬。如果規則沒有作用，請確認選擇器是否符合呈現的元素、樣式表是否已載入，以及宣告是否有效。接著檢查哪個衝突規則勝出。使用更具體的選擇器，可能就足以解決問題，不需要 !important。

何時向支援團隊尋求協助

兩個「自訂 CSS」欄位都註明，如需協助可以聯絡 Bundlex 支援團隊，而我們確實會提供這項協助。如果你無法找出正確的選擇器，或自訂佈景主題以 !important 無法解決的方式干擾覆寫規則，請將產品頁面連結和想要的變更說明傳給支援團隊。他們可以提供經過測試的選擇器，讓你直接貼上使用。

嵌入內容的 顯示進階設定 選項所顯示的選擇器欄位也是如此，包括自訂位置、加入購物車按鈕、產品表單，以及數量或變體區塊。這些同樣是 CSS 選擇器，對於無法自動偵測的自訂佈景主題，支援團隊可以協助你填寫。

CSS 不會變更折扣規則，但可能隱藏價格、選項或按鈕，導致顧客無法使用小工具。套用規則後，請在桌面裝置和行動裝置上測試所有優惠狀態、變體選項，以及「加入購物車」功能。