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

Issue

I want to Separate Drop Down for Color and Size under the product. Also if products is not available cart button should be disabled. Below is my code but I get both color and size in one dropdown.

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

Solution

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

Answered By - Anupam Mistry

Answer Checked By - Willingham (PHPFixing Volunteer)