大数跨境

使用元字段自定义 Shopify 产品页面

使用元字段自定义 Shopify 产品页面 电商实践
2020-01-17
0
导读:Shopify 商品详情页上的标准描述字段是一个内容单一的区块。虽然可以向该区块添加不同的部分,但这一过程并不理想。

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月底发货”);否则,显示标准消息“有货并立即发货”。

对商品详情页上的其他元字段重复上述步骤即可。

【声明】内容源于网络
0
0
电商实践
电商实践
内容 8035
粉丝 0
电商实践 电商实践
总阅读1.1k
粉丝0
内容8.0k