如何在前端主题展示通过metafield「File reference」上传的文件？求示例

前提说明 #

确保你已在Shopify后台创建了File reference类型的metafield，记下它的「命名空间」和「键」（比如命名空间custom，键product_manual）。

示例1：添加PDF下载链接 #

在产品模板（如product.liquid或对应的section文件）中插入以下代码，会生成一个可下载的PDF链接：

{% if product.metafields.custom.product_manual %}
  <div class="pdf-download-block">
    <a href="{{ product.metafields.custom.product_manual | file_url }}" target="_blank" download>
      下载产品手册（PDF）
    </a>
  </div>
{% endif %}

示例2：嵌入PDF到页面中 #

如果想让用户直接在页面内查看PDF，用iframe嵌入：

{% if product.metafields.custom.product_manual %}
  <div class="pdf-embed-container">
    <iframe 
      src="{{ product.metafields.custom.product_manual | file_url }}" 
      width="100%" 
      height="600px"
      title="产品手册预览">
    </iframe>
  </div>
{% endif %}

注意事项 #

• 替换代码中的custom.product_manual为你实际创建的metafield「命名空间.键」
• file_url是Shopify内置Liquid过滤器，用于获取文件的公开访问链接
• 可以根据主题样式自定义HTML的class名称、按钮样式或iframe尺寸
• 如果是在页面模板（如page.liquid）中使用，将product替换为page即可

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