自訂每個元件元素的外觀

元件樣式區段會將商品頁面的元件拆分為個別元素，讓您分別設定每個元素的樣式。在組合編輯器中開啟此區段後，您會看到一組手風琴面板，每個元素各有一個面板，可控制色彩、字型、邊框、間距、徽章等項目。

元件樣式區段的運作方式

開啟組合的樣式分頁，然後找到元件樣式。點擊面板標題即可顯示該元素的控制項。將滑鼠移至標題上時，預覽中相對應的元素會醒目顯示。只有在組合中提供相對應功能時，部分面板才會顯示。

大多數面板都包含相同的基本項目：色彩選擇器、字型大小和字型樣式選擇器。設定方框樣式的面板，例如優惠卡片或徽章，也會提供背景色彩、邊框色彩、邊框寬度和圓角。您的變更會與組合的其他設定一同儲存。

逐一查看各個面板

標題

控制元件標題的文字色彩、字型大小和字型樣式。在樣式分頁上方輸入標題文字後，會顯示標題對齊選項，包括靠左、置中、置中穿線或靠右。當對齊方式設為置中穿線時，此面板會額外顯示穿線色彩和粗細的控制項。

優惠卡片

這是每個優惠，也就是數量級距周圍的方框。這是最大的面板，因為它涵蓋三種視覺狀態：

• 未選取優惠：預設狀態的背景色彩、邊框色彩和邊框寬度。
• 優惠滑入：購物者將滑鼠移至卡片上方時套用的相同三項控制項。
• 已選優惠：目前所選優惠適用的相同三項控制項。

此面板也能設定卡片共用屬性：圓角半徑、卡片間距、水平與垂直內距，以及用於顯示或隱藏單選按鈕的 Radio選項。動畫背景效果則可在 Style 分頁上方，透過 Decoration切換開關個別設定（Blobs、Rings、Hearts、Starburst、Percent、Stars、Clock 或 Money），且只會顯示在已選優惠上。優惠卡片的色彩也會控制單選按鈕的外觀。

優惠標題與優惠副標題

兩個獨立面板，分別提供優惠標題列與副標題列的色彩、字型大小和字型樣式設定。

折扣標籤

設定折扣標籤的文字色彩、背景色彩、字型大小和字型樣式。請注意，這些設定也會套用至贈品額外徽章。

優惠圖片

控制優惠圖片的大小、圓角半徑、邊框色彩、邊框寬度，以及 Shadow（None、Small、Medium 或 Large）。也能設定圖片的顯示方式：

• Original：保留圖片原生長寬比。
• Square：將圖片裁切為正方形。
• Square (top)：將圖片裁切為正方形，保留圖片上方部分。
• Square (fit)：將完整圖片放入正方形內，不進行裁切。

數量徽章

設定可顯示在優惠圖片上的小型數量文字。您可以設定其文字色彩、背景色彩、圓角半徑、字型大小、字型樣式和 Position（Top right、Top left、Bottom right 或 Bottom left）。啟用「Show quantity badge」後，這個數字會顯示在優惠圖片上。

變體標籤

設定變體選項標題（例如 Size 或 Color）及其列號的色彩、字型大小和字型樣式。

下拉式選單

針對變體下拉式選單，使用獨立的 Dropdown面板調整文字、背景、邊框、圓角和內距。

優惠徽章

徽章是優惠上的醒目提示文字（例如「Most popular」）。除了常見的文字色彩、背景色彩、字型大小和字型樣式外，此面板還提供 Badge shape選擇器，包含多種預設樣式：

• Default、Folded、Pill
• Arrow Right、Arrow Left
• Square
• Banner、Banner Rounded
• Corner Ribbon、Side Ribbon、Side Ribbon Alt、Side Ribbon Rounded

價格

Price 面板分為三種文字樣式，每種樣式都有自己的色彩、字型大小和字型樣式：

• 主要價格：目前的銷售價格。
• 比較價格：以刪除線顯示的「原本」價格。
• 每件商品文字：每單位價格文字。

組合

商品組合也有 Bundle面板，可設定商品標題文字、組合商品之間的邊框，以及商品之間的加號。

優惠項目

設定優惠優點的項目符號清單的樣式。您可以在此設定共用的字型大小和字型樣式，並分別設定 Text color與 Icon color，讓圖示和文字使用不同色彩。

贈品與加價購

設定免費贈品區塊在兩種狀態下的樣式，每種狀態都有背景色彩、標題色彩、字型大小和字型樣式：

• 已選優惠贈品：所選優惠上的贈品區塊。
• 未選優惠贈品：其他優惠上的贈品區塊。

第三個群組 Gift image可控制贈品圖片的寬度和圓角半徑。

贈品與任選組合彈出式視窗圖片

開啟 Style > Modal style > Gift modal，然後找到 Image fit。您也可以在贈品或任選組合選擇器旁的 Customize modal style存取這些控制項。選擇 Original以保留完整照片的比例，或選擇 Square以使用一致的縮圖。此設定會套用至此折扣中的贈品選擇彈出式視窗和組合商品池彈出式視窗；主要小工具的圖片則使用獨立的優惠圖片控制項。

頁尾

設定小工具頁尾文字的色彩、字型大小和字型樣式。

容器與最大寬度

Container 面板透過 Max width設定控制小工具的整體寬度：

• Shopify default (44rem)：在可用空間內將小工具限制為 44rem。
• Full width (100%)：讓小工具延伸至容器寬度。
• Custom：顯示 Width欄位，讓您輸入像素值。

此面板也包含用於庫存不足提示文字的 Alert color。

在此使用 Margin top和 Margin bottom調整此折扣小工具周圍的空間，再加入自訂 CSS。

Full width 會填滿小工具的父容器。若主題中的商品資訊欄寬度較窄，Full width 無法將其加寬。

編輯提示

• 編輯時請查看即時預覽。將滑鼠移至面板標題上方時，對應元素會反白顯示，因此您可以在變更數值前確認正在編輯正確的部分。
• 一起設定優惠卡片的三種狀態（未選取、滑入、已選取），讓已選取狀態與其他狀態清楚區分。
• 如果面板未提供您需要的樣式設定，可以使用此區段底部的 Custom CSS面板，加入 CSS 來覆寫小工具樣式。