第 215 期 Shopify 元对象使用示例 设置动态免邮提醒

点击这里查看 带字幕 视频教程    通过 YouTube 观看

我发现很多做 Shopify 的同学对于元字段比较容易理解,却不知道如何使用元对象。

其实在之前已经发布过不止一期教程来演示 Shopify 元对象的使用场景,你按 Ctrl + K 或者 ⌘ + K 之后输入元对象进行搜索即可找到。

本期教程将要分享的主题是:通过元对象来自定义设置 Shopify 弹窗购物车动态免邮提醒(自定义达到多少金额免邮,以及文字背景色)。

需求背景

之前已经发布过:Shopify 购物车动态免邮提醒功能,支持自定义门槛,跟随商品数量变化更新文字提示内容

但有同学反馈希望采用进度条的方式进行展示。之前的版本是通过 JavaScript API 实现的,实际上比本期要分享的方法更复杂。

更高级的版本

最新 Shopify 增强版主题 中已经替换成了带动画的进度条,查看预览效果

Shopify 弹窗购物车动态免邮提醒是增强版主题五十几项实用功能中的一项,具体可以查看功能介绍页面:

Shopify 增强版主题 适用于所有官方推出的 2.0 主题 额外添加五十几项功能
Shopify 店铺用什么主题比较好?哪款主题更好用?本页面介绍 Shopify 增强版主题包含的几十项功能。Shopify增强版主题,添加五十几项功能,支持一键开启或关闭。适用于所有 Shopify 推出的 2.0 版主题,减少插件安装,降低每个月的插件订阅费。查看介绍并购买增强版主题。

教程开始

除了实现 Shopify 主题弹窗购物车动态免邮提醒功能,本期还会额外讲解 Shopify 元对象的创建和使用,以便观众进一步理解元对象。

一、创建元对象

提示:请对照视频直接复制以下内容跟着操作,差一个字母或者符号都可能会无法正常工作。

在 Shopify 店铺后台左侧边栏 ~ 内容 ~ 元对象 ~ 添加定义

名称:

Free Shipping

添加两个字段,第一个选择 “整数”,名称:

amount

参考截图:

第二个字段选择 “颜色”,名称:

color

完整参考截图:

二、设置元对象

参考视频演示,将元对象 handle 设置为:

pengpeng

三、代码添加

在 Snippets ~ cart-drawer.liquid 中搜索:

<cart-drawer-items

在其上方添加:

{% if cart.total_price != 0 %}
        {% render "pengpeng-jindutiao" %}
      {% endif %}

创建 Snippet

pengpeng-jindutiao.liquid