如何在不使用应用程序的情况下添加 Shopify 产品徽章（2026 年指南）

想让您的 Shopify 产品通过醒目的自定义标签脱颖而出吗？那么本指南正适合您。“促销”、“新品”或“畅销品”等徽章可以帮助产品快速获得关注。您无需任何应用程序即可实现这一点。惊讶吗？在本文中，您将学习如何在不使用应用程序的情况下使用 Shopify 产品徽章。 Shopify 的元字段和简单主题代码.

即使您不懂编程，本分步指南也能帮您轻松上手。您还将学习如何在 Shopify 中添加徽章，并直接在管理面板中控制文本和颜色。最终，您将拥有色彩鲜艳、外观简洁、加载速度快的专业徽章。准备好改造您的 Shopify 商店了吗？那就让我们开始吧！ 

概括

• 您可以使用元字段和一小段代码，无需任何应用程序即可在 Shopify 中添加产品徽章。
• 徽章的文字、颜色和样式可以直接在 Shopify 管理后台进行控制。
• 徽章有助于突出显示促销商品、新品、畅销商品和限量库存商品。
• 简单的 CSS 即可让您在产品和系列页面上定位和设计徽章。
• DiscountRay 提供高级智能徽章，满足您对自动化和动态规则的需求。

为什么要添加徽章

徽章可以帮助顾客关注关键产品。它们会突出显示新品、热门商品或特价商品。
它们引导购物者并增加点击量。

例子： 

• “销售”徽章显示折扣和优惠。
  
• “畅销书”徽章可以建立信任并显示受欢迎程度。
  
• “新品”徽章告诉你什么是新品。
  
• “限量库存”徽章营造出紧迫感。
  

如果你卖服装，可以在新商品上添加“新品”标识。这样顾客就能一眼认出它们。

添加 Shopify 自定义徽章可以提升商店外观并节省成本。您无需额外的应用程序或脚本。这是在 Shopify 产品中添加徽章的最佳方法之一，同时保持操作简便。

即将推出……

您将学习：

• 将徽章添加到产品和系列页面
  
• 从 Shopify 管理员控制徽章文本和颜色
  
• 创建 Shopify 店主喜爱的自定义产品徽章
  
• 添加促销、畅销书或限量版等标签
  
• 无需应用程序即可使用 Shopify 产品徽章，节省资金并保持快速
  

在下一部分中，我们将逐步指导您如何使用简单的代码添加自定义徽章。如果您不熟悉，也不用担心。这些说明简单易懂，您只需复制粘贴即可获得所需的输出。 

无需应用程序即可创建 Shopify 产品徽章的步骤

步骤 1 – 创建元字段

元字段存储额外的产品详细信息。
您将创建三个：一个用于徽章文本，一个用于背景颜色，一个用于文本颜色。

步骤：

1. 在 Shopify 管理员中，转到 设置 → 自定义数据（元字段） → 产品

2. 点击 添加定义 并创建
   

• 徽章文字 – 单行文本，例如“销售”
  
• 徽章背景颜色 – 单行文本，例如， #FF0000
  
• 徽章文字颜色 – 单行文本，例如， #FFFFFF
  

3. 点击 节省
   

现在编辑任何产品并滚动到 元字段。您将看到三个准备填充的框。

例子：

如果产品是夏装，请填写

• 徽章文字→销售
  
• 背景颜色 → #FF0000
  
• 文字颜色 → #FFFFFF
  

保存。

Shopify 现在将在该产品上显示红色的销售徽章。

这就是无需应用程序的 Shopify 产品徽章的工作方式。

第 2 步 - 添加代码片段

这一步很简单，只需粘贴一段代码即可。

1. 前往 网上商店 → 主题

2. 点击 行动 → 编辑代码
   
3. 在下面 片段， 点击 添加新的代码片段
   
4. 命名 产品徽章
   
5. 粘贴此代码
   

{% 如果 product.metafields.custom.badge_text != 空白 %}

  <div class=”custom-badge” 

       样式=”背景颜色：{{product.metafields.custom.badge_background_color}}; 

              颜色：{{product.metafields.custom.badge_text_color}};”>

    {{product.metafields.custom.badge_text}}

  </div>

{% 结束 %}

代码截图： 

保存。

此代码检查产品是否有徽章文本。如果有，则自动显示徽章。

例子：

如果您将“Sale”添加到元字段，此代码就会显示它。您只需复制并粘贴即可。很简单，对吧？ 

这适用于 Shopify 销售徽章、“新品上架”或任何您想要的文字。这是无需应用程序即可使用 Shopify 产品徽章的最简洁方法之一。

