跳转到内容
免费试用 7 天
简体中文
在 Claude 中打开 就此页面提问在 ChatGPT 中打开 就此页面提问

更改徽章大小

为桌面端、移动端、产品页面和列表页面调整文字徽章与图片徽章的大小。

使用徽章编辑器中的 Size 部分,可以统一调整徽章大小,也可以为每种设备和页面类型分别设置不同的大小。

  1. 在 Shopify 后台中,打开 Sami Product Labels > Badges & Labels。

  2. 找到要调整大小的徽章,然后点击其所在行的 Edit badge/label。

    如果要调整新徽章的大小,请点击 Create badge 并选择 Text badge 或 Image badge。

  3. 在徽章编辑器中,停留在 Design 标签页,滚动到 Size 并展开该部分。

    徽章编辑器 Design 标签页中的 Size 部分

    打开徽章,停留在 Design,然后展开 Size。

在 Responsive size 下,如果希望徽章在所有设备和受支持的页面预览中使用同一组尺寸,请保持选中 Use same size on desktop and mobile。

  • 对于文字徽章,分别设置 Width 和 Height。
  • 对于已启用 Lock aspect ratio 的图片徽章,使用 Size 滑块或 Width 字段。高度会自动变化,以保持图片比例。

文字徽章已选择 Use same size on desktop and mobile

桌面端和移动端使用同一组尺寸。

为每种设备和页面类型分别设置

Section titled “为每种设备和页面类型分别设置”

当徽章在不同场景下需要不同尺寸时,请选择 Customize desktop and mobile separately。

  1. 选择 Desktop 或 Mobile。
  2. 选择 Product page size 或 Listing pages size。
  3. 设置该组合的尺寸。
  4. 根据需要对其他设备和页面组合重复上述操作。
选择 尺寸的适用范围
Desktop > Product page size 桌面端的产品页面
Desktop > Listing pages size 桌面端的列表页面,包括产品系列页面
Mobile > Product page size 移动端的产品页面
Mobile > Listing pages size 移动端的列表页面,包括产品系列页面

桌面端、移动端、产品页面和列表页面的独立尺寸控件

选择设备和页面类型,然后设置该组合的尺寸。

每个尺寸都可以使用以下单位之一:

单位 适用情况
px 您需要精确的像素尺寸。
% 您希望徽章相对于可用的产品图片区域按比例缩放。请在每种页面类型和设备上预览效果。

对于文字徽章,Width 和 Height 各有自己的单位选择器,二者不必使用相同的单位。

文字徽章在 Width 和 Height 下方提供更多控件:

  • Auto-fit text to badge 关闭:将 Text size 设置为以像素为单位的固定字号。
  • Auto-fit text to badge 开启:应用会自动调整文字大小以适应徽章背景,Text size 会变为百分比控件。
  • Letter spacing:以像素为单位增大或减小字符之间的间距。

已启用 Auto-fit text to badge,文字大小以百分比设置

启用 Auto-fit text to badge,使变化的文字始终保持在徽章背景之内。

对于图片徽章,Lock aspect ratio 默认处于启用状态。

  • 保持启用,即可用一个 Size 或 Width 控件调整图片大小,同时保持原始比例。
  • 仅在需要分别设置 Width 和 Height 时才将其关闭。将它们改为不同的比例可能会使图片被拉伸或压扁。

已启用 Lock aspect ratio 的图片徽章 Size 控件

保持启用 Lock aspect ratio,即可调整图片徽章大小而不使其变形。

使用预览工具栏在 Product page 和 Collection page 之间切换,然后同时检查 Desktop view 和 Mobile view。当徽章在所有需要的预览中都显示正确后,点击 Save。

这对您有帮助吗?