Porto Shopify主题4.0.3产品页添加Metafields技术求助

以下是几种可行的解决方法，帮你在产品页的'Specs'标签页展示Metafields内容：

方法1：直接编辑主题代码修改产品模板 #

Porto主题的产品标签相关代码通常存放在sections或templates目录下（比如product-template.liquid、product-tabs.liquid），操作步骤如下：

• 进入Shopify后台的主题编辑界面，找到对应产品标签的代码块
• 如果主题没有默认的'Specs'标签，先参考现有标签的HTML结构复制修改，添加新的标签项
• 在'Specs'标签的内容区域插入Metafields的Liquid代码，示例：

{% if product.metafields.custom.top_material != blank %}
  <div class="spec-row">
    <span class="spec-label">Top Material:</span>
    <span class="spec-value">{{ product.metafields.custom.top_material.value }}</span>
  </div>
{% endif %}
{% if product.metafields.custom.pickup_configuration != blank %}
  <div class="spec-row">
    <span class="spec-label">Pickup Configuration:</span>
    <span class="spec-value">{{ product.metafields.custom.pickup_configuration.value }}</span>
  </div>
{% endif %}
{% if product.metafields.custom.string_type != blank %}
  <div class="spec-row">
    <span class="spec-label">String Type:</span>
    <span class="spec-value">{{ product.metafields.custom.string_type.value }}</span>
  </div>
{% endif %}

• 注意替换custom为你的Metafields命名空间（若使用其他命名空间需对应修改），键名要和你设置的Metafield完全匹配
• 可添加自定义CSS样式优化规格项的展示效果，保存代码后刷新产品页查看结果

方法2：利用主题动态源功能插入Metafields #

部分主题的自定义HTML编辑器支持通过动态源插入Metafields，无需手写Liquid：

• 打开产品页的'Tab Custom HTML'设置框
• 找到编辑器中的动态源按钮（通常为{ }样式图标）
• 从动态源列表中选择对应Metafields（如'Top Material'、'Pickup Configuration'），插入到HTML结构中
• 用HTML标签排版内容，示例：

<div class="product-specs">
  <div class="spec-item">
    <strong>Top Material:</strong> [动态源插入的Top Material值]
  </div>
  <div class="spec-item">
    <strong>Pickup Configuration:</strong> [动态源插入的Pickup Configuration值]
  </div>
  <div class="spec-item">
    <strong>String Type:</strong> [动态源插入的String Type值]
  </div>
</div>

• 保存设置后测试产品页展示效果

方法3：创建自定义产品模板 #

若不想修改默认模板，可新建自定义模板单独应用：

• 在主题编辑页面点击「添加新模板」，选择产品模板，命名为product.specs.liquid
• 复制默认产品模板的代码到新模板中，按照方法1的步骤添加'Specs'标签和Metafields代码
• 进入产品管理页面，给需要展示规格的产品选择该自定义模板
• 保存后查看产品页效果

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