更改徽章位置
将徽章放在产品图片内部或外部，使用预设或自定义位置，并微调其间距。
使用 Position 部分，可将文字徽章或图片徽章放在产品图片上方、产品页面元素下方，或模板中自定义元素的旁边。
打开 Position 部分
Section titled “打开 Position 部分”-
打开 Badges & Labels
Section titled “打开 Badges & Labels”在 Shopify 后台中，打开 Sami Product Labels > Badges & Labels。
-
创建或选择徽章
Section titled “创建或选择徽章”要创建徽章，请点击 Create badge，然后选择 Text badge 或 Image badge。
要更新现有徽章，请点击该徽章所在行的 Edit badge/label。
-
展开 Position
Section titled “展开 Position”在徽章编辑器中，停留在 Design 标签页，滚动到 Position 并展开该部分。
打开 Design 标签页并展开 Position。
将徽章放在产品图片内部
Section titled “将徽章放在产品图片内部”当徽章需要覆盖在产品图片上时，请选择 Inside product image。
选择设置的适用范围
Section titled “选择设置的适用范围”使用 Badge placement 选择以下模式之一：
- Use the same position for collection page and product page：一个位置同时适用于两种页面类型。
- Set different position for collection page and product page：使用 Listing pages 和 Product page 标签页分别配置各自的位置。
可在所有页面使用同一个图片内部位置，也可分别配置 Listing pages 和 Product page。
选择预设位置
Section titled “选择预设位置”在 Badge position 下，选择位置网格中的九个点之一。
| 位置 | 在图片上的位置 |
|---|---|
| Top left | 左上角 |
| Top center | 上边缘中央 |
| Top right | 右上角 |
| Center left | 左边缘中央 |
| Center | 图片中央 |
| Center right | 右边缘中央 |
| Bottom left | 左下角 |
| Bottom center | 下边缘中央 |
| Bottom right | 右下角 |
在产品图片内部选择九个预设位置之一。
按百分比设置自定义位置
Section titled “按百分比设置自定义位置”当九个预设位置不够精确时，请开启 Use Custom Position。编辑器会将网格替换为：
- 垂直锚点：Top 或 Bottom。
- 水平锚点：Left 或 Right。
- 一个百分比滑块，用于设置与所选各锚点之间的偏移量。
使用更改位置按钮切换锚点，然后一边查看预览，一边调整滑块。
选择垂直和水平锚点，然后设置它们的百分比偏移量。
将徽章放在产品图片外部
Section titled “将徽章放在产品图片外部”当徽章需要显示在产品信息旁边而不是覆盖图片时，请选择 Outside product image。
打开 Predefined position 并选择以下选项之一：
| 选项 | 在产品页面上的位置 |
|---|---|
| Below the product image | 产品图片正下方 |
| Below the product title | 产品标题正下方 |
| Below the product price | 产品价格正下方 |
| Below the product quantity | 数量控件正下方 |
| Below the add to cart button | 加入购物车按钮正下方 |
| Below the buy now button | 立即购买按钮正下方 |
| Custom | 模板中由 ID 或 class 标识的元素旁边 |
在 Badge position 下，选择徽章的左对齐、居中或右对齐。
选择一个产品页面元素，然后将徽章设为左对齐、居中或右对齐。
使用模板选择器放置徽章
Section titled “使用模板选择器放置徽章”在 Predefined position 中选择 Custom，即可指定模板中的某个元素。在需要的字段中填写相应的 ID 或 class。
| 字段 | 页面类型 |
|---|---|
| Position in product page | 产品页面 |
| Position in home page | 首页 |
| Position in collection page | 产品系列页面 |
| Position in other page | 其他页面类型 |
例如，class 可填写 .product-form，ID 可填写 #ProductInfo。请为每个需要此自定义位置的页面类型分别填写值。
为每个需要自定义徽章位置的页面类型填写模板 ID 或 class。
调整外边距和内边距
Section titled “调整外边距和内边距”展开 Margin 可更改外部间距（单位为像素）。编辑器会显示与所选位置相关的边。
展开 Padding 可更改徽章内容与其边缘之间的间距。您可以分别设置上、下、左、右的值。
使用以像素为单位的外边距和内边距值微调徽章。
使用预览控件查看 Collection page 和 Product page，然后在 Desktop view 和 Mobile view 之间切换。当徽章显示在预期位置后，点击 Save。