在收藏页面上显示色样（非文本）Shopify

我有下面的代码-它在文本中显示变体，它有一个彩色背景，并链接到变体。我希望它是color.png“.png”，但它不会工作

如您所见，“”之间的代码似乎不起作用。它显示了一个16px x 16px格式的空白.png。我已经在shopify的文件部分上传了正确的颜色，比如red.png、black.png等，但是它不会显示出来。（是的，从技术上讲，它位于错误的位置，用于测试）

{product.options%中的选项为%s}
{%if选项=='颜色'%}
{%assign index=forloop.index0%}
{%assign colorlist=''%}
{%assign color=''%}
{product.variants%中的变量为%0}
{%capture color%}
{{variant.options[index]}
{%endcapture%}
{%除非颜色列表包含颜色%}
{%if variant.available%}

{%else%}
{{color | downcase}
{%endif%}
{%capture templast%}
{{colorlist | append:color | append:“}”
{%endcapture%}
{%assign colorlist=templast%}
{%end除非%}
{%endfor%}
{%endif%}
{%endfor%}

需要进行哪些更改才能按照我想要的方式正确工作

我非常希望它能像这样工作：

---

（这段代码不起作用，但我在堆栈上找到了类似的代码：）

你说你在shopify的“文件”部分上传了PNG文件。
这是一个问题。
如果您使用的是asset_url筛选器，则PNG文件必须位于主题的assets文件夹中。
如果图像位于文件中，请使用文件url筛选器

  <ul class="colorlist"> 
 {% for option in product.options %}
    {% if option == 'Color' %}
        {% assign index = forloop.index0 %}
         {% assign colorlist = '' %}
         {% assign color = '' %}
           {% for variant in product.variants %}
             {% capture color %}
               {{ variant.options[index] }}
             {% endcapture %}

               {% unless colorlist contains color %}
                {% if variant.available %}



<!-- <img src="{{ color | downcase | append: '.png' | asset_url }}"
alt="{{ color }}" width="16" height="16" /> -->


                    <li id="{{ variant.id }}" class="instock"><a href="{{ product.url | within: collection }}?variant={{ variant.id }}" style="background:{{ color | downcase }}">{{ color | downcase }}</a></li>

                {% else %}

                    <li id="{{ variant.id }}" title="Out of Stock"  class="outstock" >{{ color | downcase }}</li>

                {% endif %}

              {% capture tempList %}
                 {{colorlist | append: color | append: " " }}
              {% endcapture %}
         {% assign colorlist = tempList %}
       {% endunless %}
     {% endfor %}
   {% endif %}
 {% endfor %}
          </ul>