问题描述：

网站在列表页以及产品详情页展示产品颜色信息时会出现如下情况：

列表页错误展示

详情页错误展示

现在，通过以下步骤将多色的展示修改为以下样式：

更改后效果

实现步骤：

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

{%- if downcase_value == 'multicolor' -%}
<label for="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" class="ColorSwatch ColorSwatch--large data-tooltip="{{ value | escape }}" style="background-image: url(https://s3-us-west-2.amazonaws.com/image.chic-fusion.com/shopify/multicolor.png)">
    <span class="u-visually-hidden">{{ value }}</span>
</label>
{%- else -%}
<label for="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" class="ColorSwatch ColorSwatch--large {% if downcase_value == 'white' %}ColorSwatch--white{% endif %}" data-tooltip="{{ value | escape }}" style="background-color: {{ value | replace: ' ', '' | downcase }}; {% if downcase_value == 'winered' %}background-color:#722326;{% endif %}{% if color_swatch_image != blank %}background-image: url({{ color_swatch_image | img_url: '64x64' }}){% endif %}">
    <span class="u-visually-hidden">{{ value }}</span>
</label>
{%- endif -%}

目标位置：

目标位置

以上为详情页样式修改，以下为列表页样式修改：

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

{%- assign color_final_name = value | replace: ' ', '' | downcase -%}
{%- if color_final_name == 'multicolor' -%}
<label class="ColorSwatch ColorSwatch--small" for="{{ color_id }}" style="background-image: url(https://s3-us-west-2.amazonaws.com/image.chic-fusion.com/shopify/multicolor.png)" title="{{ value | escape }}" data-tooltip="{{ value | escape }}"></label>
{%- else -%}
<label class="ColorSwatch ColorSwatch--small" for="{{ color_id }}" style="background-color: {{ value | replace: ' ', '' | downcase }};{% if color_final_name == 'winered' %}background-color:#722326;{% endif %}{% if color_swatch_image != blank %}background-image: url({{ color_swatch_image | img_url: '64x64' }}){% endif %}" title="{{ value | escape }}" data-tooltip="{{ value | escape }}"></label>
{%- endif -%}

目标位置：

目标位置

以上就是全部步骤，完成后可到详情页及列表页查看效果。

一切涉及代码操作请务必谨慎。
操作中遇到困难请联系技术部同事。（我相信你自己可以的）
有任何意见建议请联系技术部同事或评论区留言。（可能不会采纳哦）
😊