自定义 CSS

对于可视化编辑器无法实现的样式，Sami Product Labels 内置了 CSS 编辑器。您还可以通过 z-index 控制徽章的层叠顺序、添加悬停提示，并为图片徽章设置替代文字。

如何添加自定义 CSS

1. 打开徽章编辑器

   在 Sami Product Labels 中，前往 Badges & Labels。选择 Create badge，或在现有徽章的 Actions 列中选择 Edit badge/label 图标。

2. 前往 Design 标签页

   在徽章编辑器中选择 Design。编辑器打开时默认选中此标签页。

3. 滚动到 Advanced Settings

   在 Design 标签页靠近底部的位置展开 Advanced settings。

4. 启用“Custom css”

   在 Advanced 下，开启 Custom css。

5. 插入选择器并添加 CSS

   CSS 编辑器会出现，并在 CSS reference 下提供三个选项：

   • .samita_productLabel-content 用于设置整个徽章的样式。
   • .samita_productLabel-content-text 用于设置文字徽章的样式。
   • .samita_productLabel-content img 用于设置图片徽章的样式。

   选择您需要的选项。应用会在编辑器中插入一个限定在当前徽章 ID 范围内的选择器，例如 .__content--94129。请保留选择器中这部分徽章专属内容，然后只在大括号内添加您需要的声明。

   /* Use the badge ID inserted by the app in place of YOUR_BADGE_ID. */
   .samita_productLabel-content.__content--YOUR_BADGE_ID {
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
   }
   
   .samita_productLabel-content.__content--YOUR_BADGE_ID:hover {
     transform: scale(1.1);
     transition: transform 0.2s ease;
   }

   

   在 CSS reference 下选择一个 class，即可将限定在徽章范围内的选择器插入 Custom CSS 编辑器。

6. 预览并保存

   编辑时请查看实时预览。确认效果正确后，选择 Save，然后在店面的相关产品系列页面或产品页面上验证徽章。

警告

自定义 CSS 会随此徽章一起保存，但其选择器仍决定了它能影响店面中的哪些元素。请保留应用生成的徽章专属选择器。单独使用 .samita_productLabel-content 这类宽泛的选择器，也可能匹配到其他徽章。

Z-index 控制

修复被产品图片叠加层、固定页眉或其他徽章遮挡的徽章。

1. 在 Advanced settings 中，启用 Z-index。
2. 输入 1 到 100 之间的值。数值越大，徽章越会显示在 z-index 值较低的元素前面。

设置 z-index 值来控制徽章的层叠顺序。

注意

Z-index 还会受到您的模板所创建的层叠上下文影响。如果提高徽章的数值后仍无法使其显示在前面，可能需要对模板中的父容器单独调整 CSS。

悬停提示

添加一个在客户将鼠标悬停在徽章上时出现的提示，这样无需让产品图片显得杂乱，也能说明“New Arrival”或“Limited Edition”的含义。

1. 在 Advanced settings 中，启用 Show tooltip on hover。
2. 输入悬停时要显示的提示文字。

添加客户将鼠标悬停在徽章上时显示的提示文字。

请勿将重要信息仅放在提示中。触屏用户和使用键盘导航的客户可能无法触发悬停状态。

图片徽章的 SEO 替代文字

设置替代文字，让屏幕阅读器能够描述图片徽章的含义。有描述性的替代文字也有助于图片 SEO。

1. 在 Advanced settings 中，启用 Seo alt text。
2. 输入对徽章所传达信息的简明描述，例如“20% off sale badge”或“Free shipping label”。避免堆砌关键词，也不要使用“image of”之类的短语。

设置替代文字，以提升无障碍访问和 SEO 效果。

后续步骤

• 更改徽章样式：使用可视化编辑器控件自定义您的徽章。
• 更改徽章位置：将徽章放在页面上的合适位置。

提示

需要支持？

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