问题描述：
网站在列表页以及产品详情页展示产品颜色信息时会出现如下情况：
列表页错误展示
详情页错误展示
现在，通过以下步骤将多色的展示修改为以下样式：
更改后效果
实现步骤：
- 打开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 -%}
目标位置：
目标位置
以上就是全部步骤，完成后可到详情页及列表页查看效果。
一切涉及代码操作请务必谨慎。
操作中遇到困难请联系技术部同事。（我相信你自己可以的）
有任何意见建议请联系技术部同事或评论区留言。（可能不会采纳哦）
😊
