创建亮点
在 Sami Product Labels 中创建亮点区块的分步指南。
亮点区块是由特色项目组成的网格，每个项目包含图片、标题和描述，您可以将其放在产品页面上，展示产品优势和卖点。编辑器分为两个标签页：Design（内容和样式）和 Placement（显示的位置和对象）。
-
打开 Highlights 标签页
Section titled “打开 Highlights 标签页”在 Shopify 后台中，打开 Sami Product Labels 应用，点击应用侧边栏中的 Extra Features，然后切换到 Highlights 标签页。
Highlights 标签页列出了您创建的所有亮点区块。
-
点击 Create highlights
Section titled “点击 Create highlights”点击 Create highlights。全屏编辑器会打开 Design 标签页。
可以从头创建亮点，也可以从精选模板开始。
-
名称栏位于预览上方。将 New Highlight 替换为不超过 50 个字符的名称。该名称仅供内部使用，用于在列表中识别区块，不会向客户显示。
-
添加标题和描述
Section titled “添加标题和描述”在 Content & Badges 中，填写 Title 和 Description，它们是整个区块的标题和简介文字，例如“Why Choose Us”。两者都是富文本编辑器，支持粗体、斜体、下划线、表情符号、对齐方式和 HTML 视图（
</>），并且都按语言分别设置，因此标签会显示当前语言，例如Title (en)。两者均为可选项，留空则只显示各个项目。
区块标题和描述是富文本字段，按语言分别编辑。
-
添加亮点项目
Section titled “添加亮点项目”在 Badges 下，点击 Add highlight，然后选择：
选项 作用 Select badge image 打开图片选择器，添加一个或多个项目。 Line break 插入换行，使后面的项目从新的一行开始。 在选择器中，Library 包含 1,800 多张图片。您可以按名称搜索，也可以使用 Images、Free Labels、All colors 和 Latest 筛选器缩小范围（Clear 可重置筛选）。点击需要的图片，然后点击 Select Image。您也可以将来源切换为 Design your Images 来使用自己的图片，或点击 Edit with AI 修改所选图片。
筛选或搜索图库，然后为亮点项目选择图片。
-
为每个项目撰写标题和描述
Section titled “为每个项目撰写标题和描述”每个项目在 Badges 列表中显示为一行。点击某一行的齿轮图标可打开其面板，您可以在其中设置：
- Image：点击 Change 更换为其他图片。
- Title：该特色的简短标题，按语言分别设置。
- Description：不超过 250 个字符，按语言分别设置。
使用面板中的 Delete 可删除该项目，拖动某一行的手柄可重新排列网格顺序。
每个项目都有各自的图片、标题和描述。
-
设置网格和区块样式
Section titled “设置网格和区块样式”打开 Design Main Section 来控制整个区块：
设置 作用 Alignment 左对齐、居中或右对齐。 Column 每行显示的项目数量。 Width 区块宽度，单位为 %或px。Background Heading Color 标题和描述的背景。 Background Color 项目区域的背景。 Margin / Padding 区块外部和内部的间距。 Border & corners 边框样式、颜色和圆角半径。 
Design Main Section 控制网格和区块容器。
-
设置亮点项目样式
Section titled “设置亮点项目样式”打开 Design Badge 来设置项目本身的样式：
设置 作用 Alignment 每个项目内容的对齐方式。 Style 四种图片样式：单色、卡片上的单色、原色，以及卡片上的原色。 Background Color 每个项目的背景。 Size 图片的 Width 和 Height，单位为 px或%（默认 50 px）。Positions 图片相对于文字的位置，例如 Image Position Top。 Margin / Padding / Border & corners 每个项目的间距和边框。 Title / Description 项目文字的字体、颜色、字号和行高。 
Design Badge 用于设置各个亮点项目的样式。
-
设置区块标题样式（可选）
Section titled “设置区块标题样式（可选）”打开 Design title & description。Design Title 和 Design Description 各自拥有独立的字体、颜色、字号和行高设置，分别用于区块级标题和简介文字。
-
设置响应式尺寸和自定义 CSS（可选）
Section titled “设置响应式尺寸和自定义 CSS（可选）”- Responsive size：覆盖平板和手机上的尺寸设置。
- Advance Section：添加 Custom CSS (Developer Zone)。编辑器下方的 CSS reference 列出了可以使用的选择器，例如
.samita_highlight_container，点击其中一个即可插入。
CSS reference 列出了可用于自定义样式的选择器。
-
选择亮点的显示位置
Section titled “选择亮点的显示位置”切换到 Placement 标签页：
- Product page：开启后，会在每个产品页面上应用内置的位置显示该区块。
- Shortcode：复制代码片段并粘贴到模板中，即可将区块放置在精确的位置。
- Conditions：Product、Customer、Page、Language 和 Country 条件可以缩小区块的显示对象和位置。
Placement 标签页集中了显示条件、产品页面开关和短代码。
-
在预览上方，您可以切换语言、选择要预览的页面、切换桌面端 / 移动端，并通过眼睛图标隐藏示例产品。将区块设置为 Active 或 Draft，然后点击右上角的 Save。使用 Discard 可放弃未保存的更改。