自定义变体颜色色块

准备工作

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

HEX 色码

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

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

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

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

添加产品颜色选项

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

在 Shopify admin 的左侧导航栏中找到 产品
进入您要编辑的产品，在 多属性 选项卡点击 添加其它选项
选择 颜色, 在 选项值 中输入该颜色的正式命名，例如 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 admin 中进入您想要编辑的 Zalify 主题模板
在编辑模式中，进入 模板设置 板块，找到 色板
找到 文字颜色 和 背景色
将整理好的颜色代码输入即可

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

主题联动

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

在编辑模式中，进入产品详情页，选择 产品页面 分区
找到该分区中的 变体选择器 区块，在编辑面板中将 启用动态主题色 选项取消勾选即可

更新于： 14/07/2023