You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Shopify中如何实现单个产品标签名称的显示?

实现Shopify单个产品标签名称的显示

嘿,我明白你现在需要从之前的集合全标签统计展示切换到单个产品的标签显示,这其实比你之前的代码简单不少——毕竟不需要跨产品做统计啦!下面分两种最常见的场景给你具体实现方案:

1. 在产品详情页显示当前产品的标签

如果是在产品详情模板(比如product.liquid或者对应的section文件)里,直接调用当前产品的tags属性循环输出即可:

{% if product.tags.size > 0 %}
  <div class="product-tags">
    <strong>产品标签:</strong>
    {% for tag in product.tags %}
      <!-- 可选择添加跳转链接到对应标签的集合页 -->
      <a href="/collections/all/{{ tag | handleize }}" class="tag-link">
        {{ tag }}
      </a>
      <!-- 给标签之间加分隔符,最后一个标签不加 -->
      {% unless forloop.last %}, {% endunless %}
    {% endfor %}
  </div>
{% endif %}

这段代码会先判断产品是否有标签,有标签的话就逐个输出,还贴心加了标签间的逗号分隔,同时给每个标签加了跳转链接(点击后能看到所有带该标签的产品)。

2. 在集合页面的产品列表中显示单个产品的标签

如果你是在集合页面(比如collection.liquid)的产品循环里,要给每个产品卡片加上它自己的标签,只需要在产品循环内部嵌套标签循环即可:

{% for product in collection.products %}
  <div class="product-card">
    <!-- 这里放产品的图片、标题、价格等信息 -->
    <h3>{{ product.title }}</h3>
    <span class="price">{{ product.price | money }}</span>

    <!-- 单个产品的标签展示 -->
    {% if product.tags.size > 0 %}
      <div class="product-card-tags">
        {% for tag in product.tags %}
          <span class="tag-badge">{{ tag }}</span>
        {% endfor %}
      </div>
    {% endif %}
  </div>
{% endfor %}

这里的核心逻辑是:每个product对象都自带tags数组属性,直接遍历这个数组就能拿到当前产品的所有标签,不需要像之前那样嵌套循环整个集合的产品来统计。

和你原有代码的区别

你之前的代码是先获取集合的所有标签,再逐个统计每个标签下的产品数量——这是面向集合标签筛选的逻辑;而单个产品标签的显示是直接面向product对象的属性读取,逻辑更直接,性能也更好。

内容的提问来源于stack exchange,提问作者user9437856

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.22 08:03:48