I know this question was asked million times on the internet but it seems like everyone wants to have a solution with their own twist. I can't find what I need exactly. 

So I used this code to display variants on my collection and then to add to cart.

```html
<form action="/cart/add" method="post" style="text-align:center;">

  <select name="id">
  {% for variant in product.variants %}
    {% if variant.available %}
    <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>     
    {% else %}
    <option disabled="disabled">{{ variant.title }} - Sold Out</option>
    {% endif %}
  {% endfor %}
    </select>          

  <input type="submit" value="Add to cart" class="btn" />

</form>
```

This works but in the dropdown, it gives it to me like this: 

```
xs / Black - $72.00     
small / Black - $61.00     
medium / Black - $52.00     
large / Black - $74.00     
xl / Black - $77.00     
xxl / Black - $55.00     
xs / Blue - $72.00    
small / Blue - $72.00     
medium / Blue - $72.00     
xl / Blue - $72.00    
xxl / Blue - $72.00    

```

What I want is for the customer to select size and color separately in different dropdowns and then click add to cart.

I was looking everywhere on how to do this with no luck. Please help.
My Shopify theme is Debut if it helps.