创建信任徽章

信任徽章是由支付、安全、物流、保障或政策图标组成的区块，可附带标题和描述（均为可选）。编辑器分为两个标签页：用于设置内容和样式的 Design，以及用于设置产品页面内置位置和短代码的 Placement。

1. 打开 Trust Badges

   在 Shopify 后台中，打开 Sami Product Labels，在应用导航中选择 Extra Features，然后选择 Trust Badges 标签页。

   如果您已有信任徽章，页面会以表格形式显示它们。如果列表为空，页面则会显示 Create your first trust badge 面板。

   

   Trust Badges 标签页包含创建操作、已保存的信任徽章和精选模板。

2. 选择开始方式

   点击 Create trust badge。表格可见时，该按钮显示在页面标题栏中；如果您还没有创建过信任徽章，则显示在空状态面板中。

   滚动到 Featured templates。点击 View all templates 可显示全部四种设计：Eco-Friendly template、With payment method、Policies store template 和 Badge box template。点击某个模板上的 Select，即可打开已应用图标和样式的模板。

   两种方式都会打开 Design 标签页的编辑器。

   

   可以从头创建信任徽章，也可以选择四种精选模板之一。

3. 为信任徽章命名

   名称栏显示在预览上方。将 New Trust Badge 替换为不超过 50 个字符的名称。该名称仅用于在应用中识别信任徽章，不会向客户显示。

   

   使用清晰的内部名称，方便在表格中找到该信任徽章。

4. 添加标题和描述

   在 Content & Badges 中，打开 Title 和 Description，输入显示在图标上方的文字（可选）。这两个字段都支持粗体、斜体、下划线、表情符号、文字对齐和源码模式。

   这些字段按语言分别设置，标签会显示当前语言，例如 Title (en)。使用预览上方的语言选择器可编辑其他语言。

   如果只想显示图标，请将两个字段都留空。

   

   Title 和 Description 是可选的富文本字段，按语言分别编辑。

5. 添加徽章图标

   在 Badges 下，点击 Add Badge，然后选择：

   选项	作用
   Select badge image	打开 Select Image 对话框。
   Line break	让后面的图标从新的一行开始。

   在 Select Image 中，使用 Search images 查找图标。Library 来源包含 400 多张支付、安全、物流、保障和政策类图片，当前的项目数量显示在来源名称旁边。选择一张或多张图片，然后点击 Select Image。

   切换到 Design your Images 可使用上传的、通过 URL 导入的或相关的自定义设计。选择图片后，如果想在添加前创建变体，请点击 Edit with AI。

   

   搜索内置图库或切换到 Design your Images，然后确认您的选择。

6. 重新排序并配置每个图标

   每个图标在 Badges 列表中显示为一行。拖动某一行的手柄可更改显示顺序，点击 Delete 可将其删除。使用 Line break 项目可控制新的一行从何处开始。

   点击该行的 General 按钮可打开其设置：

   • Change Image：替换所选图标。
   • Link：让图标打开某个 URL；使用外部链接选项可在新标签页中打开。
   • Tooltip：添加不超过 150 个字符的文字，当买家将鼠标指向图标时显示。
   • Layout colors：为内置 SVG 图标中受支持的图层重新着色。

   

   拖动图标可重新排序，使用 General 可更改图片、链接、提示文字或受支持的颜色。

7. 设置信任徽章区块样式

   使用可折叠的设计部分，让信任徽章与您的模板风格保持一致：

   部分	主要设置
   Design Main Section	区块宽度、外边距、内边距、边框粗细/样式/颜色、阴影和圆角半径。
   Design title & description	标题和描述的自定义字体、颜色、字号和行高。
   Design Badge	单色、单色卡片、原色或原色卡片样式；对齐方式；宽度和高度；外边距；以及动画。
   Responsive size	分别为平板和手机设置图标的宽度和高度。
   Advance Section	自定义 CSS，以及可点击的信任徽章选择器 CSS 参考。

   可用的动画有 SlideInUp、SadeInDown、BounceIn、FlipInX 和 ZoomIn。开启 Animation，选择一种效果，并使用播放按钮进行预览。

   

   打开每个设计部分，设置容器、文字、图标、响应式尺寸和自定义 CSS 的样式。

   注意

   在 Advance Section 中，点击 CSS reference 里的某个选择器，即可将其对应的作用域规则插入自定义 CSS 编辑器。

8. 选择信任徽章的显示位置

   切换到 Placement 标签页：

   选项	作用
   Product page	开启该开关后，会在所有产品页面上应用内置的位置显示信任徽章。
   Shortcode	如果想将信任徽章放在模板中的自定义位置，请复制该代码片段。

   尚未保存的信任徽章，其短代码中使用的是 data-id="new"。请先保存信任徽章，再将该代码片段放入模板。

   

   使用内置的产品页面位置，或复制短代码放置到自定义位置。

   注意

   完整的模板编辑器操作流程请参阅使用短代码放置信任徽章。

9. 预览并保存

   使用预览上方的控件可以：

   • 切换编辑语言；
   • 预览 Product page；
   • 在桌面端和移动端视图之间切换；
   • 显示或隐藏示例产品；
   • 将信任徽章设置为 Active 或 Draft。

   检查预览效果后，点击右上角的 Save。如果想不保留未保存的编辑并离开，请点击 Discard。

   

   预览效果，选择 Active 或 Draft，然后保存信任徽章。

后续步骤

• 信任徽章概览：管理已保存的信任徽章、模板、状态和位置。
• 使用短代码放置信任徽章：将信任徽章添加到模板中的精确位置。

提示

需要支持？

如果您在按照这些步骤操作时遇到任何困难，请通过 [email protected] 联系我们。