使用布鲁克林主题在 Shopify 的 Collection 页面上显示所有颜色变体

Question

嘿，我在我的 shopify 网站上使用布鲁克林主题。我有不同的产品会有颜色变化。当我点击 collection 页面时，我想将该产品的所有颜色变体显示为单独的产品。我从昨晚开始就在谷歌上搜索任何帮助。

Answer 1

看看下面的代码。

<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 %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>

以上代码可以在collection页面显示商品的可用颜色。您可以采用相同的循环结构并显示整个产品网格，而不仅仅是显示变体名称。

使用布鲁克林主题在 Shopify 的 Collection 页面上显示所有颜色变体

Show All Color Variants on Collection page in Shopify using Brooklyn Theme

collections

product

shopify

variants