如何将Shopify单行文本元字段（多值）转为HTML列表？

问题原因 #

你的第二段代码无法生效，主要有两个问题：

1. 误用了metafield_tag过滤器：这个过滤器是用来渲染元字段的默认展示格式，不是拆分多值内容的工具，因此speclist变量实际是渲染后的HTML内容，不是可循环的数组。
2. 多值单行文本元字段的value是逗号分隔的字符串，不是原生数组，直接用for循环遍历字符串会导致逻辑错误。

解决思路与代码 #

正确的做法是先将逗号分隔的字符串拆分为数组，再循环生成HTML列表，同时处理掉多余的空格和空值：

{% assign selected_variant = product.selected_or_first_available_variant %}
{% if selected_variant %}
  {% assign spool_values = selected_variant.metafields.reels.spool.value | split: ',' %}
  {% if spool_values.size > 0 %}
    <ul>
      {% for value in spool_values %}
        {% assign trimmed_value = value | strip %}
        {% if trimmed_value != blank %}
          <li>{{ trimmed_value }}</li>
        {% endif %}
      {% endfor %}
    </ul>
  {% endif %}
{% endif %}

代码关键点说明 #

• 直接获取选中的变体selected_variant，避免遍历所有变体，提升代码效率
• 使用split: ','将元字段的字符串值拆分为可循环的数组
• 用strip过滤每个值前后的空格，避免输入多值时的空格干扰
• 增加空值判断，过滤掉因多值末尾带逗号产生的空条目

内容的提问来源于stack exchange，提问作者Onestop Marine