Shopify，将产品选项显示为3个单独的下拉菜单，而不是单个下拉列表

Question

在我的产品页面上，使用product.liquid模板中的以下代码行，它会为产品的3种不同产品选项生成3个单独的下拉列表，例如类型颜色大小..

  <div class="select">
    <select id="product-select" name="id">
      {% for variant in product.variants %}
      <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
      {% endfor %}
    </select>
  </div>

然而，我在product-loop.liquid中使用了相同的代码来显示集合页面上的相同下拉列表（没有添加到购物车的选项）..但这次下拉列表显示为单个组合下拉列表。

我如何像以前一样拆分它们？

下面是两个下拉列表的截图：

Answer 1

您需要在collection.liquid模板中包含option_selection.js。 将以下行粘贴到collection.liquid模板

的顶部或底部

{{ 'option_selection.js' | shopify_asset_url | script_tag }}