在收藏页面/主页上显示variantimage为可点击的thumnail Shopify（布鲁克林主题）

Question

我试图在每个产品下方的收集页面上显示产品的所有变体（仅颜色）作为缩略图。我希望客户能够在转到产品页面之前预览收集页面上的所有变体。有人可以帮助我指向富人的方向。

我所拥有的是以下内容。这将输出图像的变体名称和名称，但不输出缩略图。我想要的是附加到该变体名称的变体图像。最好能够在悬停时在集合页面上预览。

谢谢！

＆＃13;

＆＃13;

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

  <li id="{{ variant.id }}" title="{{ variant.inventory_quantity }} In Stock" 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 %}
{{ product.selected_or_first_available_variant.featured_image }} 
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</ul> 

＆＃13;

＆＃13;

＆＃13;