Question

我有下面的代码-在文本中显示变体，背景为彩色，并链接到变体。我希望它改为color.png'.png'，但它不起作用。

如您所见，“ <。！-和->”之间的代码似乎不起作用。它显示16px x 16px格式的空白.png。我已经在shopify的文件部分中上传了正确的颜色，例如red.png，black.png等，但是它不会显示。（是的，从技术上讲它是在错误的位置，可以在那里进行测试）

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

需要进行哪些更改才能正常工作？

我几乎只希望它像这样工作：https://www.shopifytips.com/tech-tips/show-all-color-swatches-within-collection-pages.html

（该代码不起作用，但是我在堆栈上发现了类似的代码，可以正常工作：Show All Color Variants on Collection page in Shopify using Brooklyn Theme）

Answer 1

您说您已在shopify的文件部分中上传了PNG“ ”。
那是个问题。
如果您使用的是 asset_url 过滤器，则PNG文件必须位于主题的 assets 文件夹中。
如果图像在“文件”中，请使用 file_url 过滤器。

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

1 个答案: