如何使用Shopify Liquid动态修改CSS属性匹配商品标签颜色

你的条件判断未生效的核心原因：Shopify Liquid 语法中 product.tags 返回值是存储商品所有标签的数组，而非单个字符串，直接用 == 和单个标签值做全等判断永远不会返回true，因此你写的条件内的CSS样式块根本不会被渲染到页面上。

单标签场景快速修复 #

针对你当前测试Oberstdorf标签的需求，把全等判断改为用contains关键字检测数组内是否包含目标标签即可：

{% if product.tags contains 'Oberstdorf' %}
<style>
.product-tag > a {
  color: red;
  /* 后续匹配silver标签改银色时，直接替换为color: silver;即可 */
}
</style>
{% endif %}

<div class="product-tag"><a href="{{ product.url }}">{{ product.tags | join: ', ' }}</a></div>

注意：直接输出{{ product.tags }}会默认将数组以空格拼接为字符串，多个标签时显示混乱，建议加上join: ', '过滤器，用逗号分隔多个标签，展示更规范。

多标签配色可扩展方案 #

如果你后续要实现silver标签显银色、gold标签显金色这类多标签对应不同颜色的需求，不用重复写多个if判断，直接通过遍历标签生成对应类名的方式实现，后续维护更简单：

<div class="product-tag">
  {% for tag in product.tags %}
  <a href="{{ product.url }}" class="product-tag-link tag--{{ tag | handleize }}">{{ tag }}</a>
  {% endfor %}
</div>

<style>
/* 统一配置标签对应颜色规则即可 */
.tag--silver { color: #c0c0c0; }
.tag--gold { color: #ffd700; }
.tag--oberstdorf { color: red; }
</style>

• 代码中使用的handleize过滤器会自动把标签名转换为合法CSS类名格式，大写字母转小写、空格转连字符，避免特殊字符导致类名失效
• 多标签场景下每个标签会独立渲染，自动匹配对应颜色样式，不会互相干扰

内容的提问来源于stack exchange，提问作者Stefan Tuaev