如何在 Shopify 的 collection 页面上获得单独的颜色和尺寸下拉菜单？

Question

我想在产品下为颜色和尺码单独下拉。此外，如果产品不可用，则应禁用购物车按钮。下面是我的代码，但我在一个下拉菜单中同时获得了颜色和尺寸。

<form action="/cart/add" method="post">
            {% if product.variants.size == 1 %}
          
                <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            {% else %}
        <select name="id" style="display:none;">{% for variant in product.variants %}
             <option value="{{ variant.id }}">{{ variant.title }}
             </option>{% endfor %}
        </select>
            {% endif %}
            <div><button type="submit" name="add" class="btn">Add to cart</button></div>  
        </form>

Answer 1

{% for option in product.options_with_values %}          
   <select  class="option-selector {{option.name}}" data-var="{{forloop.index}}">             
   {% if product.available %}              
            {% for values in option.values %}
         <option value="{{values}}">{{values}}</option>
      {% endfor %}              
   {% endif %}             
   </select>            
{% endfor %}

如何在 Shopify 的 collection 页面上获得单独的颜色和尺寸下拉菜单？

How to get Separate Drop Down for Color and Size on collection page in Shopify?

html

liquid

shopify