【shopify】解决产品颜色信息无法显示问题

网站中有些产品颜色信息无法正确显示，如下：

错误显示例1

错误显示例2

以下步骤以Wine red(酒红色) 为例：

!!! 注:开始前请检查您负责的网站是否对彩色产品信息的显示做过调整，如果没有，请先完成这篇教程：https://www.jianshu.com/p/bc9951b7da76

• 首先询问UI获得该颜色对应的十六进制颜色码，如wine red 的颜色码为：#722326

• 然后打开shopify后台 -- 依次点击 Online Store -- Actions -- Edit Code -- 搜索并打开product-form.liquid，将目标代码放置在目标位置：

目标代码：

{%- elsif downcase_value == 'wine red'-%}

{{ value }}

目标位置：

image.png

注：请将目标代码放在if-else之间，如果你的目标位置中不存在multicolor相关代码，请先根据https://www.jianshu.com/p/bc9951b7da76这篇教程设置好彩色颜色的显示。

以上是针对wine red颜色的修改，如需增加其他颜色：
例如再需增加dark yellow，则需要修改目标代码中downcase_value后的颜色名称以及background-color后的十六进制颜色码，然后将代码添加到相同位置。
注意不要替换掉上一段代码，而是在相同位置叠加。

---

以上是产品详情页的颜色显示修改步骤，如果您负责的网站列表页也有显示产品颜色信息（如下图显示），那么请继续以后步骤的修改：

列表页展示产品颜色信息

• 然后打开shopify后台 -- 依次点击 Online Store -- Actions -- Edit Code -- 搜索并打开product-item.liquid，将目标代码放置在目标位置：

目标代码：

{%- elsif color_final_name == 'wine red'-%}

目标位置：

image.png

以上是针对wine red颜色的修改，如需增加其他颜色：
例如再需增加dark yellow，则需要修改目标代码中color_final_name后的颜色名称以及background-color后的十六进制颜色码，然后将代码添加到相同位置。
注意不要替换掉上一段代码，而是在相同位置叠加。

---

因为无法统计网站中不能显示的颜色共有哪些，所以麻烦各网站负责人及时发现及时更新。

操作中遇到困难请联系技术部同事。
有任何意见建议请联系技术部同事。