更改徽章样式

使用 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	适用于
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。这两个选项可以分别启用：

选项	可用控件
Add border	将 Border width 设置为 0 到 8 px，选择 Border color，并选择 Solid、Dotted 或 Dashed。
Round corners	将 Corner radius 设置为 0 到 100 px。

添加边框、设置圆角，或同时使用这两项设置。

设置图片徽章的样式

图片徽章不会显示文字徽章的字体、背景或 Border & corners 控件。请使用 Design 标签页顶部的 Content 更改徽章图稿，然后使用 Advanced settings 调整其不透明度或旋转角度。

图片尺寸和位置的设置，请参阅 更改徽章大小 和 更改徽章位置。

调整不透明度或旋转角度

文字徽章和图片徽章都可以使用这些效果：

1. 展开 Advanced settings。
2. 在 Effects 下，启用您需要的选项。
3. 一边查看实时预览，一边调整数值。

效果	范围
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] 联系我们。