Shopify 商店上的色样显示问题：图像集成

Question

我的 Shopify 商店中有一个颜色元字段，其中插入特定颜色应同时反映在网站和电话设备上。每个颜色样本都与对应于插入颜色元字段中的标题的图像图块相关联。我面临的问题是，名为“multi”的多色图像在网站上正确显示，但在手机上显示为空白。我无法确定可能导致这种差异的原因。为了清楚起见，我添加了两张图片和一段相关代码（如下所示）。非常感谢为解决此问题提供的任何帮助。谢谢你。

{%- comment -%}
  Extract a style from the color swatch config. You must passed two parameters to this snippet:

  - color_swatch_config: extracted from the theme settings
  - value: the actual color
{%- endcomment -%}

{%- assign color_value_downcase = value | downcase -%}
{%- assign color_swatch_style = 'background-color: ' | append: color_value_downcase -%}

{%- for color_swatch_item in color_swatch_config -%}
  {%- assign color_swatch_parts = color_swatch_item | split: ':' -%}
  {%- assign color_swatch_name = color_swatch_parts.first | downcase | strip -%}

  {%- if color_value_downcase == color_swatch_name -%}
    {%- assign color_swatch_value = color_swatch_parts.last | strip -%}

    {%- if color_swatch_value contains '#' -%}
      {%- assign color_swatch_style = 'background-color: ' | append: color_swatch_value -%}
    {%- elsif images[color_swatch_value] != blank -%}
      {%- assign color_swatch_image = images[color_swatch_value] | img_url: '72x72' -%}
      {%- assign color_swatch_style = 'background-image: url(' | append: color_swatch_image | append: ')' -%}
    {%- endif -%}

    {%- break -%}
  {%- endif -%}
{%- endfor -%}

{{- color_swatch_style -}}

Answer 1

只需将此 CSS 添加到样式表的末尾即可：

.ColorSwatchList .u-visually-hidden {
    position: relative !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 38px;
    width: 55px;
    margin-top: 25px;
    padding: 0;
    border: 0;
    display: block;
}