更改徽章大小
为桌面端、移动端、产品页面和列表页面调整文字徽章与图片徽章的大小。
使用徽章编辑器中的 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。
- 设置该组合的尺寸。
- 根据需要对其他设备和页面组合重复上述操作。
| 选择 | 尺寸的适用范围 |
|---|---|
| Desktop > Product page size | 桌面端的产品页面 |
| Desktop > Listing pages size | 桌面端的列表页面,包括产品系列页面 |
| Mobile > Product page size | 移动端的产品页面 |
| Mobile > Listing pages size | 移动端的列表页面,包括产品系列页面 |

选择设备和页面类型,然后设置该组合的尺寸。
选择尺寸单位
Section titled “选择尺寸单位”每个尺寸都可以使用以下单位之一:
| 单位 | 适用情况 |
|---|---|
| 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。