步骤 3 – 展示徽章

现在告诉 Shopify 在哪里显示徽章。

1. 打开 产品卡.liquid （或类似）
   

• 搜索“卡”或“产品”
  

2. 找到产品图片区域，标记为 <img> 或者 产品卡图片
   
3. 将此行粘贴到您想要徽章的位置
   

{% 渲染“产品徽章”%}

代码截图： 

节省。

然后打开 产品模板.liquid 并将同一行粘贴到产品页面上您希望徽章出现的位置。

例子：

将其粘贴到图片上方，即可在图片上直接显示“新品”。保存并刷新。

提示：

编辑前请复制您的主题。这样，如有需要，您可以轻松恢复。

此设置可帮助您快速将徽章添加到 Shopify 产品，并适用于任何主题。

步骤 4 – 徽章样式

现在您将设计徽章的外观。

打开 CSS 文件 (基础.css 或者 主题.css).
滚动到底部并添加此代码。

.自定义徽章{

  位置：绝对；

  顶部：10px；

  左：10px；

  填充：5px 10px；

  字体粗细：粗体；

  字体大小：14px；

  边框半径：5px；

  z 索引：10；

  空白：现在换行；

}

代码截图： 

节省。

您的徽章现在出现在每个产品图片的左上角。

例子：

现在，每个产品上都会清晰显示带有白色文字的红色 Shopify 销售徽章。您可以通过更改顶部或左侧的数字来调整其位置。

这就是您无需使用应用程序即可设计 Shopify 产品徽章的方法。您甚至无需修改主布局。

步骤 5 – 添加徽章详细信息

现在是时候申请你的徽章了。

1. 在 Shopify 管理员中，打开 产品

2. 选择类似“冬季夹克”的产品
   
3. 滚动到 元字段
   
4. 填写
   
   • 徽章文字 → 畅销书
     
   • 背景 #FFD700
     
   • 文字颜色 → #000000
     
5. 节省
   

刷新您的商店。您将看到金色的“畅销书”徽章。

您刚刚创建了一个自定义产品徽章 Shopify 设置，它无需外部工具即可完美运行。

可选 - 使用标签

您还可以使用标签而不是元字段来创建徽章。

为您的产品添加一个名为“sale”的标签。然后将此代码粘贴到与之前相同的位置。

{% 如果 product.tags 包含“sale” %}

  <div class="”custom-badge”">销售</div>

{% 结束 %}

代码截图： 

现在对其进行造型。

.自定义徽章{

  背景颜色：#FF0000；

  颜色：#FFFFFF；

}

代码截图： 

例子：

带有“促销”标签的产品现在会显示红色的“促销”标记。移除标签后，标记就会消失。

这种手动设置 Shopify 徽章的方法速度更快，但灵活性较差。与 Shopify 徽章不同，您无法更改每个产品的颜色，除非使用元字段的应用程序。

在下一部分中，我们列出了一些常见的修复方法，以帮助您最大限度地减少错误。让我们来看看。 

常见修复

如果徽章看起来不正确，请检查这些。

徽章丢失

确保元字段名称完全匹配（例如 徽章文本).

徽章位置

更改 CSS 中的顶部和左侧值。

颜色不显示

使用 # 在颜色代码之前。

经过一些小的修复后，没有应用程序的 Shopify 产品徽章应该可以正确显示。

奖励 – 使用 DiscountRay 添加智能徽章

您可以使用 Shopify 徽章进一步实现这一点 折扣雷无需任何编码。只需点击两下，您的自定义徽章即可制作完成。  

例子： 

• 买 2 件立减 15%
  
• VIP 免运费
  
• 独家B2B交易

• 周五促销

这里有一份详细的指南，介绍如何使用此指南进一步定制您的优惠 个性化折扣 应用程序。

最后的想法

现在您已经了解了如何在没有应用程序的情况下创建 Shopify 产品徽章。您无需编写代码或安装任何东西。

你

• 为文本和颜色创建元字段
  
• 添加了一小段代码
  
• 在产品和系列上放置徽章
  
• 使用 CSS 进行样式设置
  
• 学习了标签方法
  
• 了解 DiscountRay 如何添加 Shopify 动态徽章

您的商店现在看起来更简洁、更快捷。不妨从小事做起。添加一个徽章并进行测试。一个小徽章就能极大地改变顾客对您商品的印象。希望这篇文章对您有所帮助。分享给其他想要改进 Shopify 商店的 Shopify 商家。如需更多专家建议，请查看我们的其他电商博客。 

常见问题解答