如何讓元件配合佈景主題色彩

只需幾次點擊，Bundlex 就能讓組合元件配合商店的整體風格。元件色彩預設面板會讀取 Shopify 佈景主題的色彩配置，並建議可直接使用的色彩組合，讓優惠自然融入頁面，而不是像額外加上的元件。

色彩預設的位置

在編輯器中開啟組合，然後前往樣式分頁。元件色彩預設面板位於詳細的元件樣式控制項上方。使用預設一次設定所有項目，接著如果需要，再於下方的元件樣式區段微調個別元素的色彩。

選擇主要色彩

主要色彩列是整個調色盤的起點。您有四種設定方式：

• 建議色票，彩色色票會直接從 Shopify 佈景主題的色彩配置中擷取，例如按鈕色彩、文字和背景等。點選其中一個即可套用。
• 預設色彩，佈景主題色票後方的深灰色色票可還原元件預設的黑白色彩。
• 自訂色彩，點選帶有加號圖示的色票以開啟色彩選擇器，並選擇任何十六進位色碼。輸入色碼後按 Enter，確認預覽已變更。
• 隨機色彩，如果只是想探索不同選項，點選重新整理色票即可產生隨機色彩。

無論您選擇哪一種，Bundlex 都會立即以該色彩重新建立元件的其餘色彩，並將結果套用至即時預覽。

選擇強調色，也就是次要色彩

次要色彩是用於徽章、啟用狀態和醒目提示的強調色。Bundlex 會自動產生與主要色彩協調的色彩，並提供幾種可點選切換的和諧配色選項。

如果您想自行設定強調色，次要色彩列也提供與主要色彩列相同的兩種覆寫選項：

• 自訂強調色，加號色票會開啟選擇器，讓您輸入精確的十六進位色碼。
• 隨機和諧色彩，重新整理色票會從色輪中選擇與主要色彩形成對比、但仍然協調的色彩。

透明優惠切換開關

在主要色彩旁邊，您會看到控制未選取優惠卡片背景的透明切換開關：

• 關閉，未選取優惠的背景會使用實色。如果色彩來自預設，則會使用您色彩的淺色調，讓每個級距都呈現為獨立卡片。
• 開啟，未選取優惠的背景會保持透明，呈現更簡潔、扁平的外觀，並融入頁面。

切換開關只會變更未選取優惠背景的透明度。已選取和滑鼠懸停時的背景、文字、徽章及邊框色彩都會維持不變。關閉後，背景會再次完全不透明。開啟透明度時點選的色票，會套用該預設的透明版本。

「套用邊框圓角」建議

Bundlex 能從佈景主題借用的不只有色彩。如果偵測到佈景主題的圓角與元件目前的圓角不同，便會顯示套用邊框圓角橫幅，並附上「讓元件圓角配合您的佈景主題」的提示。

1. 點選橫幅上的套用，即可將佈景主題的圓角套用至元件的優惠卡片、優惠圖片和交叉銷售圖片。
2. 如果您偏好目前的圓角，也可以點選關閉圖示將其關閉。

如果未偵測到差異、佈景主題未提供可用的圓角，或您已將建議關閉，便可能不會顯示此建議。您仍可在元件樣式下自行設定圓角。

微調個別元素

選擇調色盤後，在元件樣式下展開元素。優惠卡片可讓您分別調整其邊框圓角、間距，以及已選取、滑鼠懸停和未選取狀態。在此範例中，我們將卡片圓角設為 8 像素。請先套用預設，再進行這些最後調整，因為選擇其他預設可能會取代個別色彩設定。

儲存並檢查您的店面

點選儲存。在指定商品頁面測試啟用中的折扣。選取每個優惠，檢查文字和徽章的對比度，選擇變體並使用「加入購物車」。請在桌面和行動裝置上檢查頁面，因為編輯器預覽無法顯示所有佈景主題背景或螢幕尺寸。

我們的範例維持相同的數量折扣規則：兩個 Ivory Small 袋子在享有 10% 折扣後，商品小計為 $43.20。樣式只會變更呈現方式，不會變更折扣計算。請將購物車和結帳納入最終檢查。

建議的產生方式

Bundlex 會讀取佈景主題的色彩設定，並產生相配的色調。對於相同的佈景主題設定，系統產生的佈景主題建議會保持一致。隨機色彩和隨機和諧控制項則會刻意產生新的選項。

提示

• 預設是快速的起點。套用預設後，您仍可在元件樣式中調整任何單一元素的色彩。
• 如果沒有顯示建議色票，表示 Bundlex 無法從目前啟用的佈景主題讀取色彩值。您仍可使用自訂和隨機選項。
• 使用即時預覽檢查對比度，尤其是在開啟透明切換開關時，確保徽章和文字在頁面背景上仍然清晰易讀。