按设备和页面显示

在 Products 标签页确定徽章适用于哪些产品之后，徽章编辑器的 Display 标签页会决定徽章在何处以及何时显示。

该标签页是一个可折叠部分的列表：

部分	控制内容	说明文档
Customer conditions	哪些购物者可以看到徽章（已登录、标签、特定客户）	按客户定位
Page conditions	徽章显示在哪些页面类型上	本页
Language conditions	访客浏览时使用的店面语言	按国家/地区和语言定位
Country conditions	访客所在的国家/地区	按国家/地区和语言定位
Other conditions	产品图片、设备和需排除的模板元素	本页
Visibility Date & Countdown	开始/结束日期和倒计时器	设置徽章显示时间
Priority conditions	多个徽章应用于同一产品时哪个优先	本页

Display 标签页。带有箭头的部分可直接展开；带有开关的部分需要先开启。

注意

带有箭头（⌄）的部分可直接展开。带有开关的部分（Language、Country、Priority）需要先开启，才会显示其字段。

打开 Display 标签页

1. 打开应用

   在 Shopify 后台中，前往 应用 → Sami Product Labels。

2. 打开 Badges & Labels

   在应用左侧菜单中，点击 Badges & Labels。列表会显示每个徽章的 Id、名称、预览、类型、优先级、位置和状态。

   

   Badges & Labels 列表。点击 Actions 列中的铅笔图标即可编辑徽章。

3. 编辑徽章

   在要配置的徽章的 Actions 列中，点击铅笔图标。编辑器会打开，其中有三个标签页：Design、Products、Display。

4. 前往 Display

   点击 Display 标签页。

注意

右上角的 Save 和 Discard 按钮只有在您进行更改后才会出现。如果想放弃所做的编辑，请点击 Discard → Discard changes。

Page conditions

默认情况下，徽章会显示在产品出现的每个页面上。添加页面条件可将其限制在特定的页面类型上。

如何添加页面条件

1. 展开 Page conditions

   点击 Page conditions 行将其展开。随后会出现 + Add conditions 按钮。

   

   空的 Page conditions 部分：尚无规则，因此徽章会在所有页面显示。

2. 点击 + Add conditions

   会出现一行条件，包含三个字段：Page（固定）、运算符和页面类型。默认值为 Page is equal to Index page。

   

   每点击一次 + Add conditions 就会添加一行。使用行末的垃圾桶图标可将其删除。

3. 选择运算符

   • is equal to：仅在所选页面类型上显示徽章。
   • is not equal to：在所选页面类型以外的所有位置显示徽章。

4. 选择页面类型

   选项	徽章显示的位置
   Index page	您店面的首页
   Collection page	产品系列/分类列表页面
   Product page	单个产品页面
   Article Page	博客文章页面
   Blog page	博客列表页面
   Cart page (including cart drawer)	购物车页面和侧滑购物车抽屉
   Search page	搜索结果页面
   Specific pages	仅限您输入的确切 URL（见下一步）

   

   页面条件可用的八种页面类型。

5. 对于 Specific pages，输入 URL

   选择 Specific pages 后会增加第四个字段。请输入该页面完整的店面 URL，例如 https://your-store.myshopify.com/pages/summer-sale。占位符会显示您自己商店的 URL 作为参考。

   

   Specific pages 会增加一个 URL 字段：请粘贴完整的页面 URL，而不只是路径。

6. 保存

   点击右上角的 Save。

警告

徽章仍然需要同时匹配 Products 标签页。页面条件只会缩小匹配产品显示徽章的位置，不会让徽章出现在不适用的产品上。

Other conditions

展开 Other conditions，可控制哪张产品图片带有徽章、哪些设备可以看到徽章，以及要跳过哪些模板元素。

设置	选项	行为
Show on (product page)	All images / First image	在图库中的每张图片上显示徽章，或仅在第一张（主）产品图片上显示。
Device targeting	All devices / Desktop / Mobile	将徽章限制给桌面端或移动端购物者，或在所有设备上显示。
Do not show label on	CSS class 列表：.CLASS1, .CLASS2,...	徽章不会在匹配这些 class 的任何元素上渲染。当模板中的滑块、快速查看或追加销售区域不适合放置徽章时很有用。

图片、设备和排除设置都位于 Other conditions 下。

注意

Do not show label on 需要以逗号分隔的 CSS class 选择器，每个都以点号开头，例如 .product-card__slider, .quick-view。请在模板中检查该元素以找到 class 名称。

Priority conditions

当多个徽章匹配同一个产品时，优先级决定显示哪一个。

1. 开启 Priority conditions

   点击 Priority conditions 行上的开关。随后会出现 Priority value 字段。

2. 输入优先级数值

   输入 0 到 100 之间的数字。0 为最高优先级，100 为最低。 应用在该字段下方也显示了相同的提示。

   

   数字越小，优先级越高。如果产品已有优先级更高的徽章，则该徽章会被隐藏。

3. 保存

   点击 Save。该数值现在会显示在 Badges & Labels 列表的 Priority 列中，方便您一眼比较所有徽章。

警告

关闭优先级的徽章在列表中显示为 None，不参与比较。如果希望某个徽章稳定地优先于另一个，请为两者都设置优先级数值。

优先级示例

徽章	优先级数值	在同时匹配两者的产品上的结果
Sale off	0	显示
Best seller	10	隐藏

后续步骤

• 更改徽章位置：调整徽章在产品图片上的位置。
• 定位产品：选择哪些产品显示您的徽章。
• 设置徽章显示时间：为徽章设置开始和结束日期。

提示

需要支持？

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