變更徽章樣式

使用 Design 標籤來變更徽章的外觀。文字徽章提供字型、顏色、背景、邊框、不透明度和旋轉的控制項。圖片徽章則為所選圖像提供不透明度和旋轉的控制項。

在編輯器中開啟徽章

1. 開啟 Badges & Labels

   在 Shopify 後台中，開啟 Sami Product Labels > Badges & Labels。

2. 選取徽章

   找到您想更新的徽章，然後點擊其列中的 Edit badge/label。

   若要改為設定新徽章的樣式，請點擊 Create badge，然後選擇 Text badge 或 Image badge。

   

   針對您想自訂的徽章，點擊 Edit badge/label。

3. 停留在 Design 標籤

   編輯器會開啟在 Design。可用的區段取決於您選取的是文字徽章還是圖片徽章。

自訂文字徽章

選擇字型和文字顏色

使用 Badge text 下方的控制項來自訂文字：

• Font picker：從內建清單中選擇字型。
• Use Custom Font Style：啟用此選項後，可在 Font 中輸入字型家族，然後選擇可用的字型樣式或粗細，例如 Regular 或 Bold。
• Text color：開啟顏色選取器，並選擇在徽章背景上仍清晰易讀的顏色。

選擇內建字型或啟用 Use Custom Font Style，然後設定文字顏色。

文字大小和字母間距是在 Size 中設定。這些控制項請參閱變更徽章大小。

選擇背景

展開 Style，然後選擇一種 Fill type：

Fill type	Use it for
Solid	單一背景顏色或顏色預設組合。
Shape	具有純色或漸層色彩處理的範本形狀。
Image	用作文字徽章背景的紋理、圖樣或圖像。

展開 Style 並選擇文字徽章的背景類型。

使用純色背景

選擇 Solid，然後挑選 Background color。您也可以選擇 Choose template 下的其中一個預設組合。

使用形狀或漸層背景

選擇 Shape，然後設定下列項目：

• Choose from library：開啟範本圖庫，並依 Sales、Autotext、Stock、Free shipping、Pre-order 等類別篩選設計。
• Start color 和 End color：使用同一種顏色可得到單色效果，使用兩種不同的顏色則可得到漸層。
• Gradient direction：選擇 Left to right、Top to bottom、Diagonal 或 Radial。
• Choose template：直接從編輯器套用形狀預設組合。

選擇形狀、設定其顏色，並選擇漸層方向。

使用圖片背景

選擇 Image，然後點擊 Select Image 選擇自訂背景。編輯器接受最大 5 MB 的 PNG、JPG 或 SVG 檔案。點擊 Remove 可清除所選的背景。

注意

此圖片僅用作文字徽章的背景。若要顯示不含可編輯文字的獨立圖像，請改用圖片徽章。

選取要用作文字徽章背景的圖像。

加入邊框或圓角

展開 Border & corners。兩個選項可以獨立啟用：

Option	Available controls
Add border	設定 0 到 8 px 的 Border width、選擇 Border color，並選取 Solid、Dotted 或 Dashed。
Round corners	設定 0 到 100 px 的 Corner radius。

加入邊框、設定圓角，或同時使用兩項設定。

設定圖片徽章的樣式

圖片徽章不會顯示文字徽章的字型、背景或 Border & corners 控制項。請使用 Design 標籤頂部的 Content 變更徽章圖像，然後使用 Advanced settings 調整其不透明度或旋轉。

圖片的尺寸和位置請參閱變更徽章大小和變更徽章位置。

調整不透明度或旋轉

這些效果同時適用於文字徽章和圖片徽章：

1. 展開 Advanced settings。
2. 在 Effects 下，啟用您需要的選項。
3. 在查看即時預覽的同時調整數值。

Effect	Range
Adjust opacity	0% 至 100%
Rotate badge	0° 至 360°

啟用 Adjust opacity 或 Rotate badge，然後設定效果數值。

注意

Effects 區段也包含 Use animation。完整的動畫流程請參閱為徽章加入動畫。

預覽並儲存

使用預覽工具列在 Collection page 和 Product page 上檢查徽章，然後在 Desktop view 和 Mobile view 之間切換。徽章在每個必要的預覽中看起來都正確後，請點擊 Save。

警告

變更顏色或不透明度後，請檢查文字對比度。在某張商品圖片上清晰易讀的樣式，在另一張上可能難以閱讀。

後續步驟

• 變更徽章大小：調整徽章大小，並調整文字大小或字母間距。
• 變更徽章位置：移動徽章並調整其邊距或內距。
• 為徽章加入動畫：套用動畫效果並設定其速度和重複次數。
• 使用自訂 CSS：以自訂 CSS 微調徽章。

提示

需要支援嗎？

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