Shopify 自定义字段(Metafields)允许商家存储额外信息,以灵活定制产品详情页。
在 Shopify 后台添加产品十分便捷:导航至“产品”标签页创建新项目,即可添加标题、描述、价格及多个变体。
Shopify 使添加产品并包含规格和信息变得轻松易行。
这对大多数电商企业而言已足够。毕竟,产品描述字段支持文本、HTML、视频和图片等内容。但这也会带来局限性。
在 Shopify 中构建复杂的产品详情页可能具有挑战性。
标准的产品描述字段是一个庞大的内容块。虽然可以向其中添加不同部分,但这一过程并不理想。
产品自定义字段
解决这一问题的一种方法是使用自定义字段(Metafields)。
“元数据”即关于数据的数据。在 Shopify 中,自定义字段是一种用于向产品、客户和订单等对象添加信息的元数据形式。据 Shopify 官方介绍,自定义字段非常适合存储零件编号、客户头衔或博客文章摘要等专业信息。
虽然可以通过 API 代码创建和编辑 Metafields,但也有现成的应用可供选择,例如:
- Metafields Manager
- Metafields Guru
- Metafields Custom Field Editor
- Metafields Editor
自定义字段的应用场景
以下通过一个实例,说明商家如何利用自定义字段为产品详情页添加个性化信息。
本例基于一个站点迁移项目中的 Shopify 主题,目标是将现有的 WordPress 主题复制并替换为 Shopify 版本。
新的 Shopify 主题使用了 Metafields Manager 应用(本文部分细节仅适用于该应用)。
原始 WordPress 主题在产品详情页上包含多个区块(如图片和视频),以及三个额外区域:第二张图片区、购物车按钮下方的运输信息区,以及规格参数列表。这些额外区域很难通过标准的 Shopify 产品字段直接添加。
在标准的 Shopify 产品详情页中,添加额外照片、配送信息和规格等区块可能会很困难。下箭头左侧的消息显示:“将于 2020 年 2 月底发货。”
商家需要一种方法,在不使描述字段过载的情况下整合这些信息。我们将从额外的配送信息开始。
Metafields Manager App 配置
首先安装 Metafields Manager 应用以启动流程。
使用 Metafields Manager 应用或类似工具添加全局元字段(metafields)。
接下来,进入已安装的应用,点击“Edit your Metafield Configuration”链接创建产品元字段。添加全局元字段后,网站上的每个产品都将包含该字段。
在本示例中,我添加了一个名为“shipping_message”的全局产品元字段。
shipping_message元字段被设置为字符串类型,意味着它将是文本。
随后,导航至管理面板的“产品”页面。在页面顶部找到“More actions”下拉菜单。
使用“More actions”下拉菜单访问此特定应用的元字段。
在菜单中选择“Add Metafields to Product”。生成的页面将显示当前产品可用的所有全局元字段。对于本例,“shipping_message”位于列表底部。由于这是预售商品,我为其添加了自定义消息“SHIPS AT THE END OF FEBRUARY 2020”。
列表底部的“shipping_message”元字段包含一条自定义消息:“SHIPS AT THE END OF FEBRUARY 2020.”
编辑主题代码
Shopify 的模板语言 Liquid 允许开发人员轻松地向主题添加变量或控制结构。
为了显示配送消息,需导航至产品详情页对应的主题文件,并插入以下 Liquid 代码:
{{ product.metafields["global"]["shipping_message"] }}
花括号表示 Liquid 语句的开始或结束。product 指代产品对象,metafields 则是该对象的属性。
这段代码会在顾客访问页面时显示对应的配送消息。该消息独立于标准产品描述,若无元字段则难以实现。
配送消息显示在产品详情页上。它独立于标准产品描述。
对于此主题,运输消息仅在预售状态下适用。当有库存时,应显示“有货且立即发货”。
以下是管理该消息显示的 Liquid 代码:
<div class="ships_description text-center">
<img src="{{'truck.png' | asset_url }}">
{% if current.inventory_quantity <= 0 %}
<span>{{ product.metafields["global"]["shipping_message"] }}</span>
{% else %}
<span>IN STOCK & SHIPS IMMEDIATELY</span>
{% endif %}
</div>
该代码会检查库存数量是否为零或更少。若是,则显示元字段消息(如“2020年2月底发货”);否则,显示标准消息“有货并立即发货”。
对商品详情页上的其他元字段重复上述步骤即可。

