自定义多属性颜色色块

准备工作

在正式进入配置步骤前，首先需要您掌握什么是 HEX 色码。

HEX 色码

HEX 色码是以十六进制来表示不同颜色的一种方式。

我们日常使用的进制均为十进制，即 0 - 9 为个位，从第 10 开始进一位。而十六进制则是从第 16 位开始进位，由英文字母 A - F 代表第 10 - 15 位。

例如 #FF0000 代表纯红色，其中开头的 FF 代表 RGB 中的红色部分，且浓度最大；中间的 00 代表 RGB 中的绿色部分，浓度最浅；末尾的 00 代表 RGB 中的蓝色部分，浓度也是最浅。

您可以通过在线工具将 RGB 颜色转换为 HEX 色码

添加产品颜色选项

了解了 HEX 色码后，还需要您在管理后台中为产品添加自定义颜色：

在 Shopify 后台中，转至产品
点击要编辑的产品
在多属性部分，点击 + 添加尺寸或颜色等选项
在选项名称字段中，输入选项的名称，例如 Mocha
点击保存

保存后，新颜色对应的产品库存是空的，因此还需要手动修改库存，否则顾客将无法下单购买

组合 HEX 色码和颜色选项

拿以上例子来说，我们为某产品添加了一个 Cashmere rose 颜色，如果该颜色的 HEX 色码需要显示为藕色，那最终代码就是 cashmere rose:#E4DFDF.

如果该产品拥有多个颜色，我们也可以将它们组合起来，变成 cashmere rose:#E4DFDF,#BC987F.

当然，一件产品往往有很多变体颜色选项，但无论有多少种配色，只需将每一个变体颜色单独占据一行即可，例如：

mocha:#E2857D
cappuccino:#A06140
cashmere rose:#E4DFDF,#BC987F
denim:#516F89,#A8BDCF
gummy:#EDB9B6,#EEB380,#AAC1D2,#C67F7E
off white:#E4DFD7,#1C1A1F,#BC9F88
south america:#E49644,#C4A48C,#D2B5B0,#A5B5CA

配置方法

在完成准备工作后，我们就可以开始编辑自定义色块了：

在 Shopify 后台中，转至在线商店 > 模板
找到 Zalify Theme 模板，然后点击自定义
点击齿轮图标以访问模板设置
在色板区域中，填入整理好的颜色代码
点击保存

文字颜色指主题色联动时的字体颜色，避免文字和背景颜色接近从而不可见的问题

主题联动

该教程不适用于 Zalify Theme v2

该功能默认开启，若您不喜欢，可通过以下步骤关闭：

在 Shopify 后台中，转至在线商店 > 模板
找到 Zalify Theme 模板，然后点击自定义
从模板下拉菜单中选择要编辑的产品模板
选择产品页面分区
选择变体选择器块
取消勾选启用动态主题色
点击保存