變更徽章大小
針對桌面、行動裝置、商品頁面和清單頁面調整文字徽章與圖片徽章的大小。
使用徽章編輯器中的 Size 區段，即可在所有地方調整徽章大小，或為每種裝置和頁面類型設定不同的大小。
開啟 Size 區段
Section titled “開啟 Size 區段”-
開啟 Badges & Labels
Section titled “開啟 Badges & Labels”在 Shopify 後台中，開啟 Sami Product Labels > Badges & Labels。
-
找到您想調整大小的徽章，然後點擊其列中的 Edit badge/label。
若要改為調整新徽章的大小，請點擊 Create badge 並選擇 Text badge 或 Image badge。
-
展開 Size
Section titled “展開 Size”在徽章編輯器中，停留在 Design 標籤，捲動到 Size 並展開該區段。
開啟徽章，停留在 Design，並展開 Size。
在桌面和行動裝置上使用相同大小
Section titled “在桌面和行動裝置上使用相同大小”在 Responsive size 下，當徽章在每種裝置和支援的頁面預覽上都使用同一組尺寸時，請保持選取 Use same size on desktop and mobile。
- 對於文字徽章，請分別設定 Width 和 Height。
- 對於已啟用 Lock aspect ratio 的圖片徽章，請使用 Size 滑桿或 Width 欄位。高度會自動變化以維持圖片比例。
桌面和行動裝置使用同一組尺寸。
自訂每種裝置和頁面類型
Section titled “自訂每種裝置和頁面類型”當徽章在不同情境中需要不同尺寸時，請選取 Customize desktop and mobile separately。
- 選擇 Desktop 或 Mobile。
- 選擇 Product page size 或 Listing pages size。
- 設定該組合的尺寸。
- 視需要對其他裝置和頁面組合重複上述步驟。
| Selection | Where the size applies |
|---|---|
| Desktop > Product page size | 桌面上的商品頁面 |
| Desktop > Listing pages size | 桌面上的清單頁面，包括商品系列頁面 |
| Mobile > Product page size | 行動裝置上的商品頁面 |
| Mobile > Listing pages size | 行動裝置上的清單頁面，包括商品系列頁面 |
選擇裝置和頁面類型，然後設定該組合的大小。
選擇大小單位
Section titled “選擇大小單位”每個尺寸都可以使用下列其中一種單位：
| Unit | Use it when |
|---|---|
| px | 您需要以像素為單位的精確尺寸。 |
| % | 您希望徽章依可用的商品圖片區域等比縮放。請在每種頁面類型和裝置上預覽結果。 |
對於文字徽章，Width 和 Height 各有自己的單位選擇器，不需要使用相同的單位。
調整文字徽章的大小
Section titled “調整文字徽章的大小”文字徽章在 Width 和 Height 下方提供額外的控制項：
- Auto-fit text to badge 關閉：將 Text size 設為以像素為單位的固定字型大小。
- Auto-fit text to badge 開啟：應用程式會自動調整文字大小以符合徽章背景，Text size 則變為百分比控制項。
- Letter spacing：以像素為單位增加或減少字元之間的間距。
啟用 Auto-fit text to badge，讓變動的文字保持在徽章背景內。
保持或變更圖片徽章的比例
Section titled “保持或變更圖片徽章的比例”對於圖片徽章，Lock aspect ratio 預設為啟用。
- 保持啟用，即可用單一的 Size 或 Width 控制項調整圖片大小，同時保留原始比例。
- 只有在您需要分別設定 Width 和 Height 時才將它關閉。將它們變更為不同的比例可能會讓圖片被拉伸或壓扁。
保持啟用 Lock aspect ratio，即可調整圖片徽章大小而不使其變形。
使用預覽工具列在 Product page 和 Collection page 之間切換，然後檢查 Desktop view 和 Mobile view。徽章在每個必要的預覽中看起來都正確後，請點擊 Save。