shopify模板自定义徽章和图标步骤

徽章

当价格下降或库存计数达到 0 时，系统会自动将徽章促销和售完徽章添加到您的产品图片中。您可以调整徽章的位置、形状和颜色。

Page 和 Blog 徽章会显示在相关的搜索结果中。您可以自定义这些徽章的位置和形状，但不能自定义颜色。

自定义徽章

PC：

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 找到您要编辑的模板，然后点击自定义。

3.点击模板设置。4. 点击徽章。5. 使用下拉菜单选择产品卡中的徽章位置。在左上方、右上方、左下方（默认）或右下方之间选择。6. 添加具有角半径滑动标尺的圆角。将角半径设置为 0px 会产生方形徽章边缘，而增加半径范围会舍入徽章边缘。6. 为您的徽章选择配色方案。您可以为售完的商品设置替代配色方案。7. 点击保存。

苹果系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分，轻触在线商店。

3. 轻触管理模板。

4. 找到您要编辑的模板，然后轻触自定义。

5. 轻触编辑。

6.点击模板设置。7. 点击徽章。8. 使用下拉菜单选择产品卡中的徽章位置。在左上方、右上方、左下方（默认）或右下方之间选择。9. 添加具有角半径滑动标尺的圆角。将角半径设置为 0px 会产生方形徽章边缘，而增加半径范围会舍入徽章边缘。10. 为您的徽章选择配色方案。您可以为售完的商品设置替代配色方案。11. 点击保存。

安卓系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分，轻触在线商店。

3. 轻触管理模板。

4. 找到您要编辑的模板，然后轻触自定义。

5. 轻触编辑。

6.点击模板设置。7. 点击徽章。8. 使用下拉菜单选择产品卡中的徽章位置。在左上方、右上方、左下方（默认）或右下方之间选择。9. 添加具有角半径滑动标尺的圆角。将角半径设置为 0px 会产生方形徽章边缘，而增加半径范围会舍入徽章边缘。10. 为您的徽章选择配色方案。您可以为售完的商品设置替代配色方案。11. 点击保存。

图标

图标是可添加到某些分区或块的小图片。在“模板”设置中设置图标的配色方案。

自定义图标

PC：

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 找到您要编辑的模板，然后点击自定义。

1. 点击模板设置。

2. 点击图标

3. 使用下拉菜单选择图标的默认颜色。在“主题色 1”、“主题色 2”、“轮廓”按钮或商店图标的文本颜色之间选择。

4. 点击保存。

苹果系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分，轻触在线商店。

3. 轻触管理模板。

4. 找到您要编辑的模板，然后轻触自定义。

5. 轻触编辑。

1. 点击模板设置。

2. 点击图标

3. 使用下拉菜单选择图标的默认颜色。在“主题色 1”、“主题色 2”、“轮廓”按钮或商店图标的文本颜色之间选择。

4. 点击保存。

安卓系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分，轻触在线商店。

3. 轻触管理模板。

4. 找到您要编辑的模板，然后轻触自定义。

5. 轻触编辑。

1. 点击模板设置。

2. 点击图标

3. 使用下拉菜单选择图标的默认颜色。在“主题色 1”、“主题色 2”、“轮廓”按钮或商店图标的文本颜色之间选择。

4. 点击保存。

Shopify商户官网原文详情：

Badges

Sale and Sold out badges are automatically added to your product images when the price drops, or when the inventory count reaches 0. You can adjust the position, shape, and color of your badges.

Page and Blog badges appear on relevant search results. You can customize the position and shape of these badges, but not the color.

Customize badges

PC：

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme that you want to edit, and then click Customize.

1. Click Theme settings.

2. Click Badges.

3. Use the dropdown menu to select the badge position within product cards. Choose between top left, top right, bottom left (default), or bottom right.

4. Add rounded corners with the Corner radius sliding scale. Setting the corner radius to 0px produces square badge edges, and increasing the radius rounds the edges of the badges.

5. Choose a Color scheme for your badges. You can set an alternate color scheme for sold out items.

6. Click Save.

iPhone：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme that you want to edit, and then tap Customize.

5. Tap Edit.

1. Click Theme settings.

2. Click Badges.

3. Use the dropdown menu to select the badge position within product cards. Choose between top left, top right, bottom left (default), or bottom right.

4. Add rounded corners with the Corner radius sliding scale. Setting the corner radius to 0px produces square badge edges, and increasing the radius rounds the edges of the badges.

5. Choose a Color scheme for your badges. You can set an alternate color scheme for sold out items.

6. Click Save.

Android：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme that you want to edit, and then tap Customize.

5. Tap Edit.

1. Click Theme settings.

2. Click Badges.

3. Use the dropdown menu to select the badge position within product cards. Choose between top left, top right, bottom left (default), or bottom right.

4. Add rounded corners with the Corner radius sliding scale. Setting the corner radius to 0px produces square badge edges, and increasing the radius rounds the edges of the badges.

5. Choose a Color scheme for your badges. You can set an alternate color scheme for sold out items.

6. Click Save.

Icons

Icons are small images that can be added to certain sections or blocks. Set the color scheme for your icons in Theme settings.

Customize icons

PC：

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme that you want to edit, and then click Customize.

1. Click Theme settings.

2. Click Icons

3. Use the dropdown menu to select the default color for your icons. Choose between Accent 1, Accent 2, Outline button, or text color for your store icons.

4. Click Save.

iPhone：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme that you want to edit, and then tap Customize.

5. Tap Edit.

1. Click Theme settings.

2. Click Icons

3. Use the dropdown menu to select the default color for your icons. Choose between Accent 1, Accent 2, Outline button, or text color for your store icons.

4. Click Save.

Android：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme that you want to edit, and then tap Customize.

5. Tap Edit.

1. Click Theme settings.

2. Click Icons

3. Use the dropdown menu to select the default color for your icons. Choose between Accent 1, Accent 2, Outline button, or text color for your store icons.

4. Click Save.

文章内容来源：Shopify商户官方网站

（本文内容根据网络资料整理和来自用户投稿，出于传递更多信息之目的，不代表本站其观点和立场。本站不具备任何原创保护和所有权，也不对其真实性、可靠性承担任何法律责任，特此声明！）

常见问答(FQAS)

您可以通过在模板的Liquid代码中添加带有徽章图像和文本的HTML来添加自定义徽章。例如:

要在整个店铺范围内使用自定义图标,您可以上传图标文件到Assets文件夹,然后在模板中使用{{ 'icon-name.svg' | asset_url }}标签来引用它。

您可以根据产品的属性(如标签)来条件渲染不同的徽标。例如,如果产品标签包含\"hot\",就显示热销徽标。这可以通过Liquid if / else语句实现。

是的,您可以通过CSS对徽章应用动画效果,例如滚动或闪烁。建议使用简单的动画以保持清晰简洁的用户体验。

是的,通过给徽章元素添加绝对或相对定位样式,您可以控制徽章的预期位置。位置的细微调整也可以通过top,bottom,left,right属性来实现。