使用 Shopify Metafields 优化化妆品成分列表的显示方式

前言：化妆品电商中成分列表展示的重要性

由于化妆品可能对皮肤产生影响或引发过敏反应，消费者在购买前了解成分信息，是建立信任的关键。在线销售场景下，因无法看到包装标签，网页上成分列表的准确性与展示方式将直接影响销量与回购率。

1. 主要国家的化妆品成分标示规定

• 美国（FDA）：要求按含量从高到低的顺序标示成分名称在包装上。eCFR
• 欧盟：必须使用 INCI 名称进行“全成分标示（Full Ingredient Listing）”。在线销售时也需依各国指南在网页上公开完整成分。
• 日本：依据《药机法》强制进行全成分标示。日本化妆品工业联合会建议同时标注 INCI（国际化妆品成分命名）名称。cosmetic-ingredients.orgbloom-jp.com

2. 什么是 Shopify Metafields

Shopify Metafields 是一种可在商品、系列、客户等资源中添加自定义数据的功能。在化妆品电商中，我们可利用 Metafields 来管理“成分列表”“过敏原提示”等标准字段中没有的信息，并灵活地显示于主题模板上。shopify.devShopify 帮助中心

3. 定义成分列表用 Metafield 的步骤（示例）

1. 进入 Shopify 后台 → 设置 → 自定义数据 → 产品 → 点击“添加定义”
2. 名称：成分，命名空间与键：custom.ingredients，类型选择“单行文本（值列表）”
3. 如有需要，可设定验证规则（如字符数限制），然后点击保存
4. 前往各商品详情页的“元字段”区域，输入该商品的成分列表

4. 在商店中显示

4-A. 使用主题特有区块的方式

1. 进入 Shopify 后台 → 在线商店 → 自定义 → 产品 → 默认产品 → 在“产品信息”中添加“可折叠行”区块
2. 标题设为：成分
3. 点击“行内容”右侧的“连接动态源”图标 → 模板“产品” → 成分
4. 点击保存

4-B. 使用自定义 Liquid 的方式

1. 进入 Shopify 后台 → 在线商店 → 自定义 → 产品 → 默认产品 → 在“产品信息”中添加“自定义 Liquid”区块
2. 复制并粘贴以下代码

{% if product.metafields.custom.ingredients != blank %}
  <section class="product-ingredients">
    <h2>成分</h2>
    <ul>
      {% for ingredient in product.metafields.custom.ingredients.value %}
        <li>{{ ingredient }}</li>
      {% endfor %}
    </ul>
  </section>
{% endif %}

提示：

• custom.ingredients 是定义 Metafield 时设置的命名空间与键
• 可根据需要使用 CSS 进行样式调整
• 可添加 Schema.org 的 PropertyValueList 标记来增强 SEO 效果

5. UI 最佳实践

• 折叠展示：对较长的成分列表使用折叠（Accordion）展示，可提升页面可读性
• 移动端优化：确保点击区域与字体大小适合触屏操作
• 无障碍支持：设置 aria-label 和替代文本，以兼容屏幕阅读器

总结

通过 Shopify Metafields 管理化妆品成分列表，不仅可确保法规合规，还能提升用户信任度。建议参考上述步骤，将此机制整合进店铺主题中，以实现 SEO 与用户体验的双重优化。