Showing color swatch on collection page (not text) Shopify

Question

I have the code below - which is showing the variants in text, which a colored background, and link to the variant. I would like for it to be the color.png '.png' instead but it won't work.

As you see, the code between the "<.!-- and -->" doesn't seem to be working. It shows a blank .png in the 16px x 16px format. I have uploaded the correct colors in the files section of shopify, such as, red.png, black.png, etc. but it won't show up. (yes, it is technically in the wrong spot, it's there for testing)

  <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>

What changes need to be made to work correctly for how i want?

I pretty much just want it to work like this: https://www.shopifytips.com/tech-tips/show-all-color-swatches-within-collection-pages.html

(which, this code didn't work, but i found similar code on stack that worked: Show All Color Variants on Collection page in Shopify using Brooklyn Theme)

wsa wsa · Accepted Answer · 2018-10-17T07:24:02

You say you uploaded the PNG "in the files section of shopify".
That's an issue.
If you are using asset_url filter, the PNG files have to be in the assets folder of the theme.
Use file_url filter if the images are in Files.

Showing color swatch on collection page (not text) Shopify

1 Answers