时间戳

首页 > 解决方案 > 在产品系列页面上显示色板（不是文本）Shopify

shopify - 在产品系列页面上显示色板（不是文本）Shopify

问题描述

我有下面的代码 - 它显示文本中的变体，彩色背景，并链接到变体。我希望它改为 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）

标签： shopifyliquidliquid-layout

解决方案

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

推荐阅读