如何在 Shopify 中根据产品标签添加自定义徽章

通过自定义徽章提升 Shopify 店铺的产品可见度

在 Shopify 店铺中吸引顾客关注特定产品的一个有效方式，是添加自定义徽章，例如“促销”“新品”“畅销”“网页独家”等，用来突出产品的独特属性。

虽然这个功能可以显著提升产品展示效果并提高转化率，但如果要手动实现，确实需要一定的编码基础。不过，如果你不想编辑主题代码，也可以通过 Shopify 应用找到无需代码的替代方案。

尽管不同店铺的具体代码可能不完全相同，但所有 Shopify 店铺在通过 Liquid（Shopify 的模板语言）加入自定义徽章时，都遵循一套标准化结构。

本指南将为你提供循序渐进的操作步骤，帮助你理解并完成定制，以满足你店铺的具体需求——无论你使用的是经典主题，还是现代的 Online Store 2.0 架构。

理解标准结构

为产品添加自定义徽章的第一步，是理解支撑该功能的标准结构。

在使用产品标签与 Liquid 条件语句实现自定义徽章时，每个 Shopify 店铺基本都遵循类似的实现蓝图。熟悉这套结构能为你后续修改提供扎实基础。

现代 Shopify 主题（Online Store 2.0）也可能支持使用 metafields 来实现徽章，这种方式更灵活，也不一定需要修改主题代码。不过，本指南介绍的基于标签的方法依然可靠且应用广泛，并且适用于所有主题版本。

分步操作指南

要把自定义徽章成功集成到产品列表中，你需要调整主题的 Liquid 文件。具体文件名会因主题而异，但常见的包括“card-product.liquid”“product-grid-item.liquid”或“product-card.liquid”。

这些文件决定了产品信息在集合页、搜索结果以及精选产品模块中的展示方式。通过修改这些文件，你可以让自定义徽章根据产品所分配的标签，醒目地显示在对应产品旁边。

在进行任何修改之前，强烈建议先复制当前主题作为备份。这样你就能在不影响线上店铺的情况下安全测试改动；如果效果不符合预期，也可以随时恢复到原始版本。

在 Shopify 中基于产品标签添加自定义徽章

最常见的做法，是在主题的产品卡片文件中找到徽章的显示逻辑。根据你的主题，查找类似 card-product.liquid、product-grid-item.liquid 或 snippets/product-card.liquid 这样的文件。

找到对应文件后，寻找类似下面这样的代码：

{% if on_sale and settings.collections_show_sale_circle %}

  <span class="badge badge--sale">

    <span class="badge__text">{{ 'products.product.sale' | t }}</span>

  </span>

{% endif %}

请注意，你的主题中代码可能会有所不同，但整体结构会类似：包含条件判断以及徽章样式相关的标记。

接着，找到 if 或条件语句，并使用 elsif 扩展它，以加入你的自定义徽章条件：

{% if on_sale and settings.collections_show_sale_circle %}

   ...(your existing code)

{% elsif product.tags contains 'Web Exclusive'%}

  <span class="badge badge--sale">

    <span class="badge__text">Web Exclusive</span>

  </span>

{% elsif product.tags contains 'Best Seller'%}

  <span class="badge badge--bestseller">

    <span class="badge__text">Best Seller</span>

  </span>

{% endif %}

你可以为不同类型的徽章添加多个 elsif 语句。只要确保代码里引用的产品标签与 Shopify 后台为产品设置的标签完全一致（contains 运算符区分大小写）。

如果你对自己的编码能力不太确定，建议先为店铺复制一个主题，并在复制主题中测试这些改动，再应用到线上主题。这是最佳实践，能避免潜在的展示问题影响你的顾客。

在 Split 中添加自定义徽章

如果你使用的是 Split 主题，可以通过主题编辑器添加自定义徽章。找到 /snippets/product_badges.liquid，然后将文件内容替换为：

{% unless product.available %}

  <div class="product-badge sold"><span>{{ 'product.sold_out' | t }}</span></div>

{% else %}

  {% if product.compare_at_price > product.price %}

    <div class="product-badge sale"><span>{{ 'product.on_sale' | t }}</span></div>

  {% elsif product.tags contains 'preorder' %}

    <div class="product-badge preorder"><span>Pre Order</span></div>

  {% elsif product.tags contains 'new' %}

    <div class="product-badge new"><span>New</span></div>

  {% endif %}

{% endunless %}

根据你的店铺需求修改徽章文案与标签名称，然后保存编辑。别忘了也要在 Shopify 后台为产品添加对应标签，徽章才会显示出来。

总之，在 Shopify 店铺的产品列表中添加自定义徽章，是突出特别促销、独家商品或其他独特卖点的强大方式，能够让某些产品更出众，并提升转化。

虽然使用 Liquid 与产品标签实现该功能需要一定的编码知识，但只要理解标准化结构并按步骤操作，你就能根据店铺的具体需求定制徽章。对于不想写代码的人来说，也有许多 Shopify 应用可用，它们提供友好的界面，让你无需改动主题文件就能创建与管理徽章。

无论你是在做促销、展示网页独家商品，还是突出畅销款，这些徽章都能强化产品呈现、吸引线上购物者的注意力，最终带来更多销量并改善客户体验。